Using JQuery Alert on ASP.Net Runat="server" button

Question

I found a JQuery Alert plugin here, http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/ So I made a sample page to test it out but it does not seem to work on Runat="server" button. The second button is just something I tried to stop the button from posting back and it seems to do that but after confirming, it won't go anywhere.

I would appreciate any help on this.

<script src="js/jquery.alerts.js" type="text/javascript"></script>
<link href="css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
    function confirmThis() {
        jConfirm('Can you confirm this?', 'Confirmation Dialog', function (r) {
            jAlert('Confirmed: ' + r, 'Confirmation Results');
            return r;
        });

        return false;
    }
    $(document).ready(function () {
        $("#btnNext").click(function () {
            jConfirm('Can you confirm this?', 'Confirmation Dialog', function (r) {
                jAlert('Confirmed: ' + r, 'Confirmation Results');
                return r;
            });
        });
    });

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
     <asp:Button ID="btnNext" runat="server" Text="Confirm 1"/>
     <asp:Button ID="Button1" runat="server" Text="Confirm 2" OnClientClick="return    confirmThis();"/>
</div>
</form>
</body>
</html>

score 2 · Accepted Answer · edited May 23 '17 at 11:55

While you should use btnNext.ClientID, that's not the cause of your problem here. The problem is that the library you are using makes use of callbacks to implement the confirm popup, which means that the function you are attaching to the click event does not wait for the confirm dialog to be clicked before exiting. Since false is not returned from that function, the button click is not cancelled and a postback occurs.

See the accepted answer here for more information: Can you wait for javascript callback?

One way around this problem is to always return false, and then in the callback from the confirm click the button. Keep in mind you'll have to unbind the event handler before calling click manually. The following code worked for me:

$(document).ready(function () {
    $("#<%= btnNext.ClientID %>").bind('click', function () {
        jConfirm('Can you confirm this?', 'Confirmation Dialog', function (r) {
            if (r == true) {

                //Unbind client side click event and submit btnNext
                $("#<%= btnNext.ClientID %>").unbind('click');
                $("#<%= btnNext.ClientID %>").click();
            }
        });

        //Always prevent a postback by returning false
        return false;
    });
});

@LacHo Cool, glad I could help! Since it seems this answer has properly addressed your question, you can accept it by clicking the checkmark near the score. Thanks! — rsbarro, Mar 02 '12 at 02:38

score 1 · Answer 2 · answered Mar 02 '12 at 01:59

Use the button's clientID. like so:

 $(document).ready(function () {
    $("#<%=btnNext.ClientID%>").click(function (e) {
        e.preventDefault(); // Stops the postback
        jConfirm('Can you confirm this?', 'Confirmation Dialog', function (r) {
            jAlert('Confirmed: ' + r, 'Confirmation Results');
            return r;
        });
    });
});

score 1 · Answer 3 · answered Mar 02 '12 at 14:43

You can also give the button a css class like

<asp:Button ID="btnNext" class="showConfirm" runat="server" Text="Confirm 1"/>

& then reference it in your javascript like

     $(document).ready(function () {
    $('.showConfirm').click(function(){
     // Your code goes here
});
});

This way you can also move your script to an external file & don't have to embed it on your page.

Using JQuery Alert on ASP.Net Runat="server" button

3 Answers3