raising a confirm dialog via jQuery on asp:LinkButton click event

Question

Consider an ASP.NET webforms app where the requirement is to raise a confirm dialog when an asp:LinkButton is clicked. The results of the confirm dialog should allow or block the postback for the linkButton_click method.

The plugin/library currently being used is the jquery.alerts.js (found on ABeautifulSite ).

<script src="http://labs.abeautifulsite.net/projects/js/jquery/alerts/demo/jquery.js"
    type="text/javascript"></script>
<script src="http://labs.abeautifulsite.net/projects/js/jquery/alerts/demo/jquery.ui.draggable.js"
    type="text/javascript"></script>
<!-- Core files -->
<script src="http://labs.abeautifulsite.net/projects/js/jquery/alerts/demo/jquery.alerts.js"
    type="text/javascript"></script>
<link href="http://labs.abeautifulsite.net/projects/js/jquery/alerts/demo/jquery.alerts.css"
    rel="stylesheet" type="text/css"   />

     <asp:LinkButton runat="server" ID="lnkDisable" 
Text="Disable This Emp" onclick="lnkDisable_Click" />

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

        $("#ctl00_mainContent_lnkDisable").click(function() {
            jConfirm('Please confirm this emp should be disabled?', 
                     'Confirm Disable', 
                     function(r) {
                                jAlert('Confirmed: ' + r, 'Results');
                });
            }); 
        });         
</script>

The message box fires properly!

Problem The problem is that it shows for about 2 seconds, and then the page is posted-back before the user can make a selection on the popup. I've set a breakpoint on that event handler, and indeed the page is posted back.

Question How can I have the post-back delayed while the user makes up their mind and clicks on the OK or Cancel button on the popup?

Any suggestions on another plugin are welcome!

Answer 1

I think you'll want:

return jConfirm('Please confirm this emp should be disabled?', 

(Note addition of 'return' statement).

But I'm not 100% certain how the 'jConfirm' function works.

-- Edit

It's possible (probable, in fact) that that dialog isn't modal. See if you can figure out how to make it so (or more likely someone will reply).

With a typical JavaScript confirm though you can do ...

return confirm("Are you sure?");

But I'm assuming you want the pretty one :)

-- Edit

Given it can't be made modal, perhaps something like:

    var confirmed = false;
    $("#ctl00_mainContent_lnkDisable").click(function() {
        if( confirmed ){ return true; }

        jConfirm('Please confirm this emp should be disabled?', 
                 'Confirm Disable', 
                 function(r) {
                            jAlert('Confirmed: ' + r, 'Results');
                            confirmed = true;
                            #("ctl00_mainContent_lnkDisable").click();
                            confirmed = false;
            });
        });

        return false;
    });

Untested, and fairly silly (I'm not sure if calling .click() will fire the event again, hence the boolean), but it should work.

Answer 2

I did following and it's works:

            var confirmed = false;
            $(".removeItemLink").click(function() {
                if (confirmed) { return true; }

                var clickedObj = $(this);
                jConfirm('Are you sure you want to remove this item?',
                 'Confirm Removal',
                 function(r) {
                     if (r) {
                         confirmed = true;
                         clickedObj.click();
                         confirmed = false;
                     }
                 });

                return confirmed;
            });

@Silky - thanks.

Answer 3

You could have a hidden button that you "click" using jquery. Maybe something like this?

$(".removeItemLink").click(function() {
  var clickedObj = $(this);
  jConfirm('Are you sure you want to remove this item?',
    'Confirm Removal',
    function(r) {
      if (r) {
       clickedObj.parent().find(".hidden-button-with-event").click();
      }
  });
});

Answer 4

Check this question:

Using jquery-ui dialog as a confirm dialog with an ASP:LinkButton (how to invoke the postbck)

He is using jQuery standard dialogs, but I'm pretty sure this should be applicable here as well.