CODEWITHSUNDEEP
jqueryajaxtabs
breq
breq

Reputation: 25526

jQuery - tabs, use url to load ajax content

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

Upvotes: 10

Views: 50082

Answers (3)

ShivarajRH
ShivarajRH

Reputation: 940

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

Upvotes: 1

gen_Eric
gen_Eric

Reputation: 227310

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

Upvotes: 21

Explosion Pills
Explosion Pills

Reputation: 191809

If you just set the href attribute of each of the tab links to the ajax URL you are supposed to load it should work.

If you don't want to do that, then get rid of the onClick attributes. The problem is that when the page loads the trigger for selecting a particular tab such as #id2 happens before the click elements are bound. You need to bind the click handlers before that and call the corresponding one when the tab in question is selected by the fragment.

Upvotes: 0

Related Questions