Элемент управления Jquery Tab - перезагрузка всех вкладок, на которые были нажаты

Question

Народ,

Я использую Jquery UI - Tab.

У меня есть экран редактирования, где основная форма и вкладки показаны ниже.Теперь, когда я перемещаюсь от одной записи к другой, Ajax-вызов отправляется на сервер для получения новой основной записи.

Теперь я хочу обновить вкладку ниже, с новым идентификатором записи, а также с тем, что я сделалвыглядит следующим образом:

var jsonTabMetaData = [{"HtmlName":"Notes","Text":"Notes","Url":"../Notes.rl?moduleName=glbModuleName&moduleRecordID=glbModuleRecordID&sessionID=glbSessionID&company=glbCompanyName","Selected":false,"ModuleName":null,"ModuleRecordID":0},{"HtmlName":"AddressTel","Text":"Address & Telephone","Url":"../PhysicalAddress.rl/QuickAddress?moduleName=glbModuleName&moduleRecordID=glbModuleRecordID&sessionID=glbSessionID&company=glbCompanyName","Selected":false,"ModuleName":null,"ModuleRecordID":0},{"HtmlName":"Sendout","Text":"Send outs","Url":"../Sendouts.rl/List?moduleName=glbModuleName&moduleRecordID=glbModuleRecordID","Selected":false,"ModuleName":null,"ModuleRecordID":0},



function fnReboundTabs() {
    $('#tabs a').each(function (index) {
        var newUrl = jsonTabMetaData[$(this).attr("data-index")].Url;
        newUrl = newUrl.replace("glbModuleRecordID", glbModuleRecordID);
        newUrl = newUrl.replace("glbModuleName", glbModuleName);
        newUrl = newUrl.replace("glbSessionID", glbSessionID);
        newUrl = newUrl.replace("glbCompanyName", glbCompanyName);
        this.href = newUrl;
    });

`

    if (firstTimeReboundTabs) {
        firstTimeReboundTabs = false;
        $("#tabs").tabs({
            select: function (event, ui) {
            },
            cache: true,
            event: '<%= (UI.Web.Helper.SessionMaster.OpenTabOnMouseOver) ? "mouseover": "click" %>',
            async: false,
            ajaxOptions: {
                cache: false,
                success: function () { },
                error: function (xhr, status, index, anchor) {
                    $(anchor.hash).html(
                    "Couldn't load this tab. Should you see this error again, please notify admin.");
                }
            }
        });
    }

`

Теперь проблема заключается в следующем:

Когда я перемещаюсь, значение изменяется вURL, но запрос на щелчок вкладки открывается на новом экране.

Т.е. он не работает как вызов Ajax.

Главный экран открывается, и URL-адрес открывается как новый URL-адрес в адресной строке браузера.

Answer 1

Если я правильно понимаю, вы хотите изменить URL-адрес содержимого вкладки при изменении recordId и перезагрузить эту вкладку, не перезагружая всю страницу.

Это возможно, используя два метода объекта tabs:

Чтобы изменить URL, используйте .tabs ("url", index, url), где:

• index = индекс вкладки, которую вы обновляете
• url = строка нового URL

Чтобы перезагрузить содержимое вкладки в любое время, используйте .tabs ("load", index)

• index = индекс вкладки, которую вы обновляете.

Использование их вместе должно делать то, что вы хотите. То есть когда у вас есть новая запись, сделайте:

mytabs.tabs("url", i, 'mypage?recordId' + newRecordId)
mytabs.tabs("load", i)

Документация находится здесь, на вкладке «методы»: jqueryui docs

Answer 2

Вот что я сделал сейчас:

 function fnReboundTabs() {
    for (var idx = 0; idx < jsonTabMetaData.length; idx++) {

        var newUrl = jsonTabMetaData[idx].Url;
        newUrl = newUrl.replace("glbModuleRecordID", glbModuleRecordID);
        newUrl = newUrl.replace("glbModuleName", glbModuleName);
        newUrl = newUrl.replace("glbSessionID", glbSessionID);
        newUrl = newUrl.replace("glbCompanyName", glbCompanyName);
        $("#tabs").tabs("url", idx, newUrl)
    }

    if (isNaN($('#tabs').tabs().tabs('option', 'selected')))
    { }
    else {
        $("#tabs").tabs("load", $('#tabs').tabs().tabs('option', 'selected'))
    }
}

Эта функция будет вызываться после загрузки основной записи на стороне клиента - на основе JSON / AJAX.