0

My tabs definition:

<html>
<head>
</head>
<body>
    <ul class="nav nav-tabs" id="rcg-tabs">
<li><a href="#tasks" data-toggle="tab">Tasks</a></li>
<li><a href="#canon-input" data-toggle="tab">Canonicalization</a></li>
    </ul>
    <div class="tab-content">
<div class="tab-pane active" id="tasks">
    <table title="Job Names" class="table table-bordered table-striped table-hover table-condensed">
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Execution&nbsp;Count</th>
            <th>Launchable</th>
            <th>Incrementable</th>
        </tr>
        <#list jobs as job>
            <tr>
                <#assign job_url><@spring.url relativeUrl="${servletPath}/jobs/${job.name}"/></#assign>
                <td><a href="${job_url}">${job.name}</a></td>
                <td><@spring.messageText code="${job.name}.description" text="No description"/></td>
                <td>${job.executionCount}</td>
                <td><#if job.launchable??>${job.launchable?string}<#else>?</#if></td>
                <td><#if job.incrementable??>${job.incrementable?string}<#else>?</#if></td>
            </tr>
        </#list>
    </table>
</div>

<div class="tab-pane" id="canon-input">
    <s:if test="hasFieldErrors()">
        <div class="alert alert-danger">
            <s:fielderror theme="bootstrap"/>
        </div>
    </s:if>
    <s:form action="canonicalize-logs" enctype="multipart/form-data" method="post"
        theme="bootstrap" cssClass="form-horizontal form-canon" validate="true">
        <!-- 
        <s:fielderror fieldName="canonicalizationDate" theme="bootstrap"/>
         -->
        <div class="form-group input-group" id="canonicalizeDate">

            <label for="canonicalizationDate">Date</label>
            <input type="text" id="canonicalizationDate"
                name="canonicalizationDate" placeholder="mm/dd/yyyy"
                class="form-control datepicker"/>
        </div>
        <!-- 
        <s:fielderror fieldName="canonicalizationHour" theme="bootstrap"/>
        -->
        <div class="form-group input-group">
            <label for="canonicalizationHour">Hour</label>
            <select class="form-control" name="canonicalizationHour" id="canonicalizationHour">
                <option value="-1">Select Hour</option>
                <s:iterator var="hour" begin="0" end="%{dayHours}">
                    <option value="<s:property/>"><s:property value="#hour"/></option>  
                </s:iterator>
            </select>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-lg btn-primary">Canonicalize Logs</button>
        </div>
    </s:form>
</div>
</div>
</body>
</html>

This will render the tabs as show in the screenshot below (I have removed the code for Status tab for brevity): bootstrap3-tabs

When I click on the hyperlink initialCanonJob, I would like to make an AJAX call and then load the html content from the AJAX call back in the same tab (The Table will have to be removed). How do I get the tab object from the link and then populate the data from the AJAX call inside the tab html?

$('a').click(function (event){
event.preventDefault();
var jobUrl = "" + $(this).attr('href') + "";
$.ajax({
    type: "GET",
    url : jobUrl,
    error: function (data) {
        console.log("Error occurred when retrieving job executions");
    },
    success: function (data) {
        //how to get the tab object and populate data?
        alert(data);
    }
});
});
Anand
  • 1,791
  • 5
  • 23
  • 41
  • If I'm not wrong (because I didn't read your question to the end) your current clicked tab will be `$(this)` so you can operate with it – Pavlo Mar 06 '14 at 09:52
  • Pavio - wouldn't $(this) be the anchor tag? Because $(this).attr('href') gives me the url of the href link. – Anand Mar 06 '14 at 09:56
  • Yes, it would be your anchor, but as an example you can do the next thing with it `var currentHref = $(this).attr('href'); alert($("."+currentHref).html());` will be your table. Please check. But don't forget remove `#` from your href – Pavlo Mar 06 '14 at 09:59
  • Pavio - I get Uncaught Syntax error, unrecognized expression: ./rcg-web/admin-console/jobs/initialCanonJob error where /rcg-web/admin-console/jobs/initialCanonJob is the href url – Anand Mar 06 '14 at 10:09
  • `alert(jobUrl)` should return `#tasks` or `#canon-input`, shouldn't it? Because your anchors are tabs. – Pavlo Mar 06 '14 at 10:54
  • Pavlo - My anchors aren't tabs. ${job.name} is my anchor and this is embedded with the tag – Anand Mar 06 '14 at 10:55
  • Pavlo - I did this: var tabPane = $('#tasks'); make an AJAX call; $(tabPane).html(data) - This works. The only downside I am hard coding the id of the tab in the javascript code. – Anand Mar 06 '14 at 11:27
  • What about `alert($('.tab-pane.active').html())` this should be your selected tab. Is that something your wanted? – Pavlo Mar 06 '14 at 12:10

1 Answers1

0

One suggestion would be, you can append more data's to initialCanonJob like <div id='some-1' style='color:aqua' class='someTitle' name='url'> initialCanonJob <input type='hidden' id='hidSome-1' value='URL'></div>

You can try as both Name / Hidden. Jquery as follows.

$(".someTitle").click(function(e){
   var getID = $this.id.replace('some-'); // you will have 1 here
   var getURLHiddent = $("#hidSome-"+getID).val();// if hidden method follow 
   var getURL = $(this).attr('name');
   $.ajax({
    type: "GET",
    url : getURLHiddent, //getURL
    error: function (data) {
        console.log("Error occurred when retrieving job executions");
    },
    success: function (data) {
        //how to get the tab object and populate data?
        alert(data);
    }
});

}
Santhosh Kumar
  • 190
  • 3
  • 10