locked
ASP button does not fire event after return true from JS function RRS feed

  • Question

  • User-1305530094 posted
    function AuthUsr() {
    (function ($) {
        var obj = {};
        obj.Usrname = $.trim($("#username").val());
        obj.Pw = $.trim($("#password").val());
        $.ajax({
            type: "POST",
            url: "../../SessionService.asmx/AuthUsrEntry",
            data: JSON.stringify(obj),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var serresp = r.d
                return run(serresp)
    
            }
        });
    })(jQuery);}
    
    function run(e) {
    if (e == false) {
        alert(e)
    
        MsgNotify('Error', '', 'Invalid Password!', '', '')
        return false;
    }
    else {
        //$('#login').submit();
        return true;
        __doPostBack('#cmdlogin', '')
    
    };};
    
     <asp:Button ID="cmdlogin" runat="server" Text="Sign in" OnClick="cmdlogin_Click"CssClass=" pushed button btn-blue" ClientIDMode="Static" OnClientClick="return AuthUsr();" Style="display: block; margin-right: auto; margin-left: auto"UseSubmitBehavior="False" />

    I m posting my code and HTML build for the button, I tried postback, submit and other functions,, none worked. I m running the my elements in update panel

    I know my problem is in returning and employing the boolean val from AJAX call

    Please help

    Tuesday, March 7, 2017 7:26 AM

Answers

  • User-1509636757 posted

    I tried your code but that did not work on my end too. I am not quite sure, what could be the issue. However, one thing I noticed that your Ajax call needs to be async: false, otherwise button click will be executed right after user has clicked and it will not wait for ajax call result. Here is a sample code on similar scenario that is working on my end, you may do required modification based on your coding scenario:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            function AuthUsr() {
                var retResult = false;
                var obj = {};
                obj.Usrname = $.trim($("#username").val());
                obj.Pw = $.trim($("#password").val());
                $.ajax({
                    type: "POST",
                    url: "WebForm54.aspx/AuthUsrEntry",
                    data: JSON.stringify(obj),
                    async: false,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        debugger;
                        var serresp = r.d
                        if (serresp == false) {
                            alert(serresp);
                            //MsgNotify('Error', '', 'Invalid Password!', '', '')
                            retResult = false;
                        }
                        else
                            retResult = true;
                    },
                    error: function (data) {
                        retResult = false;
                    }
                });
                return retResult;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:TextBox
                    runat="server"
                    ID="username"
                    ClientIDMode="Static" />
    
                <asp:TextBox
                    runat="server"
                    ID="password"
                    ClientIDMode="Static" />
    
                <asp:Button
                    ID="cmdlogin"
                    runat="server"
                    Text="Sign in"
                    OnClick="cmdlogin_Click"
                    CssClass=" pushed button btn-blue"
                    ClientIDMode="Static"
                    OnClientClick="return AuthUsr();"
                    Style="display: block; margin-right: auto; margin-left: auto" />
            </div>
        </form>
    </body>
    </html>
            [WebMethod]
            public static bool AuthUsrEntry(string Usrname, string Pw)
            {
                //-- i am just passing true here to check if click event executes or not
                return true;
            }
    
            protected void cmdlogin_Click(object sender, EventArgs e)
            {
                //-- button click event
            }

    hope that helps./.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 7, 2017 7:54 AM
  • User-271186128 posted

    Hi Embryologist,

    As KaushaL said, you could set the Ajax async to false. Besides, I think you could also try to add a hidden button in your page.

    Then use js code to click it when the WebMethod return true.

    For example:

    <script type="text/javascript">
            function AuthUsr() {
                var retResult = false;
                var obj = {};
                obj.Usrname = $.trim($("#username").val());
                obj.Pw = $.trim($("#password").val());
                $.ajax({
                    type: "POST",
                    url: "WebService1.asmx/AuthUsrEntry",
                    data: JSON.stringify(obj),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        var serresp = r.d
                        if (serresp == false) {
                            alert(serresp);
                            retResult = false;
                        }
                        else {
                            retResult = true;
                            $("#login2").click();
                        }
                    },
                    error: function (data) {
                        retResult = false;
                    }
                });
                return retResult;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:TextBox runat="server" ID="username" ClientIDMode="Static" />
                <asp:TextBox runat="server" ID="password" ClientIDMode="Static" />
                <asp:Button ID="cmdlogin" runat="server" Text="Sign in" CssClass=" pushed button btn-blue" ClientIDMode="Static"
                    OnClientClick="return AuthUsr();" Style="display: block; margin-right: auto; margin-left: auto" />
               <asp:Button ID="login2" OnClick="cmdlogin_Click" style="display: none;"  runat="server"/>
            </div>
        </form>
    </body>

    Best regards,
    Dillion

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 8, 2017 9:09 AM

All replies

  • User527778624 posted

    Hi,

    __doPostBack('#cmdlogin', '')

    I think, in the above code, # is not required.

    check this site: http://stackoverflow.com/questions/3591634/how-to-use-dopostback

    Tuesday, March 7, 2017 7:31 AM
  • User-1305530094 posted

    Thanks for the prompt reply

    I did both

    did not work

    Tuesday, March 7, 2017 7:34 AM
  • User-1509636757 posted

    I tried your code but that did not work on my end too. I am not quite sure, what could be the issue. However, one thing I noticed that your Ajax call needs to be async: false, otherwise button click will be executed right after user has clicked and it will not wait for ajax call result. Here is a sample code on similar scenario that is working on my end, you may do required modification based on your coding scenario:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.12.4.min.js"></script>
        <script type="text/javascript">
            function AuthUsr() {
                var retResult = false;
                var obj = {};
                obj.Usrname = $.trim($("#username").val());
                obj.Pw = $.trim($("#password").val());
                $.ajax({
                    type: "POST",
                    url: "WebForm54.aspx/AuthUsrEntry",
                    data: JSON.stringify(obj),
                    async: false,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        debugger;
                        var serresp = r.d
                        if (serresp == false) {
                            alert(serresp);
                            //MsgNotify('Error', '', 'Invalid Password!', '', '')
                            retResult = false;
                        }
                        else
                            retResult = true;
                    },
                    error: function (data) {
                        retResult = false;
                    }
                });
                return retResult;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:TextBox
                    runat="server"
                    ID="username"
                    ClientIDMode="Static" />
    
                <asp:TextBox
                    runat="server"
                    ID="password"
                    ClientIDMode="Static" />
    
                <asp:Button
                    ID="cmdlogin"
                    runat="server"
                    Text="Sign in"
                    OnClick="cmdlogin_Click"
                    CssClass=" pushed button btn-blue"
                    ClientIDMode="Static"
                    OnClientClick="return AuthUsr();"
                    Style="display: block; margin-right: auto; margin-left: auto" />
            </div>
        </form>
    </body>
    </html>
            [WebMethod]
            public static bool AuthUsrEntry(string Usrname, string Pw)
            {
                //-- i am just passing true here to check if click event executes or not
                return true;
            }
    
            protected void cmdlogin_Click(object sender, EventArgs e)
            {
                //-- button click event
            }

    hope that helps./.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 7, 2017 7:54 AM
  • User-1305530094 posted

    Thanks for the elaborative response

    the function returns the boolean value from the web service beautifully but even with true callback the button does not fire

    could it be JSON2 call?

    Tuesday, March 7, 2017 8:03 AM
  • User-1305530094 posted

    r.d returns true but the whole function returns false!

    <asp:Button ID="cmdlogin" runat="server" Text="Sign in"
                                        CssClass=" pushed button btn-blue" ClientIDMode="Static" OnClientClick="return calltest();"
                                        Style="display: block; margin-right: auto; margin-left: auto"/>

    function AuthUsr() {
        var retResult = false;
        var obj = {};
        obj.Usrname = $.trim($("#username").val());
        obj.Pw = $.trim($("#password").val());
    
        $.ajax({
            type: "POST",
            url: "../../SessionService.asmx/AuthUsrEntry",
            data: JSON.stringify(obj),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                //debugger;
                var serresp = r.d
                if (serresp == false) {
                    //MsgNotify('Error', '', 'Invalid Password!', '', '')
                    retResult = false;
                }
                else
                    retResult = true;
            },
            error: function (data) {
                retResult = false;
            }
        });
        return retResult;
    }
    
    function calltest() {
        var r = AuthUsr()
        alert(r)
        if (r == false) {
            return false
        }
        else {
            return true;
            __doPostBack('cmdlogin', '')
        }
    }



    Tuesday, March 7, 2017 8:18 AM
  • User527778624 posted

    Hi,

    the function returns the boolean value from the web service beautifully but even with true callback the button does not fire

    AFAIK, Button doesn't waits for ajax callback return. it gets return immediately.

    You need a logic to work around.

    1. Add a data-* attribute on button to check the ajax call status. (data-status="0")
    2. on user click, function checks for (status==0) then set data-status=1 and call Ajax else returns true;
    3. from ajax success callback, based on your condition invoke click event on button ($("#btn").trigger())
    4. Now step2 calls else part (true).

    Tuesday, March 7, 2017 8:21 AM
  • User-1509636757 posted

    Embryologist

    r.d returns true but the whole function returns false!

    That might be because you did not made async: false for Ajax call. It is really important, otherwise retResult will be returned just as it is (which is actually set to false initially if you see), without taking into considering value being returned from Ajax call. Notice async: false in my earlier post and do that change accordingly. That should resolve the issue.

    Edit: Pasting an informative link: What does "async: false" do in jQuery.ajax()?

    Tuesday, March 7, 2017 8:35 AM
  • User-1305530094 posted

    Do you have an example please

    Tuesday, March 7, 2017 8:25 PM
  • User-1305530094 posted

    you are correct, once i make it sync the value comes back in real time but i want to avoid sync jq, any way around it?

    Tuesday, March 7, 2017 8:27 PM
  • User-1509636757 posted

    I have already posted async: false in an example that I posted in my first post in this thread. However, I did not understand what you mean by "avoid sync jq". can you elaborate?

    Wednesday, March 8, 2017 6:08 AM
  • User-271186128 posted

    Hi Embryologist,

    As KaushaL said, you could set the Ajax async to false. Besides, I think you could also try to add a hidden button in your page.

    Then use js code to click it when the WebMethod return true.

    For example:

    <script type="text/javascript">
            function AuthUsr() {
                var retResult = false;
                var obj = {};
                obj.Usrname = $.trim($("#username").val());
                obj.Pw = $.trim($("#password").val());
                $.ajax({
                    type: "POST",
                    url: "WebService1.asmx/AuthUsrEntry",
                    data: JSON.stringify(obj),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        var serresp = r.d
                        if (serresp == false) {
                            alert(serresp);
                            retResult = false;
                        }
                        else {
                            retResult = true;
                            $("#login2").click();
                        }
                    },
                    error: function (data) {
                        retResult = false;
                    }
                });
                return retResult;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:TextBox runat="server" ID="username" ClientIDMode="Static" />
                <asp:TextBox runat="server" ID="password" ClientIDMode="Static" />
                <asp:Button ID="cmdlogin" runat="server" Text="Sign in" CssClass=" pushed button btn-blue" ClientIDMode="Static"
                    OnClientClick="return AuthUsr();" Style="display: block; margin-right: auto; margin-left: auto" />
               <asp:Button ID="login2" OnClick="cmdlogin_Click" style="display: none;"  runat="server"/>
            </div>
        </form>
    </body>

    Best regards,
    Dillion

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 8, 2017 9:09 AM