Tak lub nie, pole potwierdzenia przy użyciu jQuery

121

Chcę otrzymywać alerty tak / nie za pomocą jQuery zamiast przycisku OK / Cancel:

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

Jakieś inne alternatywy?

Sushanth CS
źródło
Spójrz na interfejs użytkownika jQuery : jqueryui.com/demos/dialog/#modal-confirmation
jAndy
3
$ .alerts.okButton = 'Tak'; $ .alerts.cancelButton = 'Nie'; jConfirm ('Are you sure ??', '', function (r) {if (r == true) {// OK, przycisk wciśnięty ...}}
Sushanth CS
2
Kolejne rozwiązanie JQuery Dialog bardziej przypomina funkcję confirm (), która zwraca: stackoverflow.com/a/18474005/1876355 Mam nadzieję, że to pomoże
Pierre

Odpowiedzi:

129

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();
      }
    });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Thulasiram
źródło
2
czy to jquery-ui czy zwykły stary jquery? Nie widzę .dialog () nigdzie w documentaiton jQuery.
chovy
11
Musisz dołączyć skrypt jquery i jquery ui na swojej stronie.
Thulasiram
@Thulasiram jak mogę dodać wtyczkę we yii2frameworku?
Faisal
113

Metoda alert blokuje wykonanie, dopóki użytkownik go nie zamknie:

użyj funkcji potwierdzenia:

if (confirm('Some message')) {
    alert('Thanks for confirming');
} else {
    alert('Why did you press cancel? You should have confirmed');
}
Ana El Bembo
źródło
3
confirmjest jednak „OK ANULUJ”, a nie „TAK NIE”.
KlaymenDK
57

Użyłem tych kodów:

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>

Te kody działają u mnie, ale nie jestem pewien, czy to prawda. Co myślisz?

user3678239
źródło
3
To działa dla mnieif(confirm("Are you sure you want to return this meter?")){ return true; } else{ return false; }
Faisal
Bardziej krótszy return confirm("Are you sure you want to return this meter?")))
Павел Зорин
28

Spójrz na tę wtyczkę jQuery: jquery.confirm .

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

i wtedy:

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

Spowoduje to wyświetlenie wyskakującego okienka potwierdzenia przed przejściem do podążania za linkiem.

Tutaj jest demo: http://myclabs.github.com/jquery.confirm/

Matthieu Napoli
źródło
12

Wszystkie przykłady, które widziałem, nie nadają się do ponownego wykorzystania w przypadku pytań typu „tak / nie”. Szukałem czegoś, co pozwoliłoby mi określić wywołanie zwrotne, abym mógł zadzwonić w każdej sytuacji.

Poniższe działa dobrze dla mnie:

$.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");
}
});

Nazywam to tak:

var deleteOk = function() {
    uploadFile.del(fileid, function() {alert("Deleted")})
};

$.confirm(
    "CONFIRM", //title
    "Delete " + filename + "?", //message
    "Delete", //button text
    deleteOk //"yes" callback
);
MSquared
źródło
4

Miałem problem z odzyskaniem odpowiedzi z okna dialogowego, ale w końcu wpadłem na rozwiązanie, łącząc odpowiedź z tego innego pytania wyświetl-tak-i-nie-przyciski-zamiast-ok-i-anuluj-potwierdź- Skrzynka z części kodu z okna modalne-potwierdzającym

Oto, co zostało zasugerowane w przypadku drugiego pytania:

Utwórz własne pole potwierdzenia:

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

Stwórz własną confirm()metodę:

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

Nazwij to swoim kodem:

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

MOJE ZMIANY Poprawiłem powyższe, aby zamiast dzwonić confirmBox.show() , użyłem w confirmBox.dialog({...}) ten sposób

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

Inną zmianą, jaką wprowadziłem, było utworzenie div confirmBox w funkcji doConfirm, tak jak zrobił to ThulasiRam w swojej odpowiedzi.

JF
źródło
0

Musiałem zastosować tłumaczenie do przycisków Ok i Anuluj. Zmodyfikowałem kod, aby z wyjątkiem tekstu dynamicznego (wywołuje moją funkcję tłumaczenia)


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

Jim
źródło
0

Spróbuj ... To bardzo proste, po prostu użyj okna dialogowego potwierdzenia dla ostrzeżenia z TAK | NIE.

if (confirm ("Czy chcesz uaktualnić?")) {Twój kod}

rajan snuriya
źródło
-3

Możesz ponownie użyć swojego potwierdzenia:

    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);
thamaht
źródło
2
Prosimy o używanie poprawnego angielskiego i unikanie skrótów typu „u”. Ponadto lepiej byłoby, gdybyś mógł trochę wyjaśnić swój kod, aby zilustrować i uczyć OP oraz dlaczego uważasz, że Twoja odpowiedź jest lepsza niż jakakolwiek z wcześniej opublikowanych.
Davidmh,