Jquery Tab control - reloading all tabs that have been clicked

Folks,

I'm using Jquery UI - Tab.

I've an edit screen where the main form and tabs have been shown below. Now when I navigate from one record to another the Ajax call goes to the server to fetch new main record.

Now I want to refresh the tab below, with new record id, as well so what I've done is the following:

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

`

Now the problem is this:

When I navigate, the value changes in the URL, but the tab click request is opening into the new screen.

I.e. It is not working as Ajax call.

The Main screen goes and the URL open as a new URL in the browser address bar.

If I'm following this correctly, you want to change the URL of a tab's content when recordId is changed, and reload that tab without reloading the entire page.

This is possible using two methods of your tabs object:

To change the url, use the .tabs("url", index, url) where:

• index = the index of the tab you are updating
• url = the string of the new URL

To reload the tab's content at any time use .tabs("load", index)

• index = the index of the tab you are updating.

Using these together should do what you want. I.e. when you have a new recordId do:

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

The documentation is here, under the 'methods' tab: jqueryui docs

This is what I've done now:

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

This function will then be called by when the main record has been downloaded at client side - JSON/ AJAX based.