Zapobieganie modowi ładowania początkowego przed zamknięciem przy przycisku przesyłania Kliknij

Question

Mam modał bootstrap. Gdy użytkownik kliknie przycisk "Aktualizuj", wywołuje wywołanie ajax, aby zaktualizować DB. Jednak jeśli aktualizacja nie powiedzie się z jakiegoś powodu, chcę wyświetlić komunikat o błędzie i pozostawić otwarty mod.

Wszystko wydaje się działać w kolejności, w jakiej się spodziewam, jednak wydaje się, że e.preventDefault() nie zatrzymuje modala przed zamknięciem.

Dlaczego preventDefault() nie przerywa wysyłania przycisku?

Mój przycisk:

<button type="submit" class="btn btn-success" id="btnUpdate" style="margin-right:10px">Update</button> 

JavaScript kod kliknij przycisk.

$("#btnUpdate").on("click", function (e) { 
    // reset the message... 
    $("#errorMessage").html(""); 

    // get the value... 
    var myParam = $("#someSelection").attr("someData"); 
    var myParamData = JSON.parse(myParam); 

    updateData(myParamData.Name) 
    .done(function (result) { 
     if (!result.d == "") { 
      $("#errorMessage").html(result.d); 
      e.preventDefault(); 
     } 
     else {      
      loadData(); 
     } 
    }); 
}); 

Answer 1

Wystarczy zmienić rodzaj przycisku do button zapobiegnie złożyć:

<button type="button" class="btn btn-success" id="btnUpdate" style="margin-right:10px">Update</button> 

nadzieję, że to pomaga.

---

Aktualizacja:

Aby skorzystać z walidacji HTML5, gdy używasz submition AJAX można użyć checkValidity() metody.

Metoda HTMLSelectElement.checkValidity() sprawdza, czy element ma jakiekolwiek ograniczenia i czy je spełnia. Jeśli element nie spełnia swoich ograniczeń, przeglądarka wywołuje anulowane nieprawidłowe zdarzenie w elemencie, a następnie zwraca wartość false.

Tak Twój kod będzie:

$("#btnUpdate").on("click", function (e) { 
    // reset the message... 
    $("#errorMessage").html(""); 

    if($("form")[0].checkValidity()) { 
    // get the value... 
    var myParam = $("#someSelection").attr("someData"); 
    var myParamData = JSON.parse(myParam); 

    updateData(myParamData.Name) 
     .done(function (result) { 
     if (!result.d == "") { 
     $("#errorMessage").html(result.d); 
     e.preventDefault(); 
     } 
     else {      
     loadData(); 
     } 
    }); 
    }else{ 
    console.log("invalid form"); 
    } 
}); 

Answer 2

e.preventDefault() jest wywoływana z funkcji wywołania zwrotnego z updateData metodzie, jest całkiem możliwe, że zdarzenie zostanie zakończone przed zwrotna jest wywoływana.

Spróbuj umieścić e.preventDefault() przed wywołaniem metody updateData.

Nadzieja to pomaga

Answer 3

do 'Native' modalna, że ​​pochodzi z Bootstrap nie wydaje się być przyjazny dla javascript programista, patrz poniżej alternatywnej wtyczki:

BootstrapDialog.show({ 
 
    title: 'Ajax check', 
 
    message: 'Click buttons below', 
 
    buttons: [{ 
 
    label: 'Submit', 
 
    cssClass: 'btn-primary', 
 
    action: function(dialogRef) { 
 
     // Assuming here starts a new ajax request 
 
     $.when().done(function() { 
 
     var ok = false; 
 
     if(!ok) { 
 
      dialogRef.setMessage('<div class="alert alert-warning">Dude, something went wrong!</div>'); 
 
     } else { 
 
      alert('Great!'); 
 
     } 
 
     }); 
 
    } 
 
    }, { 
 
     label: 'Cancel', 
 
     action: function(dialogRef) { 
 
      dialogRef.close(); 
 
     } 
 
    }] 
 
});

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.js"></script>

Przeczytaj więcej o wtyczce tutaj http://nakupanda.github.io/bootstrap3-dialog/