texto - Casilla de confirmación Sí o No usando jQuery

change text jquery

Question

Quiero alertas de sí / no usando jQuery, en lugar de aceptar / cancelar el botón:

jQuery.alerts.okButton = ''Yes'';
jQuery.alerts.cancelButton = ''No'';
jConfirm(''Are you sure??'', '''', function(r) {
if (r == true) {
//Ok button pressed...
}
}

¿Alguna otra alternativa?

Answer 1

Eche un vistazo a este plugin jQuery: jquery.confirm .

<a href="home" class="confirm">Go to home</a>

y entonces:

$(".confirm").confirm();

Esto mostrará una ventana emergente de confirmación antes de proceder a seguir el enlace.

Hay una demostración aquí: jquery.confirm

Answer 2

El método de alerta bloquea la ejecución hasta que el usuario la cierra:

usa la función de confirmación:

if (confirm(''Some message'')) {
alert(''Thanks for confirming'');
} else {
alert(''Why did you press cancel? You should have confirmed'');
}

Answer 3

He usado estos códigos:

HTML:

<a id="delete-button">Delete</a>

jQuery:

<script>
$("#delete-button").click(function(){
if(confirm("Are you sure you want to delete this?")){
$("#delete-button").attr("href", "query.php?ACTION=delete&ID=''1''");
}
else{
return false;
}
});
</script>

Estos códigos funcionan para mí, pero no estoy seguro si esto es correcto. ¿Qué piensas?

Answer 4

Necesitaba aplicar una traducción a los botones Aceptar y Cancelar. Modifiqué el código para que no fuera texto dinámico (llama a mi función de traducción)

$.extend({
confirm: function(message, title, okAction) {
$("<div></div>").dialog({
// Remove the closing ''X'' from the dialog
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
width: 500,
buttons: [{
text: localizationInstance.translate("Ok"),
click: function () {
$(this).dialog("close");
okAction();
}
},
{
text: localizationInstance.translate("Cancel"),
click: function() {
$(this).dialog("close");
}
}],
close: function(event, ui) { $(this).remove(); },
resizable: false,
title: title,
modal: true
}).text(message);
}
});

Answer 5

Puedes reutilizar tu confirmación:

 function doConfirm(body, $_nombrefuncion)
{ var param = undefined;
var $confirm = $("<div id=''confirm'' class=''hide''></div>").dialog({
autoOpen: false,
buttons: {
Yes: function() {
param = true;
$_nombrefuncion(param);
$(this).dialog(''close'');
},
No: function() {
param = false;
$_nombrefuncion(param);
$(this).dialog(''close'');
}
}
});
$confirm.html("<h3>"+body+"<h3>");
$confirm.dialog(''open'');
};
// for this form just u must change or create a new function for to reuse the confirm
function resultadoconfirmresetVTyBFD(param){
$fecha = $("#asigfecha").val();
if(param ==true){
// DO THE CONFIRM
}
}
//Now just u must call the function doConfirm
doConfirm(''body message'',resultadoconfirmresetVTyBFD);

Answer 6

Todos los ejemplos que he visto no son reutilizables para diferentes preguntas tipo "sí / no". Estaba buscando algo que me permitiera especificar una devolución de llamada para poder llamar cualquier situación.

Lo siguiente está funcionando bien para mí:

$.extend({ confirm: function (title, message, yesText, yesCallback) {
$("<div></div>").dialog( {
buttons: [{
text: yesText,
click: function() {
yesCallback();
$( this ).remove();
}
},
{
text: "Cancel",
click: function() {
$( this ).remove();
}
}
],
close: function (event, ui) { $(this).remove(); },
resizable: false,
title: title,
modal: true
}).text(message).parent().addClass("alert");
}
});

Entonces lo llamo así:

var deleteOk = function() {
uploadFile.del(fileid, function() {alert("Deleted")})
};
$.confirm(
"CONFIRM", //title
"Delete " + filename + "?", //message
"Delete", //button text
deleteOk //"yes" callback
);

Answer 7

Tuve problemas para recuperar la respuesta del cuadro de diálogo, pero finalmente se me ocurrió una solución combinando la respuesta de esta otra pregunta display-yes-and-no-buttons-instead-of-ok-and-cancel-in-confirm-box con parte del código del diálogo de confirmación modal

Esto es lo que se sugirió para la otra pregunta:

Crea tu propio cuadro de confirmación:

<div id="confirmBox">
<div class="message"></div>
<span class="yes">Yes</span>
<span class="no">No</span>
</div>

Crea tu propio método de confirm() :

function doConfirm(msg, yesFn, noFn)
{
var confirmBox = $("#confirmBox");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no").unbind().click(function()
{
confirmBox.hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.show();
}

Llámalo por tu código:

doConfirm("Are you sure?", function yes()
{
form.submit();
}, function no()
{
// do nothing
});

MIS CAMBIOS He modificado lo anterior para que en lugar de llamar a confirmBox.show() use confirmBox.dialog({...}) como este

confirmBox.dialog
({
autoOpen: true,
modal: true,
buttons:
{
''Yes'': function () {
$(this).dialog(''close'');
$(this).find(".yes").click();
},
''No'': function () {
$(this).dialog(''close'');
$(this).find(".no").click();
}
}
});

El otro cambio que hice fue crear el div de confirmBox dentro de la función doConfirm, como lo hizo ThulasiRam en su respuesta.

Answer 8

ConfirmDialog(''Are you sure'');
function ConfirmDialog(message) {
$(''<div></div>'').appendTo(''body'')
.html(''<div><h6>''+message+''?</h6></div>'')
.dialog({
modal: true, title: ''Delete message'', zIndex: 10000, autoOpen: true,
width: ''auto'', resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr(''onclick'');
// $(obj).parents(''.Parent'').remove();
$(''body'').append(''<h1>Confirm Dialog Result: <i>Yes</i></h1>'');
$(this).dialog("close");
},
No: function () {
$(''body'').append(''<h1>Confirm Dialog Result: <i>No</i></h1>'');
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
};

Por favor encuentra la Demo .