單擊JQuery UI選項卡時刷新選項卡內容

Question

TAB1的內容由來自遠程URL的ajax加載。 選擇TAB1時，我必須切換到TAB2，然后返回到TAB1以刷新加載的內容。

如何在單擊其選項卡時使TAB1刷新加載的內容？

編輯： HTML代碼如下

<div id="tabs">
    <ul>
        <li><a href="url1">Tab1</a></li>
        <li><a href="url2">Tab2</a></li>
    </ul>
</div>
<script type="text/javascript"> 
    $(document).ready(function(){
        $tabs = $("#tabs").tabs({
            select: function(event, ui) {
                $('a', ui.tab).click(function() {
                    $(ui.panel).load(this.href);
                    return true;
                });
            }
        });
});
</script>

Answer 1

刷新jQuery中的選項卡的另一種簡單方法是使用load方法：

$('#my_tabs').tabs('load', 0);

數值是要刷新的選項卡的從零開始的索引。

Answer 2

1）在定義加載ajax內容的選項卡時，請確保使用title屬性，該屬性將該值放入加載的div的id中。 在我的情況下，標題是“警報標簽”。 否則jquery生成的div有一個神秘的id：

<li><a href="/alert/index" title="alert-tab">Alert</a></li>

2）現在在你要重新加載標簽的任何事件中使用它：

var href = "/alert/index/";  
$("#alert-tab").load(href);

Answer 3

您只需刪除所單擊的選項卡的內容，然后使用相同的內容（或任何您想要的內容）重新加載它。 例如：

$( "#tabs" ).tabs({                                                                  
  activate:function(event,ui){ 
    //Remove the content of the current tab
    ui.newPanel.empty();
    //load the file you want into current panel
    ui.newPanel.load('content'+(ui.newTab.index()+1)+'.php');                                                 
  }                                                                          
});

在這種情況下，例如，如果單擊第二個選項卡，則清空該面板並使用content2.php重新加載

Answer 4

這就是我做到的。 需要注意的一點是，我發現分配給DIV的ID會使每個選項卡的內容以可預測的方式命名，並始終與所選選項卡中錨點的href相對應。 這種解決方案取決於具體情況，因此我認為它可能會被批評為“過於脆弱”。 我從中提取代碼的形式是一種可重用的控件，可能會或可能不會在選項卡中托管，因此這就是我在執行.each（）之前檢查parentID值的原因。

//I get the parentID of the div hosting my form and then use it to find the appropriate anchor.
var parentID = '#' + $('#tblUserForm').parent().attr('id');
//Trying to enable click on an already selected tab.
if(parentID == '#ui-tabs-3') //The value of var parentID
{
     $('#tabs a').each(function() {
          if($(this).attr('href') == parentID)
          {
              $(this).bind('click', function() {  
                  $(parentID).load(your_URL_here);
              });
          }
    });
}

Answer 5

努力解決這個問題，因為標簽似乎會殺死點擊事件...所以我只是使用了mousedown。

$("#tabs ul.ui-widget-header")
 .delegate("li.ui-tabs-selected","mousedown",function(){
   $tabs.tabs("load",$(this).index());
 });

這個問題是在不久前發布的，但我希望它可以幫助某人。

Answer 6

好的把東西放在一起我有jquery選項卡的click事件，周圍的div有一個標簽的id，如下所示：

<div id="tabs">

以下內容在文檔就緒函數中執行：

 $('#tabs > ul > li > a').each(function (index, element) {
    $(element).click(function () {         
        $('#tabs').tabs('load', index); 
    });

它為每個標簽注冊了click事件，感謝Scott Pier的標簽索引

我的文檔中也准備好了這個以防止緩存

 $("#tabs").tabs({
    ajaxOptions: {
        cache: false,
        error: function (xhr, status, index, anchor) {
            $(anchor.hash).html(
      "Couldn't load this tab. We'll try to fix this as soon as possible. " +
      "If this wouldn't be a demo.");
        }
    }
});

Answer 7

我在jQuery選項卡中遇到了一些ajax內容的問題。

該選項卡會加載一個flot圖，但只有當它是您首先加載的選項卡時它才會起作用。

我用一種俗氣的工作來解決這個問題，但它很有效。

我拿走了所有我的flot js代碼並將其轉儲到一個單獨的.js文件中並將其放入一個函數中

function doFlotGraph(data){
    $.plot({plotcode});
};

然后我在選項卡中執行了以下操作

$.getScript('url/doFlotGraph.js',function(){
    doFlotGraph(data);
});

這允許flot做它的事情，因為在ajax $ .getScript被激活時，選項卡中的文檔已經完成。

然后，您可以將ajax放在該選項卡的.click中。

Answer 8

要做到這一點，您只需要在創建過程中保存全局鏈接：

ui_tabs = $( "#tabs" ).tabs();

畢竟可以使用它涉及API加載

例如：轉換選項卡頁面部分上的所有鏈接

$('#tabs .paging a').click(function(e){
    var selected = ui_tabs.tabs('option', 'selected');
    ui_tabs.tabs('url', selected, e.target.href);
    ui_tabs.tabs('load', selected);
    return false;
})

Answer 9

關於jQuery調用的“成功”，你可以用新的html替換html。

你沒有發布任何代碼，所以你可能已經這樣做但是;

success: function(msg) {
    $('.TabOne').html(msg);
}

如果你要返回html，上面的工作。 如果你要返回一個對象，那么你可能需要做額外的工作，但總的來說，上面的工作應該可行。

編輯我還應該提到.TabOne是一個類名。 因此，您的標簽內容持有者必須具有一類TabOne才能使上述代碼生效。

請記住，類名實際上不必作為一種樣式存在。

編輯2

嗯，我看到你現在要做的事情，我有點不知所措。 會做一些測試，也許能夠回復你。

抱歉。

Answer 10

我知道這個鏈接很舊，但我遇到了同樣的情況。 我試圖理解並融入這里所說的所有內容，但它仍然沒有用，或者它會破壞我所擁有的東西。

我有一個帶有4個選項卡的模態對話框，索引值為0,1,2,3，我想在選項卡1上打開，所以在我的代碼中有以下行：

    $("#tabs").tabs('select',1);

並且選項卡1將始終包含先前的顯示數據（html ajax內容），直到我單擊其他選項卡（例如選項卡2）然后返回（到選項卡1）.​​..所以我執行了以下操作：

    // this forces tab content update
    $("#tabs").tabs('select',1);
    $("#tabs").tabs('select',2);
    $("#tabs").tabs('select',1);

它工作:)

Answer 11

由於這個問題已經在很長一段時間內得到了很多次的回答，因此發布更新版本的jquery也不會有什么壞處。 我正在使用jquery-ui 1.10.3而且Trevor Conn所做的假設似乎不再有效了。 然而，他的方法幫助我做了一些修改。 假設我想刷新的標簽名為“tab_1”（列表項的id）

<div id="tabs" class="tabs">
    <ul>
        <li id="tab_1">
            <a href="my_link">tab one</a>
        </li>
        ...(other tabs)...
    </ul>
</div>

在我的javascript方法中刷新選項卡內容，我寫（使用jquery）：

var tab = $('#tab_1');
var id = tab.attr('aria-controls');
var url = $('a',tab).attr('href');
$("#"+id).load(url);

屬性“aria-controls”包含包含選項卡內容的div的id。 “區域控制”可能是一個更合乎邏輯的名稱，但作為一個歌劇家，我並沒有抱怨。 :-)

Answer 12

我找到了解決這個問題的方法。 在嘗試了所有這些方法后，它們都沒有為我工作。 所以為了簡單起見，我提出了這個解決方案，雖然它不是最優雅的方式，但它仍然可以完成工作。

首先將焦點設置在不同的選項卡上，然后將焦點返回到要刷新的選項卡。

$("#myTabs").tabs("option", "active", 0);  
$("#myTabs").tabs("option", "active", 1);