Order the loading of divs (Partial views) with Ajax

Question

I have a page (main view) that contains several partial views. I am loading these partial views to the specific divs using ajax.

My problem is that I want to load these divs in order : the first div, then the second... But what I am getting is that the page loads fine but the order of partial views appearance is not right. Is there a way to force the order of loading the partial views ?

Answer 1

Since you are loading them via ajax, you need the loading of the second div to be a callback of the ajax that loads the first div, and the loading of the third div to be a callback of the ajax that loads the second div. Something like this:

$(document).ready(function() {
    $.ajax({
        url : '/Controller/Div1Action', // first div url
        type: 'GET',
        success: LoadSecondDiv
    });
});

function LoadSecondDiv() {
    $.ajax({
        url : '/Controller/Div2Action', // second div url
        type: 'GET',
        success: LoadThirdDiv
    });
}

function LoadThirdDiv() {
    $.ajax({
        url : '/Controller/Div3Action', // third div url
        type: 'GET'
    });
}

You'll probably want to choose better names for the functions based on what the divs are.

Update based on comment: You'll want to call the function rather than just put down the function name if you're wrapping it in an anonymous function:

$.ajax({
    url: '/LoadingPartials/LoadContact',
    contentType: 'application/html; charset=utf-8',
    type: 'GET',
    dataType: 'html'
}).success(function (result) {
    $("#AjaxContactGrid").html(result);
    LoadInsurance(); // Don't forget the parentheses here
});

function LoadInsurance() {
    $.ajax({
        url: '/LoadingPartials/LoadInsurance',
        contentType: 'application/html; charset=utf-8',
        type: 'GET',
        dataType: 'html' }).success(function (result) {
            $("#AjaxLIGrid").html(result);
            // Call function to load 3rd div here (make sure to include the parentheses to actually call it)
    })
}