jquery - example - ¿Cómo implementar el diálogo de "confirmación" en el diálogo de JQ UI?
jquery popup window (23)
¿Con esto bastará?
$("ul li a").click(function(e) {
e.preventDefault();
$(''#confirmDialog'').show();
var delete_path = $(this).attr(''href'');
$(''#confirmDialog a.ok'').unbind(''click''); // just in case the cancel link
// is not the only way you can
// close your dialog
$(''#confirmDialog a.ok'').click(function(e) {
e.preventDefault();
window.location.href = delete_path;
});
});
$(''#confirmDialog a.cancel'').click(function(e) {
e.preventDefault();
$(''#confirmDialog'').hide();
$(''#confirmDialog a.ok'').unbind(''click'');
});
Intento utilizar el cuadro de diálogo de la interfaz de usuario de JQuery para reemplazar el feo cuadro javascript:alert() . En mi caso, tengo una lista de elementos, y junto a cada uno de ellos, tendría un botón de "eliminar" para cada uno de ellos. la configuración de psuedo html será algo así:
<ul>
<li>ITEM <a href="url/to/remove"> <span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>
<div id="confirmDialog">Are you sure?</div>
En la parte JQ, en el documento listo, primero configuro el div para que sea un cuadro de diálogo modal con el botón necesario, y configuro esas "a" para que se activen antes de la confirmación, como:
$("ul li a").click(function() {
// Show the dialog
return false; // to prevent the browser actually following the links!
}
OK, aquí está el problema. durante el tiempo de inicio, el diálogo no tendrá idea de quién (elemento) lo activará, y también el ítem id (!). ¿Cómo puedo configurar el comportamiento de esos botones de confirmación para que, si el usuario todavía elige SÍ, siga el enlace para eliminarlo?
(A partir del 22/03/2016, la descarga en la página vinculada no funciona. Dejo el enlace aquí en caso de que el desarrollador lo solucione en algún momento, ya que es un pequeño plugin genial. La publicación original es la siguiente. alternativa, y un enlace que realmente funciona: jquery.confirm )
Puede ser demasiado simple para sus necesidades, pero podría probar este complemento jQuery confirm . Es realmente fácil de usar y hace el trabajo en muchos casos.
Bueno, esta es la respuesta a tus preguntas ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Santa Luisa</TITLE>
<style>
body{margin:0;padding:0;background-color:#ffffff;}
a:link {color:black;}
a:visited {color:black;}
a:hover {color:red;}
a:active {color:red;}
</style>
</HEAD>
<body>
<link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css">
<script src="jquery-1.4.4.js"></script>
<script src="external/jquery.bgiframe-2.1.2.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="ui/jquery.ui.position.js"></script>
<script src="ui/jquery.ui.resizable.js"></script>
<script src="ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="demos.css">
<script>
var lastdel;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,modal: true,closeOnEscape: true
});
$(".confirmLink").click(function(e) {
e.preventDefault();
var lastdel = $(this).attr("href");
});
$("#si").click( function() {
$(''#dialog'').dialog(''close'');
window.location.href =lastdel;
});
$("#no").click( function() {
$(''#dialog'').dialog(''close'');
});
});
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var currentimgx;
var cimgoverx=200-6;
var cimgoutx=200;
function overbx(obj){
color=''#FF0000'';
width=''3px'';
obj.style.borderTopWidth = width;
obj.style.borderTopColor =color;
obj.style.borderTopStyle =''solid'';
obj.style.borderLeftWidth = width;
obj.style.borderLeftColor =color;
obj.style.borderLeftStyle =''solid'';
obj.style.borderRightWidth = width;
obj.style.borderRightColor =color;
obj.style.borderRightStyle =''solid'';
obj.style.borderBottomWidth = width;
obj.style.borderBottomColor =color;
obj.style.borderBottomStyle =''solid'';
currentimgx.style.width=cimgoverx+"px";
currentimgx.style.height=cimgoverx+"px";
}
function outbx(obj){
obj.style.borderTopWidth = ''0px'';
obj.style.borderLeftWidth = ''0px'';
obj.style.borderRightWidth = ''0px'';
obj.style.borderBottomWidth = ''0px'';
currentimgx.style.width=cimgoutx+"px";
currentimgx.style.height=cimgoutx+"px";
}
function ifocusx(obj){
color=''#FF0000'';
width=''3px'';
obj.style.borderTopWidth = width;
obj.style.borderTopColor =color;
obj.style.borderTopStyle =''solid'';
obj.style.borderLeftWidth = width;
obj.style.borderLeftColor =color;
obj.style.borderLeftStyle =''solid'';
obj.style.borderRightWidth = width;
obj.style.borderRightColor =color;
obj.style.borderRightStyle =''solid'';
obj.style.borderBottomWidth = width;
obj.style.borderBottomColor =color;
obj.style.borderBottomStyle =''solid'';
}
function iblurx(obj){
color=''#000000'';
width=''3px'';
obj.style.borderTopWidth = width;
obj.style.borderTopColor =color;
obj.style.borderTopStyle =''solid'';
obj.style.borderLeftWidth = width;
obj.style.borderLeftColor =color;
obj.style.borderLeftStyle =''solid'';
obj.style.borderRightWidth = width;
obj.style.borderRightColor =color;
obj.style.borderRightStyle =''solid'';
obj.style.borderBottomWidth = width;
obj.style.borderBottomColor =color;
obj.style.borderBottomStyle =''solid'';
}
function cimgx(obj){
currentimgx=obj;
}
function pause(millis){
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
//-->
</SCRIPT>
<div id="dialog" title="CONFERMA L`AZIONE" style="text-align:center;">
<p><FONT COLOR="#000000" style="font-family:Arial;font-size:22px;font-style:bold;COLOR:red;">CONFERMA L`AZIONE:<BR>POSSO CANCELLARE<BR>QUESTA RIGA ?</FONT></p>
<p><INPUT TYPE="submit" VALUE="SI" NAME="" id="si"> --><INPUT TYPE="submit" VALUE="NO" NAME="" id="no"></p>
</div>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%" height="100%">
<TR valign="top" align="center">
<TD>
<FONT COLOR="red" style="font-family:Arial;font-size:25px;font-style:bold;color:red;">Modifica/Dettagli:<font style="font-family:Arial;font-size:20px;font-style:bold;background-color:yellow;color:red;"> 298 </font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas sadsadas </font> </FONT>
</TD>
</TR>
<tr valign="top">
<td align="center">
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">
<TR align="left">
<TD>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">
<TR align="left">
<TD>
<font style="font-sixe:30px;"><span style="color:red;">1</span></font><br><TABLE class="tabela" CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="800px"><TR style="color:white;background-color:black;"><TD align="center">DATA</TD><TD align="center">CODICE</TD><TD align="center">NOME/NOMI</TD><TD align="center">TESTO</TD><td> </td><td> </td></TR><TR align="center"><TD>12/22/2010 </TD><TD>298 </TD><TD>daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD><TD><A HREF="modificarigadiario.php?codice=298" style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);" style="font-weight:bold;color:red;font-size:30px;" onclick="$(''#dialog'').dialog(''open'');$(''#dialog'').animate({ backgroundColor: ''#aa0000'', color: ''#fff'', width: 250 }, 2000);lastdel=''cancellarighe.php?codice=298&id=1'';alert(lastdel);" class="confirmLink">Cancella</A></TD><TR align="center"><TD>22/10/2010 </TD><TD>298 </TD><TD>dfdsfsdfsf</TD><TD><A HREF="modificarigadiario.php?codice=298" style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);" style="font-weight:bold;color:red;font-size:30px;" onclick="$(''#dialog'').dialog(''open'');$(''#dialog'').animate({ backgroundColor: ''#aa0000'', color: ''#fff'', width: 250 }, 2000);lastdel=''cancellarighe.php?codice=298&id=2'';alert(lastdel);" class="confirmLink">Cancella</A></TD></TABLE><font style="font-sixe:30px;"><span style="color:red;">1</span></font><br>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</td>
</tr>
</tbody></table>
</body>
</html>
asegúrese de tener jquery 1.4.4 y jquery.ui
Como anteriormente. Las publicaciones anteriores me pusieron en el camino correcto. Así es como lo hice. La idea es tener una imagen al lado de cada fila en la tabla (generada por script PHP desde la base de datos). Cuando se hace clic en una imagen, se redirige al usuario a la URL, y como resultado, el registro apropiado se eliminará de la base de datos mientras se muestran algunos datos relacionados con el registro clicado en el diálogo de la interfaz de usuario de jQuery.
El código de JavaScript:
$(document).ready(function () {
$("#confirmDelete").dialog({
modal: true,
bgiframe: true,
autoOpen: false
});
});
function confirmDelete(username, id) {
var delUrl = "/users/delete/" + id;
$(''#confirmDelete'').html("Are you sure you want to delete user: ''" + username + "''");
$(''#confirmDelete'').dialog(''option'', ''buttons'', {
"No": function () {
$(this).dialog("close");
},
"Yes": function () {
window.location.href = delUrl;
}
});
$(''#confirmDelete'').dialog(''open'');
}
Diálogo div:
<div id="confirmDelete" title="Delete User?"></div>
Enlace de imágen:
<img src="img/delete.png" alt="Delete User" onclick="confirmDelete(''<?=$username;?>'',''<?=$id;?>'');"/>
De esta manera puede pasar los valores de bucle de PHP en el cuadro de diálogo. El único inconveniente es utilizar el método GET para realizar la acción.
Creé una función propia para un diálogo de confirmación jquery ui. Aquí está el código
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$(''<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">'' + dialogText + ''</div>'').dialog({
draggable: false,
modal: true,
resizable: false,
width: ''auto'',
title: dialogTitle || ''Confirm'',
minHeight: 75,
buttons: {
OK: function () {
if (typeof (okFunc) == ''function'') {
setTimeout(okFunc, 50);
}
$(this).dialog(''destroy'');
},
Cancel: function () {
if (typeof (cancelFunc) == ''function'') {
setTimeout(cancelFunc, 50);
}
$(this).dialog(''destroy'');
}
}
});
}
Ahora para usar esto en tu código, simplemente escribe lo siguiente
myConfirm(''Do you want to delete this record ?'', function () {
alert(''You clicked OK'');
}, function () {
alert(''You clicked Cancel'');
},
''Confirm Delete''
);
Seguir.
De fábrica, JQuery UI ofrece esta solución:
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
} );
HTML
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
</span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
Puede personalizar aún más esto al proporcionar un nombre para la función JQuery y pasar el texto / título que desea mostrar como parámetro.
Referencia: https://jqueryui.com/dialog/#modal-confirmation
Encontré que la respuesta de Paul no funcionaba del todo, ya que la forma en que estaba configurando las opciones DESPUÉS de que el diálogo se instanciara en el evento click era incorrecta. Aquí está mi código que estaba funcionando. No lo he hecho a la medida para que coincida con el ejemplo de Paul, pero es la diferencia de un bigote de gato en cuanto a que algunos elementos tienen un nombre diferente. Deberías poder resolverlo. La corrección está en el setter de la opción de diálogo para los botones en el evento click.
$(document).ready(function() {
$("#dialog").dialog({
modal: true,
bgiframe: true,
width: 500,
height: 200,
autoOpen: false
});
$(".lb").click(function(e) {
e.preventDefault();
var theHREF = $(this).attr("href");
$("#dialog").dialog(''option'', ''buttons'', {
"Confirm" : function() {
window.location.href = theHREF;
},
"Cancel" : function() {
$(this).dialog("close");
}
});
$("#dialog").dialog("open");
});
});
Espero que esto ayude a otra persona, ya que esta publicación originalmente me llevó por el camino correcto. Pensé que sería mejor publicar la corrección.
Esta es mi solución. Espero que ayude a cualquiera. Está escrito sobre la marcha en lugar de copiarse, así que discúlpeme por cualquier error.
$("#btn").on("click", function(ev){
ev.preventDefault();
dialog.dialog("open");
dialog.find(".btnConfirm").on("click", function(){
// trigger click under different namespace so
// click handler will not be triggered but native
// functionality is preserved
$("#btn").trigger("click.confirmed");
}
dialog.find(".btnCancel").on("click", function(){
dialog.dialog("close");
}
});
Personalmente prefiero esta solución :)
editar: Lo siento ... realmente debería haberlo explicado más en detalle. Me gusta porque, en mi opinión, es una solución elegante. Cuando el usuario hace clic en el botón que debe confirmarse primero, el evento se cancela como debe ser. Cuando se hace clic en el botón de confirmación, la solución no es simular un clic de enlace sino activar el mismo evento de jquery nativo (clic) sobre el botón original que se habría activado si no hubiera un diálogo de confirmación. La única diferencia es un espacio de nombres de evento diferente (en este caso ''confirmado'') para que el cuadro de diálogo de confirmación no se vuelva a mostrar. El mecanismo nativo de Jquery puede tomar el control y las cosas pueden funcionar como se espera. Otra ventaja es que se puede utilizar para botones e hipervínculos. Espero haber sido lo suficientemente claro.
Estaba buscando esto para usar en los botones de enlace dentro de una Vista de Grid ASP.NET (Comandos de compilación GridView Control) Por lo tanto, la acción "Confirmar" en el diálogo necesita activar un script generado por el control Gridview en tiempo de ejecución. esto funcionó para mí:
$(".DeleteBtnClass").click(function (e) {
e.preventDefault();
var inlineFunction = $(this).attr("href") + ";";
$("#dialog").dialog({
buttons: {
"Yes": function () {
eval(inlineFunction); // eval() can be harmful!
},
"No": function () {
$(this).dialog("close");
}
}
});
});
Manera fácil con un toque de javascript
$("#myButton").click(function(event) {
var cont = confirm(''Continue?'');
if(cont) {
// do stuff here if OK was clicked
return true;
}
// If cancel was clicked button execution will be halted.
event.preventDefault();
}
Me encontré con esto y terminé con una solución, que es similar a varias respuestas aquí, pero implementada de manera ligeramente diferente. No me gustaron muchas piezas de javascript, o un div marcador de posición en alguna parte. Quería una solución generalizada, que luego pudiera usarse en HTML sin agregar javascript para cada uso. Aquí es lo que se me ocurrió (esto requiere jquery ui):
Javascript:
$(function() {
$("a.confirm").button().click(function(e) {
e.preventDefault();
var target = $(this).attr("href");
var content = $(this).attr("title");
var title = $(this).attr("alt");
$(''<div>'' + content + ''</div>''). dialog({
draggable: false,
modal: true,
resizable: false,
width: ''auto'',
title: title,
buttons: {
"Confirm": function() {
window.location.href = target;
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
});
Y luego en HTML, no se necesitan llamadas ni referencias de JavaScript:
<a href="http://www.google.com/"
class="confirm"
alt="Confirm test"
title="Are you sure?">Test</a>
Como el atributo title se usa para el contenido div, el usuario puede incluso obtener la pregunta de confirmación pasando el mouse por encima del botón (por lo que no usé el atributo title para el mosaico). El título de la ventana de confirmación es el contenido de la etiqueta alt. El snip de JavaScript se puede incluir en una .js generalizada, y simplemente aplicando una clase tienes una bonita ventana de confirmación.
NOTA: No hay suficientes representantes para comentar, pero la respuesta de BineG funciona perfectamente al resolver problemas de devolución de datos con páginas ASPX, tal como destacan Homer y echo. En honor, aquí hay una variación usando un diálogo dinámico.
$(''#submit-button'').bind(''click'', function(ev) {
var $btn = $(this);
ev.preventDefault();
$("<div />").html("Are you sure?").dialog({
modal: true,
title: "Confirmation",
buttons: [{
text: "Ok",
click: function() {
$btn.trigger("click.confirmed");
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}]
}).show();
});
Otra variación de lo anterior donde verifica si el control es un ''asp: linkbutton'' o ''asp: button'' que se representa como dos controles html diferentes. Parece funcionar bien para mí, pero no lo he probado extensivamente.
$(document).on("click", ".confirm", function (e) {
e.preventDefault();
var btn = $(this);
$("#dialog").dialog(''option'', ''buttons'', {
"Confirm": function () {
if (btn.is("input")) {
var name = btn.attr("name");
__doPostBack(name, '''')
}
else {
var href = btn.attr("href");
window.location.href = href;
}
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
});
$("#dialog").dialog("open");
});
Personalmente veo esto como un requisito recurrente en muchas vistas de muchas aplicaciones ASP.Net MVC.
Es por eso que definí una clase de modelo y una vista parcial:
using Resources;
namespace YourNamespace.Models
{
public class SyConfirmationDialogModel
{
public SyConfirmationDialogModel()
{
this.DialogId = "dlgconfirm";
this.DialogTitle = Global.LblTitleConfirm;
this.UrlAttribute = "href";
this.ButtonConfirmText = Global.LblButtonConfirm;
this.ButtonCancelText = Global.LblButtonCancel;
}
public string DialogId { get; set; }
public string DialogTitle { get; set; }
public string DialogMessage { get; set; }
public string JQueryClickSelector { get; set; }
public string UrlAttribute { get; set; }
public string ButtonConfirmText { get; set; }
public string ButtonCancelText { get; set; }
}
}
Y mi vista parcial:
@using YourNamespace.Models;
@model SyConfirmationDialogModel
<div id="@Model.DialogId" title="@Model.DialogTitle">
@Model.DialogMessage
</div>
<script type="text/javascript">
$(function() {
$("#@Model.DialogId").dialog({
autoOpen: false,
modal: true
});
$("@Model.JQueryClickSelector").click(function (e) {
e.preventDefault();
var sTargetUrl = $(this).attr("@Model.UrlAttribute");
$("#@Model.DialogId").dialog({
buttons: {
"@Model.ButtonConfirmText": function () {
window.location.href = sTargetUrl;
},
"@Model.ButtonCancelText": function () {
$(this).dialog("close");
}
}
});
$("#@Model.DialogId").dialog("open");
});
});
</script>
Y luego, cada vez que lo necesita en una vista, simplemente usa @ Html.Partial (lo hizo en los scripts de sección para que JQuery esté definido):
@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})
El truco consiste en especificar el JQueryClickSelector que coincidirá con los elementos que necesitan un diálogo de confirmación. En mi caso, todos los anclajes con la clase SyLinkDelete pero podría ser un identificador, una clase diferente, etc. Para mí fue una lista de:
<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
<img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>
Por mucho que odie usar eval, me pareció la manera más fácil para mí, sin causar muchos problemas dependiendo de las diferentes circunstancias. Similar a la función javascript settimeout.
<a href="#" onclick="javascript:confirm(''do_function(params)'');">Confirm</a>
<div id="dialog-confirm" title="Confirm" style="display:none;">
<p>Are you sure you want to do this?</p>
</div>
<script>
function confirm(callback){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: false,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
eval(callback)
},
Cancel: function() {
$( this ).dialog( "close" );
return false;
}
}
});
}
function do_function(params){
console.log(''approved'');
}
</script>
Qué tal esto:
$("ul li a").click(function() {
el = $(this);
$("#confirmDialog").dialog({ autoOpen: false, resizable:false,
draggable:true,
modal: true,
buttons: { "Ok": function() {
el.parent().remove();
$(this).dialog("close"); } }
});
$("#confirmDialog").dialog("open");
return false;
});
Lo he probado en este html:
<ul>
<li><a href="#">Hi 1</a></li>
<li><a href="#">Hi 2</a></li>
<li><a href="#">Hi 3</a></li>
<li><a href="#">Hi 4</a></li>
</ul>
Elimina todo el elemento li, puede adaptarlo según sus necesidades.
Sé que esta es una vieja pregunta, pero esta es mi solución utilizando atributos de datos HTML5 en MVC4:
<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
Are you sure about this?
</div>
Código JS:
$("#dialog").dialog({
modal: true,
autoOpen: false,
buttons: {
"Confirm": function () {
window.location.href = $(this).data(''url'');
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#TheIdOfMyButton").click(function (e) {
e.preventDefault();
$("#dialog").dialog("open");
});
Sé que esta pregunta es antigua, pero esta fue la primera vez que tuve que usar un cuadro de diálogo de confirmación. Creo que esta es la forma más corta de hacerlo.
$(element).onClick(function(){ // This can be a function or whatever, this is just a trigger
var conBox = confirm("Are you sure ?");
if(conBox){
// Do what you have to do
}
else
return;
});
Espero que te guste :)
Solo tuve que resolver el mismo problema. La clave para hacer que esto funcione es que el dialog debe inicializarse parcialmente en el controlador de eventos click para el enlace con el que desea usar la funcionalidad de confirmación (si desea usar esto para más de un enlace). Esto se debe a que la URL de destino del enlace se debe inyectar en el controlador de eventos para que haga clic en el botón de confirmación. Usé una clase CSS para indicar qué enlaces deberían tener el comportamiento de confirmación.
Aquí está mi solución, abstraída para ser adecuada para un ejemplo.
<div id="dialog" title="Confirmation Required">
Are you sure about this?
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});
$(".confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
</script>
<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>
Creo que esto funcionaría para usted, si puede generar sus enlaces con la clase CSS ( confirmLink , en mi ejemplo).
Aquí hay un jsfiddle con el código en él.
En aras de una divulgación completa, señalaré que dediqué unos minutos a este problema en particular y proporcioné una respuesta similar a esta pregunta , que tampoco contó con una respuesta aceptada en ese momento.
Solución simple y corta que acabo de probar y funciona
$(''.confirm'').click(function() {
$(this).removeClass(''confirm'');
$(this).text("Sure?");
$(this).unbind();
return false;
});
¡simplemente agrega la clase = "confirmar" a tu enlace y funciona!
Tantas buenas respuestas aquí;) Aquí está mi enfoque. Similar al uso de eval ().
function functionExecutor(functionName, args){
functionName.apply(this, args);
}
function showConfirmationDialog(html, functionYes, fYesArgs){
$(''#dialog'').html(html);
$(''#dialog'').dialog({
buttons : [
{
text:''YES'',
click: function(){
functionExecutor(functionYes, fYesArgs);
$(this).dialog("close");
},
class:''green''
},
{
text:''CANCEL'',
click: function() {
$(this).dialog("close");
},
class:''red''
}
]
});
}
Y el uso se ve así:
function myTestYesFunction(arg1, arg2){
alert("You clicked YES:"+arg1+arg2);
}
function toDoOrNotToDo(){
showConfirmationDialog("Dialog text", myTestYesFunction, [''My arg 1'',''My arg 2'']);
}
Un tema muy popular y Google encuentra esto para la consulta "cerrar el cuadro de diálogo de jquery en el que se hizo clic en el evento". Mi solución maneja SÍ, NO, ESC_KEY, X eventos correctamente. Quiero que se llame a mi función de devolución de llamada sin importar cómo se eliminó el diálogo.
function dialog_YES_NO(sTitle, txt, fn) {
$("#dialog-main").dialog({
title: sTitle,
resizable: true,
//height:140,
modal: true,
open: function() { $(this).data("retval", false); $(this).text(txt); },
close: function(evt) {
var arg1 = $(this).data("retval")==true;
setTimeout(function() { fn(arg1); }, 30);
},
buttons: {
"Yes": function() { $(this).data("retval", true); $(this).dialog("close"); },
"No": function() { $(this).data("retval", false); $(this).dialog("close"); }
}
});
}
- - - -
dialog_YES_NO("Confirm Delete", "Delete xyz item?", function(status) {
alert("Dialog retval is " + status);
});
Es fácil redirigir el navegador a una nueva url o realizar alguna otra acción en la función retval.
$("ul li a").live(''click'', function (e) {
e.preventDefault();
$(''<div></div>'').appendTo(''body'')
.html(''<div><h6>Are you sure about this?</h6></div>'')
.dialog({
modal: true, title: ''Delete message'', zIndex: 10000, autoOpen: true,
width: ''auto'', modal: true, resizable: false,
buttons: {
Confirm: function () {
// $(obj).removeAttr(''onclick'');
// $(obj).parents(''.Parent'').remove();
$(this).dialog("close");
window.location.reload();
},
No: function () {
$(this).dialog("close");
}
},
Cancel: function (event, ui) {
$(this).remove();
}
});
return false;
});