Reload Tab content using ajax without loading page on Refresh

Question

Reload Tab instead of Whole Page

 <div class="content"> <div id="tabstrip"> <ul> <li id="tabEdit">@ResourceStrings.Text_ProblemDetails</li> <li id="tabItemsAffected">@ResourceStrings.Text_ItemsAffected</li> <li id="tabAttachments">@ResourceStrings.Text_Attachments</li> @if (ApplicationGlobals.SELECTED_COMPANY_CODE != CompanyCode.MONTREAL) { <li id="tabPlmReferences">@ResourceStrings.Text_PlmReferences</li> } <li id="tabDispositions">@dispositionsText</li> @if (ApplicationGlobals.SELECTED_COMPANY_CODE == CompanyCode.MONTREAL && (ApplicationGlobals.SELECTED_NCRBASE.NcrType != (int)NcrTypeEnum.NCRATTEST)) { <li id="tabReworkDetails">@ResourceStrings.Text_ReworkDetails</li> } <li id="tabLineClosure">@ResourceStrings.Text_Line_Approval</li> <li id="tabTraceability" style="float:right">@ResourceStrings.Text_Traceability</li> </ul> </div> </div> 

Is it Possible to update parts (Like Tabs) of a web page, without reloading the whole page on switching to another Tab

  $.ajax({ url: "NcrLine/Reload", type: "GET", async: false, dataType: "json", success: function () { alert("Hello"); var tab = $('#tabstrip').tabs('getSelected'); tab.panel('refresh'); } }); 

Answer 1

First thing I need to understand is what type of updates are those, if those have simple rendering of code, you can simply bind the HTML code to the tabs handle once you receive the response. This is shown as below -

$.ajax({
    url: "NcrLine/Reload",
    type: "GET",
    async: false,
    dataType: "json",
    success: function () {
        alert("Hello");

        var tab = $('#tabstrip').tabs('getSelected');
        tab.panel('refresh');

        // Add css to the selected tab
        $('#tabstrip[selected=selected]').css('css-property', 'css-value');

        //Render complete new HTML code of updated tabstrip
        $('#tabstrip').html('<Your tabstrip HTML template>');
    }
});

If you have complex HTML rendering, then I would suggest you to create partials by using handlebars.js , that will help you to create reusable partials with dynamic values and that can be bind to your content page.