Execute multiple jQuery AJAX call one after the end of other in ASP.Net using C# and VB.Net

Last Reply 3 months ago By dharmendr

Posted 3 months ago

when i added multiple ajax function is not working.

what is the reason? how to solve this? .

here i want to load function1() data first, followed by function2() data in the webpage..reply plzz.

 $(document).ready(function () {
    function1(),
    function2()
 });
        function function1() {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebService.asmx/f1",
                data: {},
                dataType: "json",
                success: function (data) {
                    
                },
                error: function () {
                    alert("Error while Showing update data");
                }
            });
        }
function function2() {
    $.ajax({
        type: "POST",
        url: "WebService.asmx/f2",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        //success: OnSuccess,
        success: function (data) {
            
        },
        
        error: function (response) {
            alert("Error");
        }
    });
 }        

 

You are viewing reply posted by: dharmendr 3 months ago.
Posted 3 months ago Modified on 3 months ago

Hi jovceka,

Yes. You can set async:false in the ajax call.

So that other code will wait for the statement you are calling to finish.

Then you can call the function on after another instead of calling the 2nd function inside success function of 1st.

But one issue is if you got error on 1st function your 2nd function still executed.

Example:

<script type="text/javascript">
    $(document).ready(function () {
        function1();
        function2();
    });
    function function1() {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/f1",
            data: {},
            dataType: "json",
            async: false,
            success: function (data) {
                $('#lblName').html(data.d);
                //function2();
            },
            error: function () {
                alert("Error while Showing update data");
            }
        });
    }
    function function2() {
        $.ajax({
            type: "POST",
            url: "WebService.asmx/f2",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                $('#lblCountry').html(data.d);
            },
            error: function (response) {
                alert("Error");
            }
        });
    }
</script>