Question

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...                        
                    });
                }
            });

Answer 1

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');