jQuery Confirmer la boîte de dialogue dans le bouton ASP.NET OnClientClick

Question

J'ai un TemplateField dans un GridView dans un UpdatePanel avec un bouton appelé btnDelete. Plutôt que la norme OnClientClick="return confirm('Are you sure?')" je voudrais utiliser jQuery Dialog.

Jusqu'à présent, je suis en mesure de définir le jQuery en utilisant btnDelete.Attributes["onclick"] et en définissant le code jQuery Dialog dans le code-behind. Toutefois, il publie dans tous les cas sur le serveur avant de pouvoir cliquer sur "Confirmer" ou "Annuler".

Voici le code HTML qu'il produit:

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

Qu'est-ce que je fais mal qui cause cette fonction ne pas bloquer jusqu'à ce que le bouton est cliqué?

A l'inverse, la confirmation norme fonctionne très bien:

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

Merci, Mark

MISE À JOUR:

En fin de compte, je devais utiliser UseSubmitBehavior = "false" pour obtenir la name = "" attribut à rendre. Ensuite, j'ai dû redéfinir OnClientClick, en définissant la valeur sur "return"; la valeur par défaut __doPostBack() n'est donc pas exécutée. Ensuite, j'ai pu câbler un .live() cliquez sur gestionnaire, qui invoque la __doPostBack() sur Confirmer:

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

Vérifiez la réponse choisie pour cette question un exemple: How to implement "confirmation" dialog in Jquery UI dialog?

Quelques notes:

Ne mettez pas votre fonctionnalité onclick dans un attribut onclick. L'un des grands avantages de jQuery est qu'il vous permet de faire du Javascript discret. Au lieu de cela, faire quelque chose comme ceci:

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

Aussi, assurez-vous que votre boîte de dialogue est instancié en dehors de l'événement de clic, de sorte qu'il est initialisé avant le premier événement de clic se produit. Donc, quelque chose comme ceci serait votre résultat:

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

Cela devrait faire l'affaire pour vous.

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

        } 
       } 
      }); 
     }); 

    }); 

Puis dans la page corps

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