jQuery Confirm Dialogfeld in ASP.NET Button OnClientClick

Question

Ich habe ein TemplateField in einem GridView in einem UpdatePanel mit einer Schaltfläche namens btnDelete. Anstatt den Standard OnClientClick="return confirm('Are you sure?')" möchte ich jQuery Dialog verwenden.

Bis jetzt kann ich die jQuery mit btnDelete.Attributes["onclick"] setzen und den jQuery Dialog Code im Code-Behind setzen. Es wird jedoch in jedem Fall zurück an den Server gesendet, bevor ich die Möglichkeit habe, auf "Bestätigen" oder "Abbrechen" zu klicken. Hier

ist die HTML es produziert:

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

Was mache ich falsch, dass die Ursache dieser Funktion nicht zu blockieren, bis entweder Schaltfläche geklickt wird?

umgekehrt die Standard bestätigen funktioniert gut:

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

Danke, Mark

UPDATE:

Letztlich hatte ich UseSubmitBehavior = "false" zu verwenden, die bekommen name = "" Attribut zum Rendern. Dann musste ich OnClientClick überschreiben und den Wert auf "return" setzen. also wird der Standard __doPostBack() nicht ausgeführt. Dann konnte ich einen .live() klicken Handler verkabeln, die die __doPostBack() auf Bestätigen ruft:

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

Überprüfen Sie die gewählte Antwort auf diese Frage für ein Beispiel: How to implement "confirmation" dialog in Jquery UI dialog?

Ein paar Hinweise:

Stellen Sie Ihre onclick-Funktionalität nicht in ein onclick-Attribut. Einer der großen Vorteile von jQuery ist, dass Sie damit unaufdringliches JavaScript ausführen können. Stattdessen tun Sie etwas wie folgt aus:

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

Stellen Sie außerdem sicher, dass Ihr Dialog außerhalb des Klickereignis instanziiert wird, so dass es initialisiert wird, bevor der erste Klick-Ereignis passiert. Also, so etwas wie dies wäre Ihr Ergebnis:

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

, die den Trick für Sie tun sollten.

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(); 

        } 
       } 
      }); 
     }); 

    }); 

Dann in der Page Body

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