jQuery UI, select tab with text link and load link specific ajax content

Question

I am using jQuery UI tabs to have a tab where I can search for records and then other tabs where I can view individual record details. I am trying to have search results link clicks open the relevant tab and load the specific ajax content for that search result.

I am able to switch tabs using an href with something like the jQuery UI tabs example code:

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

I see ajax content is normally loaded via setting the href on the tab itself:

<li><a id="customerTabLink" href="#tabs-2"><span>Customer</span></a></li>

I've tried adding this to the my-text-link onclick function to dynamically set the href for the tab but that doesn't load the content in my tab.

$('#customerTabLink').attr("href", "/view/dspClient.cfm?id_customers=15");

Is there another way I can be loading ajax content in the tab without setting this href? Or am I setting the href incorrectly? Is this something I should be using the load even for? http://docs.jquery.com/Events/load

Thanks!

-Matt

Answer 1

To change the URL that tab is using for AJAX calls you should use this:

$('#example').tabs('url', 1, '/view/dspClient.cfm?id_customers=15');

First argument tells that you want to change tab URL. Second argument is the index of the page you want to change the url (zero-based so 1 is the second tab), and third argument is the new URL.

Answer 2

hi RaYell how can i call $('#example').tabs('url', 1, '/view/dspClient.cfm?id_customers=15'); from an html link?