MVC Execute Ajax Call In Order

Question

I have a series of Ajax calls to call stored procedures and load my partial views. However, at times I get mixed results because the Ajax calls do not always fire in order. How can I ensure that they always fire as they are ordered in the click event?

    $('#btnSearch').click(function (data) {

        //Renders Plan Info
        var theGroupNumber = $('#GroupNumber').val().substring($('#GroupNumber').val().length - 7).slice(0, 6);
        var theStackCode = $('#StackCode').val();
        var theEffectiveDate = $('#EffectiveDate').val();

        //Clears the div Sections when the search button is clicked
        $('#divPlanInfo').empty();
        $('#divPrimaryStack').empty();
        $('#divGlobalExceptions').empty();
        $('#divPlanExceptions').empty();
        $('#divGroupExceptions').empty();

        // Renders Plan Info
        $.ajax({
            type: "POST",
            url: '@Url.Action("PlanInfoView")', // the method we are calling
            dataType: "HTML",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode, EffectiveDate: theEffectiveDate },
            success: function (data) {
                $('#divPlanInfo').append(data);
            },
            error: function (result) {
                alert('No Results Plan Info Found');
            }
        });

        //Renders the Primary Stack Rule
        $.ajax({
            type: "POST",
            url: '@Url.Action("PrimaryStackRuleView")', // the method we are calling
            dataType: "html",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode, EffectiveDate: theEffectiveDate },
            success: function (data) {
                if (data) {
                    $('#divPrimaryStack').append(data);
                }
            },
            error: function (result) {
                alert('No Primary Stack Rule Found');
            }
        });

        //Renders the Global Exceptions
        $.ajax({
            type: "POST",
            url: '@Url.Action("GlobalExceptionsView")', // the method we are calling
            dataType: "html",
            data: {},
            success: function (data) {
                if (data) {
                    $('#divGlobalExceptions').append(data);
                }
            },
            error: function (result) {
                alert('No Global Exceptions Found');
            }
        });

        //Renders the Stack Code Exceptions
        $.ajax({
            type: "POST",
            url: '@Url.Action("PlanExceptionsView")', // the method we are calling
            dataType: "html",
            data: { StackCode: theStackCode },
            success: function (data) {
                if (data) {
                    $('#divPlanExceptions').append(data);
                }
            },
            error: function (result) {
                alert('No Stack Code Exceptions Found');
            }
        });

        //Renders the Group Number Exceptions
        $.ajax({
            type: "POST",
            url: '@Url.Action("GroupExceptionsView")', // the method we are calling
            dataType: "html",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode },
            success: function (data) {
                if (data) {
                    $('#divGroupExceptions').append(data);
                }
            },
            error: function (result) {
                alert('No Stack Code Exceptions Found');
            }
        });


    });

Specify [`async: false` in each ajax call](http://stackoverflow.com/questions/1478295/what-does-async-false-do-in-jquery-ajax) . It will wait for first ajax to complete then executes next one. — mmushtaq, May 18 '17 at 17:08

score 0 · Accepted Answer · answered May 18 '17 at 16:54

you can create a function for each ajax call and then call one by one :

var PrimaryStackRule = function(){
   $.ajax({
            type: "POST",
            url: '@Url.Action("PrimaryStackRuleView")', // the method we are calling
            dataType: "html",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode, EffectiveDate: theEffectiveDate },
            success: function (data) {
                if (data) {
                    $('#divPrimaryStack').append(data);
                }
            },
            error: function (result) {
                alert('No Primary Stack Rule Found');
            }
        });
}

and call the function where the first call success :

 $.ajax({
            type: "POST",
            url: '@Url.Action("PlanInfoView")', // the method we are calling
            dataType: "HTML",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode, EffectiveDate: theEffectiveDate },
            success: function (data) {
                $('#divPlanInfo').append(data);
                PrimaryStackRule();
            },
            error: function (result) {
                alert('No Results Plan Info Found');
            }
        });

Works like a champ now! Thanks for the assistance. – Jacksobk May 18 '17 at 17:22 — Jacksobk, May 18 '17 at 17:22

score 0 · Answer 2 · answered May 20 '17 at 14:20

You can wrap all your code in $.when and $.then , $.when work good with $.ajax for example see some demo https://api.jquery.com/jquery.when/

I write your code using $.when approach. it's look like this.

$.when(
        $.ajax({
            type: "POST",
            url: '@Url.Action("PlanInfoView")', // the method we are calling
            dataType: "HTML",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode, EffectiveDate: theEffectiveDate },
            success: function (data) {
                $('#divPlanInfo').append(data);
            },
            error: function (result) {
                alert('No Results Plan Info Found');
            }
        })

    ).then(

        $.ajax({
            type: "POST",
            url: '@Url.Action("PrimaryStackRuleView")', // the method we are calling
            dataType: "html",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode, EffectiveDate: theEffectiveDate },
            success: function (data) {
                if (data) {
                    $('#divPrimaryStack').append(data);
                }
            },
            error: function (result) {
                alert('No Primary Stack Rule Found');
            }
        })

        ).then(
        //Renders the Global Exceptions
        $.ajax({
            type: "POST",
            url: '@Url.Action("GlobalExceptionsView")', // the method we are calling
            dataType: "html",
            data: {},
            success: function (data) {
                if (data) {
                    $('#divGlobalExceptions').append(data);
                }
            },
            error: function (result) {
                alert('No Global Exceptions Found');
            }
        })

    ).then(
        //Renders the Stack Code Exceptions
        $.ajax({
            type: "POST",
            url: '@Url.Action("PlanExceptionsView")', // the method we are calling
            dataType: "html",
            data: { StackCode: theStackCode },
            success: function (data) {
                if (data) {
                    $('#divPlanExceptions').append(data);
                }
            },
            error: function (result) {
                alert('No Stack Code Exceptions Found');
            }
        })
        ).then(
        //Renders the Group Number Exceptions
        $.ajax({
            type: "POST",
            url: '@Url.Action("GroupExceptionsView")', // the method we are calling
            dataType: "html",
            data: { GroupNumber: theGroupNumber, StackCode: theStackCode },
            success: function (data) {
                if (data) {
                    $('#divGroupExceptions').append(data);
                }
            },
            error: function (result) {
                alert('No Stack Code Exceptions Found');
            }
        })
        )

MVC Execute Ajax Call In Order

2 Answers2