Chain jQuery AJAX calls: Call one method after completion of first method in jQuery

Avantika

SOLVED CLOSED ACTIVE ANSWERED
User: Avantika
Posted: on Oct 22, 2014 03:54 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 3729

I am using Ajax call where ajax method success is called before completion of first Ajax method.I have to call first Ajax method then its success should be called then second Ajax call sucess should be called and so on.

    function CallAjaxMethod(){            
            $.ajax({
                async: false,
                type: "POST",
                url: "pgName.aspx/fun1",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                   CallAjaxMethod1();
                              
                }, complete: function () {
                },
                failure: function (response) {
                }
            });
        }

        function CallAjaxMethod1(){
            $.ajax({
                async:false,
                type: "POST",
                url: "pgName.aspx/fun2",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    CallAjaxMethod2();
                }, complete: function () {
                },
                failure: function (response) {
                },
                error: function (error) {
                }
            });
        }

Download FREE API for Word, Excel and PDF in ASP.Net

Azim

0 6

Reply
ANSWER
User: Azim
Replied: on Oct 29, 2014 06:31 AM
Report

Please refer this code

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        function CallAjaxMethod() {
            $.ajax({
                async: false,
                type: "POST",
                url: "Default.aspx/GetCurrentTime",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert(response.d);
                    CallAjaxMethod1();
                },
                failure: function (response) {
                }
            });
           
            return false;
        }

        function CallAjaxMethod1() {
            $.ajax({
                async: false,
                type: "POST",
                url: "Default.aspx/GetDate",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert(response.d);
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button Text="Get date and time" OnClientClick="CallAjaxMethod();" runat="server" />
    </div>
    </form>
</body>
</html>

[System.Web.Services.WebMethod]
    public static string GetCurrentTime()
    {
        return "Hello " + Environment.NewLine + "The Current Time is: "
            + DateTime.Now.ToShortTimeString();
    }

    [System.Web.Services.WebMethod]
    public static string GetDate()
    {
        return "Hello " + Environment.NewLine + "Todays date is: "
            + DateTime.Now.ToShortDateString();
    }

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Chain jQuery AJAX calls: Call one method after completion of first method in jQuery

Company

Explore

Follow us

Contact Us