jQuery Conferma Dialogo in Button ASP.NET OnClientClick
Domanda
Ho un TemplateField in un GridView in un UpdatePanel con un pulsante chiamato btnDelete
. Piuttosto che il OnClientClick="return confirm('Are you sure?')"
livello mi piacerebbe usare jQuery dialogo.
Finora, sono in grado di impostare il jQuery utilizzando btnDelete.Attributes["onclick"]
e l'impostazione del codice jQuery dialogo nel code-behind. Tuttavia, il postback al server in tutti i casi, prima di avere la possibilità di cliccare su "Conferma" o "Cancel".
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 causa questa funzione non blocco fino a quando viene cliccato il 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("Unexpected Error:\n\n" + 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 = "" l'attributo per il rendering. Poi ho dovuto ignorare l'OnClientClick, impostando il valore di "ritornare"; in modo che il __doPostBack di default () non viene eseguito. Poi sono stato in grado di cablare un gestore .Live click (), 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');
});
Soluzione
Controlla la risposta selezionata per questa domanda per un esempio: Come implementare dialogo "conferma" nella finestra di jQuery UI?
Un paio di note:
Non mettere le funzionalità onclick in un attributo onclick. Uno dei grandi vantaggi di jQuery è che ti permette di fare JavaScript discreto. 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 dialogo viene creata un'istanza di fuori l'evento click, in modo che venga inizializzato prima che il primo evento click accade. Quindi, qualcosa di simile a questo sarebbe il 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.
Altri suggerimenti
$(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 corpo della pagina
<asp:button id="btnCancel" runat="server" cssclass="button_major" text="Cancel" style="float: right"
onclick="btnCancel_ClickEvent" clientidmode="Static" />