jQuery Conferma finestra di dialogo in ASP.NET Pulsante OnClientClick

Question

Ho un TemplateField in un GridView in un UpdatePanel con un pulsante denominato btnDelete. Piuttosto che lo standard OnClientClick="return confirm('Are you sure?')" mi piacerebbe usare jQuery Dialog.

Finora, sono in grado di impostare jQuery utilizzando btnDelete.Attributes["onclick"] e impostando il codice della finestra di dialogo jQuery nel code-behind. Tuttavia, invia nuovamente al server in tutti i casi prima che abbia la possibilità di fare clic su "Conferma" o "Annulla".

Ecco il codice HTML che produce:

<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"> 

Che cosa sto facendo di sbagliato che sta causando questa funzione non bloccare fino a quando fa clic sul pulsante?

Al contrario, la conferma di serie funziona bene:

<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"> 

Grazie, Mark

UPDATE:

In definitiva, ho dovuto usare UseSubmitBehavior = "false" per ottenere il name = "" attributo per il rendering. Quindi ho dovuto ignorare OnClientClick, impostando il valore su "return;" quindi il default __doPostBack() non viene eseguito. Poi sono stato in grado di cablare un .Live() clicca gestore, che invoca la __doPostBack() su Conferma:

$('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

Controllare la risposta selezionata per questa domanda per un esempio: How to implement "confirmation" dialog in Jquery UI dialog?

Un paio di note:

Non inserire la funzionalità onclick in un attributo onclick. Uno dei grandi vantaggi di jQuery è che ti permette di fare Javascript non intrusivo. Invece, fare qualcosa di simile:

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

Inoltre, assicurarsi che il vostro dialogo viene creata un'istanza di fuori l'evento click, in modo che venga inizializzato prima dell'evento primo clic succede. Quindi, qualcosa del genere sarebbe il tuo risultato:

$(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'); 
    }); 
}); 

Questo dovrebbe fare il trucco per voi.

Answer 2

$(document).ready(function() { 

     $('#btnCancel').click(function (e) { 
      e.preventDefault(); 

      $("<div><span><b>Are you sure you want to cancel this order?</b></span></div>").dialog({ 
       modal: true, 
       draggable: false, 
       resizable: false, 
       width: 430, 
       height: 150, 
       buttons: { 
        "No": function() { 
         $(this).dialog("destroy"); 

        }, 
        "Yes": function() { 
         $("#btnCancel").unbind(); 
         $(this).dialog("destroy"); 
         document.getElementById('<%= btnCancel.ClientID %>').click(); 

        } 
       } 
      }); 
     }); 

    }); 

Poi nel Page Body

<asp:button id="btnCancel" runat="server" cssclass="button_major" text="Cancel" style="float: right" 
        onclick="btnCancel_ClickEvent" clientidmode="Static" />