How to reload AJAX content in jQuery UI Tab

Question

I am trying to refresh Ajax content into a jQuery UI tab. i've seen lots of folks ask, and lots of solutions suggested (albeit all of them incomplete or non working) so once more... how is this done?

Here is what i've got:

<script>
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                }
            }
        });
    });

    </script>


<div class="demo">

<div id="tabs">
    <ul>

        <li><a href="/vendor/tab_vendorInfo.cfm" title="vendor">Vendor Info</a></li>
        <li><a href="/vendor/tab_vendorDelivery.cfm" title="delivery">Delivery</a></li>
        <li><a href="/vendor/tab_vendorProducts.cfm" title="products">Products</a></li>
        <li><a href="/vendor/tab_vendorRequests.cfm" title="requests">Requests</a></li>
    </ul>
    <div id="tabs-1">

    </div>
</div>

</div><!-- End demo -->


**** 
and in one of the panels, I'd like to be able to reload the panel, passing additional parameters in the query string
such as:

<!--- panel 4 --->

Here is some content that would show initially.
If you click this <a href="panel4.cfm?catID=1">category</a> it will reload the href INTO the current tab

<!--- end panel 4 ---->

....

I would even be open to getting a JSON response to the ajax call, but simply reloading the tab is a nightmare enough.

I'd kill for some decent jQuery docs. The examples provided really aren't complete enough to do anything except encourage blind copying and pasting.

I've seen reference to the .load function, but no example of how or where it is used. I've seen reference to "binding to the click event", but again, it's in a situation without ajax.

How is this EXTREMELY SIMPLE task done with ajax? I mean really? no equivalent to 'target' like good ol frames?

that sucks moose toes.

Answer 1

Ok putting things together I have this for the click event of the jquery tabs, the surrounding div has an id of tabs, like this:

<div id="tabs"> 

The following gets executed in the document ready function:

$('#tabs > ul > li > a').each(function (index, element) { 
$(element).click(function () {          
    $('#tabs').tabs('load', index);  
}); 

It registers for every tab the click event, with the index of the tab thanks to Scott Pier

I also have this in my document ready to prevent caching

$("#tabs").tabs({ 
ajaxOptions: { 
    cache: false, 
    error: function (xhr, status, index, anchor) { 
        $(anchor.hash).html( 
  "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
  "If this wouldn't be a demo."); 
    } 
} 
}); 

The content gets updated always in the same target. You could bind it to a different event of course.

Answer 2

If I'm understanding the question correctly, you should be able to use jQuery's .load( ) method and use the content element of the tab as the target.

var tab = $('div.ui-tabs-panel').eq(0);
tab.find( 'a' ).bind( 'click', function( event )
{
   var link = $(this);
   tab.load(link.attr( 'href' ));
   event.preventDefault();
});

Where .eq(0) would be the tab you want (0 for first tab, 1 for 2nd, etc, etc)

Also, this seems like a good resource for you... http://docs.jquery.com/UI/Tabs

Particularly here http://docs.jquery.com/UI/Tabs#Ajax_mode

Answer 3

I ended up using the 'hijax' method outlined in the docs here is the code I used:

<script>
$(function() {
    $( "#tabs" ).tabs({
    //define ajax options, since they do it in the demo!
    // not sure why,what, or if its needed <br>
    //commented examples sure wouuld eilimate half of the forum posts!
    ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                    "If this wouldn't be a demo." );
            }
        },


    //make sure to include a comma between the ajaxoptions, and the load options
    //this is the bit that makes all a link with the class of 'thisPane' stay within the tab
    //a href tags that are not of the class 'thisPane' will open outside the tab
    load: function(event, ui) {
    $(ui.panel).delegate('a.thisPane', 'click', function(event) {
        $(ui.panel).load(this.href);
        event.preventDefault();
    });
    }


    });
});

</script>

• Vendor Info
• Delivery
• Products
• Requests

and here is the link on one of the pages (tab 4) that I needed to "reload": (basically for paging a recordset within a tab)

<a href="tab_vendorRequests.cfm?next=6" class="thisPane">page 1</a>

and if you don't include the class 'thisPane' (or any class name you'd like to assign), the link will open outside the tabs.