送信ボタンのクリック時にブートストラップモーダルが閉じないようにする

Question

私はブートストラップモーダルを持っています。ユーザーが "Update"ボタンをクリックすると、DBを更新するためのajax呼び出しが行われます。しかし何らかの理由で更新が失敗した場合は、エラーメッセージを表示して、モーダルを開いたままにします。

私は期待どおりのすべての動作をしているようですが、e.preventDefault()はモーダルの終了を停止しているようには見えません。

preventDefault()がボタンの送信を停止しないのはなぜですか？

マイボタン：

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

Javascriptのボタンクリックコード。

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

だけbuttonにボタンの種類を変更するには、提出を防ぐことができます：

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

は、この情報がお役に立てば幸いです。

---

更新：あなたはcheckValidity()メソッドを使用することができますAJAXによってsubmitionを使用しているとき

は、HTML5の検証から利益を。

HTMLSelectElement.checkValidity（）メソッドは、要素に制約があるかどうか、およびそれらが条件を満たすかどうかをチェックします。要素が制約に違反すると、ブラウザは要素でキャンセル可能な無効なイベントを発生させ、falseを返します。

だからあなたのコードは次のようになります。

$("#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()コールバックが呼び出される前にイベントが終了したことをかなり可能である、updateDataメソッドのコールバック関数から呼び出されます。

メソッドを呼び出す前にe.preventDefault()を配置してください。

希望はこのブートストラップが付属しています

Answer 3

「ネイティブ」モーダルは、代替プラグインについては下記を参照のJavaScriptプログラマに優しいとは思われないのに役立ちます：

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>

プラグインの詳細はこちらhttp://nakupanda.github.io/bootstrap3-dialog/