I have a tab layout on one of my sites that shows a log of items. The items are "paged".

The tab is initially loaded as such ...

<li><a href="/im/price_change_log/${item_id}">Price Log</a></li>

In the tab i have some icons that represent next and previous page. On click I want to load the next page or previous page of results in this tab.

How can I go about this? Do I need to change the url of the tab and then force a reload. The url would be...

/im/price_change_log/<item_id>/<page>

The js pager portion looks like ...

function bind_ui(){
        $(".prev_page").click(function(){
            var page = current_page;
            console.log("Previous Page - current_page("+page+")");
        });
        $(".next_page").click(function(){
            var page = current_page;
            console.log("Next Page - current_page("+page+")");
        });
    };

So i guess my question is how do load the tab with the new url?

I have a tab layout on one of my sites that shows a log of items. The items are "paged".

The tab is initially loaded as such ...

<li><a href="/im/price_change_log/${item_id}">Price Log</a></li>

In the tab i have some icons that represent next and previous page. On click I want to load the next page or previous page of results in this tab.

How can I go about this? Do I need to change the url of the tab and then force a reload. The url would be...

/im/price_change_log/<item_id>/<page>

The js pager portion looks like ...

function bind_ui(){
        $(".prev_page").click(function(){
            var page = current_page;
            console.log("Previous Page - current_page("+page+")");
        });
        $(".next_page").click(function(){
            var page = current_page;
            console.log("Next Page - current_page("+page+")");
        });
    };

So i guess my question is how do load the tab with the new url?

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

2 Answers 2

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

function bind_ui(){
    $(".prev_page").click(function(){
        var $tabs = $('#tabs').tabs();
        var selected = $tabs.tabs('option', 'active'); 
        if(selected != 0){
            $($tabs.data('uiTabs').tabs[selected - 1]).find('.ui-tabs-anchor').attr('href', newUrl);
            $tabs.tabs('active', selected - 1 );
            $tabs.tabs("load", selected - 1);
        }
    });
    $(".next_page").click(function(){
        var $tabs = $('#tabs').tabs();
        var selected = $tabs.tabs('option', 'active'); 
        if(selected < $tabs.data('uiTabs').tabs.length){
            $($tabs.data('uiTabs').tabs[selected + 1]).find('.ui-tabs-anchor').attr('href', newUrl);
            $tabs.tabs('active', selected + 1 );
            $tabs.tabs("load", selected + 1);
        }
    });
};

-EDIT 2-

If you use Jquery 1.9, please see Zahid Riaz's answer

reloading tab (#tabs is the tab container):

function reloadCurrentTab(){
   var $tabs = $('#tabs').tabs();
   var selected = $tabs.tabs('option', 'selected'); 
   $("#tabs").tabs('load',selected);
}

changing tab:

$tabs.tabs('select',[INDEX OF THE TAB] );

obtains actual tab index:

$tabs.tabs('option', 'selected'); // => 0

with your code.... it will be something like this:

function bind_ui(){
    $(".prev_page").click(function(){
        var $tabs = $('#tabs').tabs();
        var selected = $tabs.tabs('option', 'selected'); 
        if(selected != 0){
            $tabs.tabs("url" , selected-1, newUrl )
            $tabs.tabs('select',selected - 1 );
        }
    });
    $(".next_page").click(function(){
        var $tabs = $('#tabs').tabs();
        var selected = $tabs.tabs('option', 'selected'); 
        if(selected < $('#tabs').length){
            $tabs.tabs("url" , selected+1, newUrl )
            $tabs.tabs('select',selected + 1 );
        }
    });
};

-EDIT-

I have found this code example in the jquery-ui homepage. You can put something like this:

$("#tabs").tabs("url" , indexOfTheTab , newUrl );

... to change the URL to load.