How can I change the url of a jquery ui tab added through the add and tabTemplate functions?

Question

I could make it harder than I need, but I need help. I have some jquery ui tabs that are added via the add function. these tabs via ajax.

I have a tabTemplate as below when initially adding tabs.

tabTemplate: "<li><a href='#{href}'>#{label},/a><li>" 

And tab bookmark functionality is done through

 $tabs.tabs('add', 'http://thanksforyourhelp/greatly/appreciated/, some_title_var) 

If a form is presented on this tab, the data is written to the database. The response gives the identifier of the row added to the database.

The next time a particular tab is visited, the link should actually be "http: // thanksforyourhelp / much / appreciated / ID", where the identifier is now known, since the response from the form (ajax here also) sent it back. This will pre-populate the forms on the page based on the data in the database for "ID".

I reviewed the example here , but my href is the identifier for the corresponding tab (not the URL). Where is the actual URL stored?

The bookmark is as follows.

 <a href="#ui-tabs-6">new</a> 

I tried changing href on this, but by clicking on the tab, the content is loaded without ajax, and not inside the tab, as desired. What can i do wrong? Thank you for your help.

Edit: Removed changes with links to already missing URLs.

Answer 1

I haven't worked too much with tabs with AJAX support, but I think you need a url method:

 $("#tabs").tabs("url", index, url) 

Change the url from which the Ajax (remote) tab. the specified URL will be used for subsequent loads. Please note that you can not only change the URL of an existing remote tab using this method, but also include the tab on the page in the remote tab.

Answer 2

Above answer will not work in jQuery 1.9+ as description here . To work with jquery ui 1.9+ tabs you need to do something like this

 var tabs = $("#tabs"); var tab = $(tabs.data('uiTabs').tabs[TAB_INDEX]); tab.find('.ui-tabs-anchor').attr('href', "NEW_URL"); // If cached initially. Remove cache then tab.data( "loaded", false); tabs.tabs( "option", "active", TAB_INDEX); tabs.tabs("load", TAB_INDEX); 

This will change the tab url to a specific index and load that tab.