Is there a way to modify the link to a tab in jquery ui through jquery/javascript?

For example, my page layout has a query mechanism at the top, with several tabs underneath it. When the user submits the query, I'd like append the query string to each of the tab links. This works fine if I do full page refreshes when I submit the query, I just plug the query string in the link as the tabs are being built. However, if I try to submit and get my results asynchronously, I need my tabs links to get updated.

Below is a snippet of my button click event event, I build a query string, then submit it like this:

    $.ajax({
                url: "/MyController/" + actionPrefix + "Index?q=" + query + extraParm + "#ui-tabs-" + selectedTab,
                cache: false,
                success: function(html) {
                    $(list).remove();
                    $(container).append(html);
                    $('li a.actionLink').unbind('click').click(function() {
                        //This was some code I was playing with to change tab links, but couldn't seem to get it working...                        
                    });
                }
            });

Is there a way to modify the link to a tab in jquery ui through jquery/javascript?

For example, my page layout has a query mechanism at the top, with several tabs underneath it. When the user submits the query, I'd like append the query string to each of the tab links. This works fine if I do full page refreshes when I submit the query, I just plug the query string in the link as the tabs are being built. However, if I try to submit and get my results asynchronously, I need my tabs links to get updated.

Below is a snippet of my button click event event, I build a query string, then submit it like this:

    $.ajax({
                url: "/MyController/" + actionPrefix + "Index?q=" + query + extraParm + "#ui-tabs-" + selectedTab,
                cache: false,
                success: function(html) {
                    $(list).remove();
                    $(container).append(html);
                    $('li a.actionLink').unbind('click').click(function() {
                        //This was some code I was playing with to change tab links, but couldn't seem to get it working...                        
                    });
                }
            });

• javascript
• jquery
• jquery-ui
• jquery-ui-tabs

3 Answers 3

Above answer will not work in JQuery 1.9+ as describer here. To work with jquery ui tabs 1.9+ you have 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 URL of tab at particular index and load that tab.

The href is stored in the .data store.

You can use the following to change the url

$('#tabs').tabs('url' , tabIndex , url );

Another way see my answer to another SO question.

Getting Target URL from jQuery-UI Tabs

This allows you to say the following to change the first tab url

$('#tabs a:first').data('href.tabs', 'someNewUrl');

You should be able to just change the href:

       success: function(html) {
            $(list).remove();
            $(container).append(html);
            $('li a.actionLink').attr('href',somethingNew);
        }