jQuery Confirm Dialog in ASP.NET Button OnClientClick

Question

I have a TemplateField in a GridView in an UpdatePanel with a button called btnDelete. Rather than the standard OnClientClick="return confirm('Are you sure?')" I'd like to use jQuery Dialog.

So far, I'm able to set the jQuery using btnDelete.Attributes["onclick"] and setting the jQuery Dialog code in the code-behind. However, it posts back to the server in all cases before I have a chance to click "Confirm" or "Cancel".

Here is the HTML it produces:

<input type="submit" rel="Are you sure?" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="return function() { 
            $('#delete-transfer-confirm').dialog({
              buttons: {
                'Confirm' : function() { $(this).dialog('close'); return true; },
                'Cancel'  : function() { $(this).dialog('close'); return false; }
              }
            });

            $('p.message').text($(this).attr('rel'));
            $('#delete-transfer-confirm').dialog('open');
          };" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">

What am I doing wrong that is causing this function not to block until either button is clicked?

Conversely, the standard confirm works just fine:

<input type="submit" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="try{if (!window.confirm('Are you sure?')){return false;};}catch(e1){alert(&quot;Unexpected Error:\n\n&quot; + e1.toString());return false;};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">

Thanks, Mark

UPDATE:

Ultimately, I had to use UseSubmitBehavior="false" to get the name="" attribute to render. Then I had to override the OnClientClick, setting the value to "return;" so the default __doPostBack() doesn't get executed. Then I was able to wire up a .live() click handler, which invokes the __doPostBack() on Confirm:

$('input.delete').live('click', function(e) {
        var btnDelete = $(this);
        alert($(btnDelete).attr('name'));
        e.preventDefault();


        $('#delete-transfer-confirm').dialog({
          buttons: {
            'Confirm': function() {
              $(this).dialog('close');
              __doPostBack($(btnDelete).attr('name'), '');

              return true;
            },
            'Cancel': function() {
              $(this).dialog('close');
              return false;
            }
          }
        });

        $('p.message').text($(this).attr('rel'));
        $('#delete-transfer-confirm').dialog('open');
      });

Answer 1

Check the selected answer for this question for an example: http://stackoverflow.com/questions/887029/how-to-implement-confirmation-dialog-in-jquery-ui-dialog

A couple of notes:

Don't put your onclick functionality in an onclick attribute. One of the great benefits of jQuery is that it allows you to do Unobtrusive Javascript. Instead, do something like this:

$(function() {
    $('.delete').click(function(e) {
        e.preventDefault() //this will stop the automatic form submission
        //your functionality here
    });
});

Also, make sure that your dialog is instantiated outside the click event, so that it is initialized before the first click event happens. So, something like this would be your result:

$(function() {
     $("#delete-transfer-confirm").dialog({
      autoOpen: false,
      modal: true
    });

    $('.delete').click(function(e) {
        e.preventDefault();
        $('#delete-transfer-confirm').dialog({
            buttons: {
                'Confirm': function() {
                    $(this).dialog('close');
                    return true;
                },
                'Cancel': function() {
                    $(this).dialog('close');
                    return false;
                }
            }
        });

        $('p.message').text($(this).attr('rel'));
        $('#delete-transfer-confirm').dialog('open');
    });
});

That should do the trick for you.