Warte auf SweetAlert Antwort

Question

Ich habe derzeit eine Funktion, die den Benutzer zur Bestätigung auffordert, wenn ein Wert in einem Dropdown geändert wird. Dies funktioniert mit dem Standard JavaScriptconfirm(). 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 verwendet, die Änderung Veranstaltung findet immer statt, bevor ich in der Lage bin, um zu bestätigen/abbrechen. Das heißt, wenn ich einen neuen Wert anwähle und "Abbrechen" drücke, wird das Ereignis nicht gestoppt und der vorherige Wert zurückgesetzt. Was es mit dem normalen JavaScriptconfirm Dialog macht.

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

Es könnte auch interessant sein, zu beachten, dass diese JavaScript sogar ungültig sein könnte (ziemlich neu in JavaScript), z.B. Rückkehr von der confirm Funktion und von der swal Funktion nicht funktioniert.

Aber nach dem googlen fand ich Leute mit ähnlichen Problemen.

• how-to-use-confirm-using-sweet-alert
• how-to-run-a-sweetalert-instead-of-default-javascript-confirm-method

Aber das scheint ein wenig hacky, da es jede Handlung hindert, aber wenn bestätigt die Auswahl er die Funktion neu erstellt, die standardmäßig aufgerufen werden soll. Was wie ein Hack für etwas so Einfaches scheint.

Jede Möglichkeit der SweetAlert funktioniert nur wie eine normale confirm Dialog?

Answer 1

Der Wert wird nicht zurückgesetzt, da this in swal nicht der Auswahl-, sondern der Süßalarm-Dialog ist. In Ihrem Change-Event müssen Sie also eine Variable definieren, die das geänderte select-Element enthält und sie verwenden, um den Wert zurückzusetzen, wenn der Benutzer auf "No" klickt.

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

Sie können ein funktionierendes Beispiel in diesem fiddle finden.

Answer 2

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