CODEWITHSUNDEEP
ajaxjquery-uijquery
Guilherme Longo
Guilherme Longo

Reputation: 2308

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

Upvotes: 0

Views: 110

Answers (1)

Guilherme Longo
Guilherme Longo

Reputation: 2308

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!

Upvotes: 1

Related Questions