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 .