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

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

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

Comments

[breq]

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

[gen_Eric]

jQuery UI also has these events, tabsbeforeload and tabsload. I'll update my answer.

[watkib]

Hi , am using the href as shown in the answer above, but only the href set to #id of div in the page loads, the rest set to external php do not load. Please help here: link

[hsuk]

Is there any way to provide ID for those ajax pages ?

[gen_Eric]

@hsuk: What do you mean? What are you asking?

[hsuk]

@Rocket Hazmat: As you are saying for ajax pages, <div> is made and ID is provided as ui-tabs-X, I am asking if this ID can be assigned by us ourselves ?

[gen_Eric]

@hsuk: Unfortunately, I don't think so.

[hsuk]

@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]

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

[hsuk]

@RocketHazmat : yeah, realization comes over effort and research :)

[gen_Eric]

@hsuk: And experimentation :-D

[hsuk]

Again its not working for jQuery UI 1.10, seems like its made for jQuery 1.8 only

[jofitz]

@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-elem‌​ent

[Diplonics]

@RocketHazmat, topic is fairly old but have you come across a solution to opening a tabs href link when a user selects to open it in a new tab/window, either through a right click and select new tab or a click on the mouse wheel. The problem is that when this is done the new window loads the links content and you end up with a bare page. If this is done I need the action to load the whole page at the new window loaded at the tab this action was carried out on, if you get me??