Guilherme Longo Guilherme Longo - 7 months ago 7
Javascript Question

Jquery - How to execute a a function only when ajax request is complete and all content is alread loaded

I have this 2 functions to be execute but I want the second to be executed only when the content of the first request is already loaded in the DOM element..

general function that loads ajax content:

function ajaxDialog(AjaxUrl, type, targedDom, dialogedDom, tabs) {

$.ajax({
url: AjaxUrl,
type: type,
DataType: "html",
success: function (data) {
//puts data inside targedDom Dom elemen
$('#' + targedDom).html(data);
//create tabs
loadDialogSettings(dialogedDom, tabs);
}
});


}

this first function creates a tab sctructure:

ajaxDialog('/Admin/AdminSettingsTabsStructure', 'POST', renewedDom, targetDom, true);


and this one populate with some content tab number 2

loadRolesAndAcessRules('/Admin/AdminRolesAndAccessRules', 'GET', 'tabs-2');


I was thinking in execute the second function on the onComplete callback from the Ajax request but is a little confusing... could I get some help?

Thanks

Answer

Solution:

function ajaxCallReturning(AjaxUrl, type, targetDom, tabIndex) {

$.ajax({
    url: AjaxUrl,
    type: type,
    DataType: "html",
    success: function (data) {
        $('#' + targetDom).html(data);
    },
    complete: function () {
        if (tabIndex == "1") {
            $("#tabs .ui-tabs-active").removeClass("ui-state-active");
            $('#tabs').tabs({ selected: tabIndex })
        } else {                
        }
    }
});

}

As you can see, All the data is loaded into the DOM inside of a success callback and after the loading is complete, the complete callback function is called and display the tab with the data.

Thanks a lot!