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

Hi jovceka,

All you need to do is to call the 2nd function on the success of first ajax request.

Check this example. Now please take its reference and correct your code.

HTML

<div>
    Name&nbsp;:&nbsp;<b><asp:Label ID="lblName" runat="server" /></b>
    <br />
    Country&nbsp;:&nbsp;<b><asp:Label ID="lblCountry" runat="server" /></b>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        function1();
    });
    function function1() {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/f1",
            data: {},
            dataType: "json",
            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",
            success: function (data) {
                $('#lblCountry').html(data.d);
            },
            error: function (response) {
                alert("Error");
            }
        });
    }
</script>

Web Service

C#

using System.Web.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    [WebMethod]
    public string f1()
    {
        return "Mudassar Khan";
    }

    [WebMethod]
    public string f2()
    {
        return "India";
    }
}

VB.Net

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Function f1() As String
        Return "Mudassar Khan"
    End Function

    <WebMethod()> _
    Public Function f2() As String
        Return "India"
    End Function

End Class

Output

Name : Mudassar Khan

Country : India

thank you sir for your valuable reply..is there any other method other than this..

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>