Warten auf Antwort SweetAlert

Momentan habe ich eine Funktion fragt den Benutzer um Bestätigung, wenn das ändern eines Wertes in einer dropdown-Liste. Dies funktioniert gut mit den standard -JavaScript confirm(). Hier ist die fiddle.

var prev_val;
$('#dropdownId').focus(function () {
    prev_val = $(this).val();
}).change(function () {
    $(this).blur();
    var success = confirm('Are you sure you want to change the Dropdown?');
    if (success) {
        //Proceed as normal.
    } else {
        //Reset the value & stop normal event
        $(this).val(prev_val);
        return false;
    }
});

Aber wenn SweetAlert das change-Ereignis immer stattfindet, bevor ich in der Lage bin, um zu bestätigen/Abbrechen. Bedeutung, wenn ich wählen Sie einen neuen Wert ein und drücken Sie "Abbrechen", es hört nicht auf, den Fall und setzen Sie den vorherigen Wert. Das tut es mit der regelmäßigen JavaScript confirm dialog.

var prev_val;
$('#' + dropdownId).focus(function () {
    prev_val = $(this).val();
}).change(function (e) {
    $(this).blur();
    return swal({
        title: "Are you sure?",
        text: "Do you want to change the dropdown?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        closeOnConfirm: true,
        closeOnCancel: true
    },
            function (isConfirm) {
                if (isConfirm) {
                    e.preventDefault();
                    return true;
                } else {
                    $(this).val(prev_val);
                    return false;
                }
            });
});

Könnte es auch interessant sein, zu beachten, dass diese JavaScript vielleicht sogar ungültig (ziemlich neu JavaScript), z.B. Rückkehr aus der confirm Funktion und aus der swal - Funktion funktioniert nicht.

Jedoch nach Googeln um, fand ich Menschen mit ähnlichen Problemen.

Aber das scheint mir ein bisschen hacky, da es die Verhinderung jeder Handlung, aber wenn Sie die Auswahl bestätigen, dass er neu erstellt, und die Funktion, die sollte genannt worden standardmäßig. Das scheint wie ein ziemlich hack für etwas so einfach.

Jede Möglichkeit der SweetAlert einfach handeln wie eine normale confirm dialog?

Ist das nicht dein code funktioniert?
Es ist für eine regelmäßige JavaScript Confirm. Aber das ist ziemlich langweilig, ich würde gerne die SweetAlert Dialoge, das gleiche zu tun.
Auch die sweetAlert code scheint korrekt zu sein. Was ist der Punkt, den Sie haben?
Mit dem aktuellen code bekomme ich eine SweetAlert dialog, aber es ändert IMMER den Wert. Unabhängig vom drücken der cancel oder confirm Schaltflächen im dialog. Ich will es zu stoppen, das change-Ereignis, wie bei der normalen confirm dialog
wenn möglich, geben Sie bitte jsfiddle des Codes, die Sie getan haben, mit Sweet-Alert.

InformationsquelleAutor Jaims | 2016-05-27

Den Wert nicht zurück, weil this im swal ist nicht die wählen, aber die sweet-alert-dialog. Also in Ihrem change-Ereignis aus, Sie haben eine variable definieren, hält der geänderten select-element, und verwenden Sie es, um den Wert zurück, wenn der Benutzer auf "Nein".

.change(function(e) {
    var select = this; //save select element to variable

    $(this).blur();
    return swal({
        title: "Are you sure?",
        text: "Do you want to change the dropdown?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        closeOnConfirm: true,
        closeOnCancel: true
    },
    function(isConfirm) {
        if (isConfirm) {
            e.preventDefault();
            return true;
        } else {
            $(select).val(prev_val); //use select reference to reset value
           return false;
        }
    });
});

Finden Sie ein funktionierendes Beispiel in diesem fiddle.

InformationsquelleAutor frncsdrk

JS:

var prev_val;
$('#' + dropdownId).focus(function() {
  prev_val = $(this).val();
}).change(function(e) {
  $(this).blur();
  var self = this;
  return swal({
      title: "Are you sure?",
      text: "Do you want to change the dropdown?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes",
      cancelButtonText: "No",
      closeOnConfirm: true,
      closeOnCancel: true
    },
    function(isConfirm) {
      if (isConfirm) {

        //preventDefault is useless since change event has already happened 
        //if Confirm is true then do nothing else
        //change with prev val
        //e.preventDefault();
        return true;
      } else {

        //this here does not refer the dom element
        //it might be changed because it is called through the swal library code at a later time, use self which is declared out of the callback context.
        $(self).val(prev_val);
        return false;
      }
    });
});

InformationsquelleAutor rishabh dev

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.