Bootstrap 3 - 使 AJAX 调用选项卡中表内的链接并在选项卡内加载内容答案

【问题标题】：Bootstrap 3 - Make AJAX call for a link inside table in a tab and load content inside the tabBootstrap 3 - 使 AJAX 调用选项卡中表内的链接并在选项卡内加载内容
【发布时间】：2014-03-06 09:48:59
【问题描述】：

我的标签定义：

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

这将呈现选项卡，如下面的屏幕截图所示（为简洁起见，我删除了状态选项卡的代码）：

当我单击超链接 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);
    }
});
});

【问题讨论】：

如果我没记错的话（因为我没有把你的问题读到最后）你当前点击的标签将是$(this)所以你可以使用它
Pavio - $(this) 不是锚标签吗？因为 $(this).attr('href') 给了我 href 链接的 url。
是的，它将成为您的锚，但作为示例，您可以用它做接下来的事情 var currentHref = $(this).attr('href'); alert($("."+currentHref).html()); 将成为您的桌子。请检查。但不要忘记从您的 href 中删除 #
Pavio - 我收到未捕获的语法错误，无法识别的表达式：./rcg-web/admin-console/jobs/initialCanonJob 错误，其中 /rcg-web/admin-console/jobs/initialCanonJob 是 href url
alert(jobUrl) 应该返回#tasks 或#canon-input，不是吗？因为你的锚是标签。

标签： jquery twitter-bootstrap-3 bootstrap-tabs

【解决方案1】：

一个建议是，您可以将更多数据附加到 initialCanonJob，例如 <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);
    }
});

}

【讨论】：

Santhosh - 这将如何帮助我获取可以显示 ajax 结果的选项卡对象？
Anand- 如果成功，您将获得可以附加到表中的数据。只需将其隔离并附加到表中即可。
Santhosh - 我想删除表格并将结果添加到选项卡而不是表格。谢谢！
你可以试试 $("#tableID").remove(); $("tabID").append(result Data as html);