web-dev-qa-db-ja.com

jQuery-タブ、urlを使用してajaxコンテンツをロード

だから私のスクリプトはこのようになります

function() {
    $( "#tabs" ).tabs();
});

function Wczytaj(link, div_id, parametr1, parametr2, parametr3)
{
   $.ajax(link, { data: { par1: parametr1, par2: parametr2, par3: parametr3 },
   type: "post",
     success: function(data) {
       $('#'+div_id).fadeOut("medium", function(){
       $(this).append(data);
      $('#'+div_id).fadeIn("medium");
     });
  }
 });
}

<div id="tabs">
    <ul>
        <li><a href="#id1" onClick="Wczytaj('trouble2.php','id1','null','null','null');">My id 1</a></li>
        <li><a href="#id2" onClick="Wczytaj('trouble2.php?action=lista','id2','null','null','null');">My id 2</a></li>
        <li><a href="#id3" onClick="Wczytaj('troubl2.php?action=old','id3','null','null','null');">My id3</a></li>
    </ul>

    <div id="id1"></div>
    <div id="id2"></div>
    <div id="id3"></div>
</div>

そして、それは問題なく動作しますが、たとえばdivコンテンツをロードするためにURLアドレスも使用したいです。たとえば、http://myurl.com/page.php#id2は、選択されたタブを含むページをid2でロードする必要があります-動作しますが、divが空のためonClick属性。それを修正するには？

私は私の英語をお詫び申し上げます

jqueryajaxtabs
10
breq

AJAXタブにロードするために独自の関数を使用する必要はありません。jQueryがこれを行うことができます。hrefをURLに設定し、追加しないでください<div>s。

<div id="tabs">
    <ul>
        <li><a href="trouble2.php">My id 1</a></li>
        <li><a href="trouble2.php?action=lista">My id 2</a></li>
        <li><a href="trouble2.php?action=old">My id3</a></li>
    </ul>
</div>

jQueryはタブを作成し、自動的にAJAX経由でページをロードします。ここのドキュメントを参照してください： http://jqueryui.com/tabs/#ajax

また、<div> あなたのために。この例では、ui-tabs-X、ここでXはタブインデックスです。そう、 http://myurl.com/page.php#ui-tabs-2は、2番目のタブを開いた状態でページをロードします。

ここでjQueryのデモを確認してください： http://jqueryui.com/resources/demos/tabs/ajax.html#ui-tabs-2

[〜＃〜] edit [〜＃〜]：リモートタブがロードされる前または後に関数を実行する場合、jQuery UIは tabsbeforeload および tabsload イベント。

タブを作成するときにバインドできます。

$('#tabs').tabs({
    beforeLoad: function(event, ui){
        alert('loading');
    },
    load: function(event, ui){
        alert('loaded');
    }
});

または、後でバインドすることもできます。

$('#tabs').on('tabsbeforeload', function(event, ui){
    alert('loading');
});

$('#tabs').on('tabsload', function(event, ui){
    alert('loaded');
});
20
Rocket Hazmat

JQueryにタブAjaxコンテンツをロードする前に、href urlをリセットします。

$( "#pending_recs" ).tabs({
    beforeLoad: function( event, ui ) {
        var filter_url = get_url();
        var url_str = site_url+'/admin/pending_recs/'+filter_url+"/0";

        $("#pending_recs .ui-tabs-nav .ui-state-active a").attr('href',url_str);

        ui.panel.html('<div class="loading">Loading...</div>');

        ui.jqXHR.error(function() {
            ui.panel.html('<div align="center"><p>Unable to load the content, Please <a href="javascript:void(0)" onclick="return load_contents();">Click here to Reload</a>.</p></div>');
        });
    }
    ,load:function( event, ui ) { /* After page load*/  }
});
1
ShivarajRH

各タブリンクのhref属性をajax URLに設定するだけで、ロードすることになっているはずです。

そうしたくない場合は、onClick属性を削除してください。問題は、ページが読み込まれるときに、クリック要素がバインドされる前に、#id2などの特定のタブを選択するためのトリガーが発生することです。問題のタブがフラグメントによって選択されたときに、その前にクリックハンドラーをバインドし、対応するハンドラーを呼び出す必要があります。

0
Explosion Pills