JQuery UI AJAX вкладка - перезагрузить вкладку или изменить расположение вкладки? - PullRequest
Новая
       27

JQuery UI AJAX вкладка - перезагрузить вкладку или изменить расположение вкладки?

1 голос
/ 21 марта 2012

У меня есть макет вкладки на одном из моих сайтов, который показывает журнал элементов. Элементы "разбиты на страницы".

Вкладка изначально загружена как таковая ... 

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

Во вкладке у меня есть несколько значков, которые представляют следующую и предыдущую страницу. При нажатии я хочу загрузить следующую или предыдущую страницу результатов в этой вкладке.

Как я могу пойти по этому поводу? Нужно ли изменить URL-адрес вкладки, а затем принудительно перезагрузить. URL будет ... 

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

Часть пейджера js выглядит как ... 

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+")");
        });
    };

Так что я думаю, мой вопрос: как загрузить вкладку с новым URL-адресом?

Ответы [ 2 ]

3 голосов
/ 30 июля 2013

Выше ответ не будет работать в JQuery 1.9+ как дескриптор здесь . Для работы с jquery ui tabs 1.9+ вам нужно сделать что-то вроде этого 

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);
        }
    });
};
2 голосов
/ 21 марта 2012

-EDIT 2-

Если вы используете Jquery 1.9, посмотрите ответ Захида Риаза

перезагрузка вкладки (#tabs - контейнер вкладок): 

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

изменение вкладки: 

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

получает фактический индекс вкладки: 

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

с вашим кодом .... это будет примерно так: 

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-

Я нашел этот пример кода на домашней странице jquery-ui.Вы можете поместить что-то вроде этого: 

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

... чтобы изменить URL для загрузки.

...