Question

我的标签定义：

<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>

这将显示以下屏幕截图中显示的标签（为简洁起见，我删除了“状态”标签的代码）： bootstrap3-tabs

当我点击超链接initialCanonJob时，我想进行AJAX调用，然后在同一个标签中加载来自AJAX回调的html内容（必须删除表）。如何从链接中获取选项卡对象，然后在选项卡html中填充AJAX调用中的数据？

$('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);
    }
});
});

Answer 1

一个建议是，您可以将更多数据添加到初始Canon Job中 <div id='some-1' style='color:aqua' class='someTitle' name='url'> initialCanonJob <input type='hidden' id='hidSome-1' value='URL'></div>

您可以同时尝试名称/隐藏。 Jquery如下。

$(".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);
    }
});

}

Bootstrap 3 - 对选项卡中的表内链接进行AJAX调用，并在选项卡内加载内容

1 个答案: