jQuery - tabs, use url to load ajax content

Question

So my script looks like this

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>

And it works without a problem, BUT I want to use also an URL address to load div content for example, http://myurl.com/page.php#id2 should load page with selected tabs with id2 - it works, but div is empty because of onClick attribute. How to fix it?

I apologize for my english

Answer 1

You don't need to use your own function to AJAX load into tabs, jQuery can do this for you. Just set the href to the URL, and don't add the <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 will make the tabs, and automatically load the page via AJAX. See the docs here: http://jqueryui.com/tabs/#ajax

It will also make the <div> for you. In the example, they are named ui-tabs-X, where X is the tab index. So, http://myurl.com/page.php#ui-tabs-2 should load the page with your 2nd tab open.

Check out jQuery's demo here: http://jqueryui.com/resources/demos/tabs/ajax.html#ui-tabs-2

EDIT: If you want to run a function before or after the remote tabs are loaded, jQuery UI provides the tabsbeforeload and tabsload events.

They can be bound when creating the tabs:

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

Or they can be bound afterwards:

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

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

Answer 2

Reset the href url before load the tab ajax content in 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*/  }
});