JQuery - вкладки, используйте url для загрузки содержимого ajax

Итак, мой script выглядит следующим образом

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>

И это работает без проблем, НО я также хочу использовать URL-адрес для загрузки содержимого div например, http://myurl.com/page.php#id2 должен загружать страницу с выбранными вкладками с помощью id2 - он работает, но div пуст из-за атрибута onClick. Как это исправить?

Прошу прощения за мой английский

Ответы

Ответ 1

Вам не нужно использовать свою собственную функцию для загрузки 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 предоставляет 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');
});

Ответ 2

Reset URL-адрес href перед загрузкой содержимого вкладки ajax в JQuery:

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

Ответ 3

Если вы просто установите атрибут href для каждой из ссылок вкладки в URL-адрес ajax, который вы должны загрузить, он должен работать.

Если вы не хотите этого делать, отмените атрибуты onClick. Проблема заключается в том, что когда страница загружает триггер для выбора конкретной вкладки, такой как #id2, происходит до привязки элементов щелчка. Перед этим нужно связать обработчики кликов и вызвать соответствующий, когда выбранная вкладка будет выбрана фрагментом.