Prévenir modal bootstrap à partir de la clôture, cliquez sur le bouton soumettre

J'ai un bootstrap modal. Lorsque l'utilisateur clique sur le bouton "Update", il fait un appel ajax pour mettre à jour la DB. Toutefois, si la mise à jour échoue pour une raison quelconque, je veux afficher le message d'erreur et quitter le modal ouvrir.

Tout semble fonctionner dans l'ordre je pense, cependant, le e.preventDefault() ne semble pas arrêter le modal de la clôture.

Pourquoi le preventDefault() de ne pas s'arrêter sur le bouton soumettre?

Mon bouton:

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

Javascript cliquez sur le bouton 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();
        }
    });
});

OriginalL'auteur John Doe | 2016-01-31

  1. 5

    Il suffit de changer le type de bouton pour button va empêcher la soumission :

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

    Espère que cette aide.

    Mise à jour :

    Pour le bénéfice de la validation HTML5 lorsque vous utilisez submition par ajax vous pouvez utiliser checkValidity() méthode.

    La HTMLSelectElement.checkValidity() vérifie si l'élément n'a pas de contraintes et qu'il les satisfait. Si l'élément ne parvient pas à ses contraintes, le navigateur déclenche un annulable non valide événement à l'élément, puis renvoie la valeur false.

    De sorte que votre code sera :

    $("#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");
  }
});
    Cela ne l'aide, mais les causes des problèmes avec mon la validation côté client. J'ai changé le bouton de soumettre à bouton et ajouté un peu de code pour fermer la modale sur un succès et c'est très bien... Cependant, dans le modal, j'ai 2 champs de saisie laquelle j'ai ajouté l'attribut required. Maintenant arrête de fonctionner puisqu'il n'est plus un bouton de soumission. Je suppose que je peux gérer l'erreur entièrement la vérification côté serveur, mais a finalement été en espérant faire de validation à la fois le client et le serveur.
    Oui, vous pouvez, le contrôle de ma mise à jour s'il vous plaît.
    Je vois ce que vous obtenez, en revanche ne fonctionne pas pour moi. Je pense avoir une faille dans ma mater de la page. J'ai <form runat=server> et aucun de mes bootstrap des modaux sont rendu le <form> tag lorsque j'examine le code html.

    OriginalL'auteur Zakaria Acharki

  2. 1

    e.preventDefault() est appelée à partir d'une fonction de rappel de updateData méthode, il est tout à fait possible que l'événement est terminé avant de callback est appelée.

    Essayez de placer e.preventDefault() avant d'appeler updateData méthode.

    Espère que cette aide

    OriginalL'auteur hemanth