Impedire la modal bootstrap dalla chiusura sul pulsante di invio fare clic su

Question

Ho un modal bootstrap. Quando l'utente fa clic sul pulsante "Aggiorna" effettua una chiamata ajax per aggiornare il DB. Tuttavia, se l'aggiornamento fallisce per qualche motivo, voglio visualizzare il messaggio di errore e lasciare il modal open.

Tutto sembra funzionare nell'ordine previsto, tuttavia lo e.preventDefault() non sembra interrompere la chiusura della modal.

Perché il preventDefault() non interrompe il pulsante dall'invio?

mio pulsante:

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

codice Javascript clic del pulsante.

$("#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

Basta cambiare il tipo di pulsante per button impedirà la conferma:

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

Spero che questo aiuti.

---

Aggiornamento:

di trarre profitto dalla validazione HTML5 quando si utilizza sottomissione da ajax si potrebbe usare checkValidity() metodo.

Il metodo HTMLSelectElement.checkValidity() controlla se l'elemento ha vincoli e se li soddisfa. Se l'elemento fallisce i suoi vincoli, il browser attiva un evento invalido non valido sull'elemento, quindi restituisce false.

Così il vostro codice sarà:

$("#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() viene chiamato da una funzione di callback di updateData metodo, è del tutto possibile che la manifestazione è completata prima di callback viene chiamata.

Provare a inserire e.preventDefault() prima di chiamare il metodo updateData.

Spero che questo aiuti

Answer 3

Il modale 'Native' che viene fornito con Bootstrap non sembra essere amichevole per javascript programmatore, vedi sotto per un plugin alternativo:

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>

Leggi di più sul plugin qui http://nakupanda.github.io/bootstrap3-dialog/