2

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.

Improve this question

3 Answers 3

Reset to default
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.

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

Comments

0

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>

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.

Improve this answer

Comments

0

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

Improve this answer

2 Comments

For example: $('div.ui-tabs-panel').eq(0).load( 'example.com/path/to/resource' ); how is that triggered when a user clicks a link with the panel? I've seen mention of "hijax", but again, the snippet of script is not shown in context and no example is provided.
thanks KOGI, I did find the answer to my issue in docs.jquery.com/UI/Tabs#Ajax_mode specifically: $('#example').tabs({ load: function(event, ui) { $(ui.panel).delegate('a', 'click', function(event) { $(ui.panel).load(this.href); event.preventDefault(); }); } });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.