Prevent modal closure from loading when submit button is clicked

Question

I have bootstrap modal. When the user clicks the Refresh button, he calls an ajax call to update the database. However, if the update fails for some reason, I want to display an error message and leave the mod open.

Everything seems to work in the order that I expect, however e.preventDefault() does not stop closing the modal.

Why preventDefault() does not stop button submission?

My button:

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

Javascript button click code.

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

Just change the button type to button to prevent sending:

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

Hope this helps.

---

Update:

To profit from HTML5 validation, when you use ajax signing, you can use the checkValidity () method.

The HTMLSelectElement.checkValidity () method checks to see if the element has any restrictions and if it satisfies them. If an element fails with its limitations, the browser fires a canceled invalid event in the element and then returns false.

So your code will be:

 $("#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() is called from the callback function of the updateData method, it is possible that the event will be completed before the callback is called.

Try putting e.preventDefault() before calling the updateData method.

Hope this helps

Answer 3

The "native" modal that comes with Bootstrap does not seem to be javascript-friendly, see the alternative plugin below:

 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> 

Read more about the plugin here http://nakupanda.imtqy.com/bootstrap3-dialog/