title: jQuery Confirm Dialog in ASP.NET Button OnClientClick
body: <p>I have a TemplateField in a GridView in an UpdatePanel with a button called <code>btnDelete</code>. Rather than the standard <code>OnClientClick="return confirm('Are you sure?')"</code> I'd like to use jQuery Dialog.</p>
  
  <p>So far, I'm able to set the jQuery using <code>btnDelete.Attributes["onclick"]</code> 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". </p>
  
  <p>Here is the HTML it produces:</p>
  
  <pre><code>&lt;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"&gt;
  </code></pre>
  
  <p>What am I doing wrong that is causing this function not to block until either button is clicked?</p>
  
  <p>Conversely, the standard confirm works just fine:</p>
  
  <pre><code>&lt;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(&amp;quot;Unexpected Error:\n\n&amp;quot; + e1.toString());return false;};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete"&gt;
  </code></pre>
  
  <p>Thanks,
  Mark</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>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:</p>
  
  <pre><code>$('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');
        });
  </code></pre>