用于确定 AJAX 调用的引导选项卡选择

bootstrap tab selection to determine ajax call

本文关键字：选项 选择 AJAX 调用 用于      更新时间：2023-09-26

我在javascript中有这个函数，看起来像这样：

function getlivefeed() 
{       
    var msglist = document.getElementById("updates");
    var type = msglist.getAttribute("data-id-type");        
    var response = $.ajax({ type: "GET",   url: "iterations/live.php?type=" + type + "&token=" + Math.random(),   async: false }).responseText;     
    if (response != "undefined")
        document.getElementById("updates").innerHTML = response;                                        
}

如您所见，此函数查看div data 属性并读取值并在 ajax 调用中使用该值。

我希望能够在更改选项卡的索引时以某种方式更改此属性。

该选项卡是引导选项卡控件。

选项卡的标记为：

<ul class="nav nav-tabs">
  <li class="active"><a href="#atlass" data-toggle="tab">Atlass</a></li>
  <li><a href="#avi" data-toggle="tab">Aviation</a></li>
  <li><a href="#proc" data-toggle="tab">Processing</a></li>
  <li><a href="#it" data-toggle="tab">IT&S</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="atlass"><div id="updates" data-id-type="1"><div class="alert alert-default well" style="background-color: #f1f1f1"><i class="fa fa-spinner fa-spin"></i> Portal is Initilizing... Please Wait.</div></div></div>
  <div class="tab-pane" id="avi"><div class="well" style="background-color: lightsteelblue;">Aviation Feed Will go here.</div></div>
  <div class="tab-pane" id="proc"><div class="well" style="background-color: lightsteelblue;">Processing Feed Will go here.</div></div>
  <div class="tab-pane" id="it"><div class="well" style="background-color: lightsteelblue;">IT&S Feed will go here.</div></div>
</div>
总的来说，我的

问题是，当我更改选项卡的索引时，如何使我的函数与不同的"类型"iterations/live.php?type=1 or type = 2 or type = 3等一起工作？

非常感谢帮助！

据我了解您的问题，您想更改数据属性的值吗？

你可以使用 jQuery 的数据函数来更改数据属性。

$("#atlass").data("id-type",2);

切换选项卡时触发脚本： 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
 // your logic here...
})

这段代码实际做了什么：选项卡链接已绑定。每当用户单击选项卡元素时，都会触发此脚本。

相关文章：