Order the loading of divs (Partial views) with Ajax - 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)
})
}