C# asp.net Confirm Not working in Ajax Call

Question

Apologies beforehand, this is my first time coding using javascript. All of this I have written based off of other questions I found on here.

I have a call to a webmethod that checks whether a page is dirty and returns a boolean:

<script type="text/javascript">
    function OnConfirm() {
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: "UserManagement.aspx/IsDirty",
            dataType: "json",
            data: '{}',
            success: function OnDirtySuccess(result) {
                if (result.d.toString() == "true") {
                    return confirm("You have unsaved changes, select OK to discard these changes without saving.");
                }
                else {
                    return false;
                }

                return true;
            },
            failure: function (response) {
                return true;
            }

        });
    }
</script>

I have a button that calls the script:

<asp:Button ID="btnAddNewUser" CausesValidation="false" runat="server" Text="Add New User" OnClick="btnAddNewUser_Click" OnClientClick="return OnConfirm();" Width="140px" />

The method call is working correctly, I only see the confirm dialog when the current user has been modified. My issue is when I click 'cancel' the event for btnAddNewUser_Click is still firing.

A different approach based on another question posted here, that did not work for me:

<script type="text/javascript">
    function OnConfirm() {
        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: "UserManagement.aspx/IsDirty",
            dataType: "json",
            data: '{}',
            success: function OnDirtySuccess(result) {
                if (result.d.toString() == "true") {
                    if (!confirm("You have unsaved changes, select OK to discard these changes without saving."))
                        return false;
                    //return confirm("You have unsaved changes, select OK to discard these changes without saving.");
                }
                else {
                    return false;
                }

                return true;
            },
            failure: function (response) {
                return true;
            }

        });
    }
</script>  
<asp:Button ID="btnAddNewUser" CausesValidation="false" runat="server" Text="Add New User" OnClick="btnAddNewUser_Click" OnClientClick="if (! OnConfirm()) return false;" Width="140px" />

Here, I modified the OnClientClick to if (! OnConfirm()) return false; and I tried using both versions of the confirm code inside OnConfirm(). However, when the confirm dialog pops up and I hit cancel, the OnClick event still fires.

I've tried changing the OnClientClick function to (just to simplify the code and test):

<script type="text/javascript">
    function OnConfirm() {
        return confirm('Test ok/cancel?');
    }
</script>

and the Ok/Cancel of the confirmation dialog is working properly.

What am I missing with my OnConfirm function?

First of all, you can not return from `asynchronous` functions.. — Rayon, Apr 12 '16 at 06:01
Rayon, so my logic is flawed? Am I able to assign the result of the confirm dialog to a variable and use that in OnClientClick? — h.andrew.vo, Apr 12 '16 at 06:11
You should have a `callback` function in the `success` handler. As you are doing it using `ajax`, submitting a form is out of scope right ? — Rayon, Apr 12 '16 at 06:15
Rayon, thanks to your initial comment I found that http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call?rq=1 was the answer to my question. Turns out I didn't understand how the ajax call was really working. Thanks for helping me get some clarification :) — h.andrew.vo, Apr 12 '16 at 06:34
It might be useful if you answer your own question and mark it as answered. — Guy Lowe, Apr 12 '16 at 13:07

score 0 · Answer 1 · edited May 23 '17 at 12:15

Check this link .It has exactly the same answer of your question

click me

Update for you.

Use POST to pass the data

 <asp:Button ID="btnAddNewUser" ClientIDMode="Static" CausesValidation="false" runat="server" Text="Add New User"  Width="140px" />

and

<script type="text/javascript">
    $(function() {

        $('#btnAddNewUser').click(function(e) {
            e.preventDefault();
            //Make your ajax call
            var params = {};
            params.parameter = "passing string data";
            $.ajax({
                type: "POST",
                url: "YourPageName.aspx/MyFunction1",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(params),
                success: function(res) {
                    alert(res.d);
                },
                error: function(res) {
                }
            });
        });
    });
</script>

and YourPageName.aspx.cs file

        [WebMethod]
        public static string MyFunction1(string parameter)
        {

            return parameter;
        }

C# asp.net Confirm Not working in Ajax Call

1 Answers1