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

If you set the href of the <a> tag to a URL, jQuery UI will AJAX load the page into a tab for you. jqueryui.com/tabs/#ajax — gen_Eric
– gen_Eric, Commented Jan 16, 2013 at 15:04
@RocketHazmat , I've just updated my question. Function Wczytaj loads content to div. — breq
– breq, Commented Jan 16, 2013 at 15:06
You don't need that function, jQuery UI can AJAX load it for you. — gen_Eric
– gen_Eric, Commented Jan 16, 2013 at 15:07

gen_Eric · Accepted Answer · 2013-01-16 15:27:27Z

21

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

edited Jan 16, 2013 at 15:27

answered Jan 16, 2013 at 15:11

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

breq Over a year ago

Ok, but with "my" function i have a 'loading' effect. (beforesend, and success). How to get this effect bu using just url?

hsuk Over a year ago

@RocketHazmat : I found its possible, if we provide a title attribute on anchor tab, the same value provided on title will be id of the div created for remote tabs

gen_Eric Over a year ago

@hsuk: Cool! Didn't realize you could do that :-)

gen_Eric Over a year ago

@hsuk: And experimentation :-D

jofitz Over a year ago

@hsuk It seems that in jQuery UI 1.10 you set the id of the panel using the aria-controls attribute of the <li> flynsarmy.com/2015/05/specify-jquery-ui-ajax-tabs-panel-element

|

ShivarajRH · Accepted Answer · 2015-01-30 11:24:17Z

1

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

answered Jan 30, 2015 at 11:24

ShivarajRH

94014 silver badges24 bronze badges

Comments

Explosion Pills · Accepted Answer · 2013-01-16 15:10:16Z

0

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.

answered Jan 16, 2013 at 15:10

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Collectives™ on Stack Overflow

jQuery - tabs, use url to load ajax content

3 Answers 3

14 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related