jquery - How can we load multiple partial views on single view between specific time period?

Question

I have multiple partial view on my single view page. Partial views load dynamically. And I want partial views load 1 by 1. Is it possible to do so?

Answer 1

In you View, keep three Divs and assign the Url details in some attribute like below.

Sample HTML

<div id="Div1" attr-Url="@Url.Action("ActionName", "ControllerName", 
                                                    new { area = "Area Name" })">
</div>

<div id="Div2" attr-Url="@Url.Action("ActionName", "ControllerName", 
                                                    new { area = "Area Name" })">
</div>

<div id="Div3" attr-Url="@Url.Action("ActionName", "ControllerName", 
                                                    new { area = "Area Name" })">
</div>

Now, you can use Success CallBack of Load Event.

JQuery

$(document).ready(function () {
    var url = $('Div1').attr('attr-Url');
    $('Div1').load(url, function () {

        //Success callback
        url = $('Div2').attr('attr-Url2');
        $('Div2').load(url, function () {

            //Success callback
            url = $('Div3').attr('attr-Url3');
            $('Div3').load(url, function () {

                //Success callback
            }); 
        });
    });
});

If you notice the above code. Once the first partial view is loaded successfully, Second Partial View starts to load and sequentially third.

Hope this will help you...