jquery - JQueryUIタブをクリックするとタブコンテンツが更新されます

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>

score 18 · Accepted Answer

jQuery でタブを更新するもう 1 つの簡単な方法は、load メソッドを使用することです。

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

数値は、更新するタブのゼロから始まるインデックスです。

score 10 · Accepted Answer

1) ajax コンテンツをロードするタブを定義するときは、ロードされた div の ID にその値を入れる title 属性を必ず使用してください。私の場合、タイトルは「alert-tab」でした。それ以外の場合、jquery で生成された div には難解な ID があります。

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

2）タブをリロードするイベントの中でこれを使用します：

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

score 4 · Accepted Answer

クリックされたタブのコンテンツを削除し、同じコンテンツ (または必要なもの) で再ロードするだけです。例えば：

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

この場合、たとえば 2 番目のタブをクリックすると、パネルが空になり、次のようにリロードされます。content2.php

score 2 · Accepted Answer

タブがクリックイベントを殺すように見えるので、この問題に苦労しました...それで私はマウスダウンを使用しました。

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

この質問は少し前に投稿されましたが、誰かに役立つことを願っています。

score 2 · Accepted Answer

これが私がそれをした方法です。注意すべき点の1つは、各タブのコンテンツをレンダリングする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);
              });
          }
    });
}

score 1 · Accepted Answer

jQueryタブのいくつかのajaxコンテンツでも同じ問題が発生しました。

タブはフロットグラフをロードしますが、最初にロードしたタブである場合にのみ機能します。

ちょっと安っぽい回避策でこれを修正しましたが、効果的でした。

私はすべてのflotjsコードを取得し、それを別の.jsファイルにダンプして、関数に入れました。

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

次に、タブ内で次のことを行いました

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

これにより、ajax $ .getScriptがアクティブ化されるまでに、タブで準備ができているドキュメントがすでに終了しているため、flotはその処理を実行できます。

次に、そのタブの.click内にajaxを配置できます。

score 1 · Accepted Answer

これを正しく行うには、作成中にグローバルリンクを保存する必要があります。

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;
})

score 0 · Accepted Answer

この質問は長期間にわたって何度も回答されているため、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 が含まれます。「エリアコントロール」はより論理的な名前だったかもしれませんが、オペラ愛好家として、私は文句を言いません。:-)

score 0 · Accepted Answer

jQuery 呼び出しの「成功」で、html を新しい html に置き換えることができます。

あなたはコードを投稿していないので、すでにこれを行っているかもしれませんが;

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

htmlを返す場合、上記は機能します。オブジェクトを返す場合は、追加の作業が必要になる場合がありますが、概して上記の方法でうまくいくはずです。

編集 .TabOne はクラス名であることにも言及する必要があります。したがって、上記のコードが機能するには、タブコンテンツホルダーに TabOne のクラスが必要です。

これが機能するために、クラス名がスタイルとして実際に存在する必要はないことに注意してください。

編集 2

うーん、私はあなたが今何をしようとしているのかを見て、少し途方に暮れています. いくつかのテストを行い、あなたに連絡できるかもしれません。

ごめん。

score 0 · Accepted Answer

この問題を回避する方法を見つけました。これらの方法をすべて試した後、どれもうまくいきませんでした。簡単にするために、このソリューションを思いつきました。これは最もエレガントな方法ではありませんが、それでも機能します。

最初に別のタブにフォーカスを設定してから、更新するタブにフォーカスを戻します。

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

jquery - JQueryUIタブをクリックするとタブコンテンツが更新されます

12 に答える 12

Related

Reference