Prevent bootstrap modal from closing on submit button click

Question

I have a bootstrap modal. When the user clicks the "Update" button it makes an ajax call to update the DB. However if the update fails for some reason I want to display the error message and leave the modal open.

Everything appears to be working in the order I expect, however the e.preventDefault() doesn't appear to stop the modal from closing.

Why is the preventDefault() not stopping the button from submitting?

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 type of the button to button will prevent the submit :

<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're using submition by ajax you could use checkValidity() method.

The HTMLSelectElement.checkValidity() method checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable invalid event at 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 a callback function of updateData method, it is quite possible that event is completed before callback is called.

Try placing e.preventDefault() before calling updateData method.

Hope this helps

Answer 3

The 'Native' modal that comes with Bootstrap doesn't seem to be friendly to javascript programmer, see below for an alternative plugin:

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.github.io/bootstrap3-dialog/