CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-tabs
Brosto
Brosto

Reputation: 4565

JQuery UI Tabs - Modify link for tab

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

Upvotes: 0

Views: 4004

Answers (3)

Zahid Riaz
Zahid Riaz

Reputation: 2889

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.

Upvotes: 4

redsquare
redsquare

Reputation: 78667

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

Upvotes: 2

SeanCannon
SeanCannon

Reputation: 77956

You should be able to just change the href:

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

Upvotes: 0

Related Questions