web-dev-qa-db-ja.com

JQuery UIタブでクリック時にタブのコンテンツを更新する

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>
jqueryjquery-ui-tabs
12
jack

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

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

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

18
Scott Pier

1）ajaxコンテンツをロードするタブを定義するときは、ロードされたdivのIDにその値を入れるタイトル属性を必ず使用してください。私の場合、タイトルは「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);
9
jj2

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

$( "#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で再ロードされます

4
Ehsan Khaveh

これが私がやった方法です。注目すべきことの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);
              });
          }
    });
}
2
Trevor Conn

タブがクリックイベントを強制終了するように見えるため、この問題に悩まされていました。マウスダウンを使用しました。

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

この質問はしばらく前に投稿されましたが、誰かのお役に立てば幸いです。

2
baberlicious

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

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

まとめると、jqueryタブのクリックイベント用にこれがあり、周囲のdivには次のようにタブのIDがあります。

<div id="tabs">

以下は、ドキュメント準備機能で実行されます。

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

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.");
        }
    }
});
1
Jamee

JQueryタブのajaxコンテンツで同じ問題が発生しました。

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

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

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

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

次に、タブ内で次の操作を行いました

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

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

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

1
Calocher

この質問は長期間にわたって何度も回答されてきたので、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が含まれています。 "area-controls"はもっと論理的な名前だったかもしれませんが、opera愛好家として、私は不満を言っていません。:-)

0
Kristiaan

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

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

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

上記は、htmlを返す場合に機能します。オブジェクトを返す場合は、追加の作業が必要になる場合がありますが、おおむね上記の方法で十分です。

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

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

編集2

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

ごめんなさい。

0
griegs

このリンクが古いことは知っていますが、同じ状況に遭遇しました。私はここで述べられていることをすべて理解して取り入れようとしましたが、それでもうまくいかなかったり、持っているものを台無しにしてしまいます。

4つのタブ、インデックス値0、1、2、3を持つモーダルダイアログがあり、タブ1で開きたいので、コードには次の行があります。

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

そして、別のタブ（たとえば、タブ2）をクリックしてから（タブ1に）戻るまで、タブ1には常に以前の表示データ（html ajaxコンテンツ）が含まれます。したがって、次のようにしました。

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

そしてそれは働いた:)

0
Terry

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

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

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