twitter-bootstrap 防止引导模式在提交按钮点击时关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35120931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent bootstrap modal from closing on submit button click
提问by John Doe
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.
我有一个引导模式。当用户单击“更新”按钮时，它会调用 ajax 来更新数据库。但是，如果由于某种原因更新失败，我想显示错误消息并保持模式打开。
Everything appears to be working in the order I expect, however the e.preventDefault()doesn't appear to stop the modal from closing.
一切似乎都按我期望的顺序工作，但是e.preventDefault()似乎并没有阻止模式关闭。
Why is the preventDefault()not stopping the button from submitting?
为什么preventDefault()不停止按钮提交？
My button:
我的按钮：
<button type="submit" class="btn btn-success" id="btnUpdate" style="margin-right:10px">Update</button>
Javascript button click code.
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();
}
});
});
采纳答案by Zakaria Acharki
Just change the type of the button to buttonwill prevent the submit :
只需更改按钮的类型即可button阻止提交：
<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.
要在使用 ajax 提交时从 HTML5 验证中获利，您可以使用checkValidity()方法。
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.
HTMLSelectElement.checkValidity() 方法检查元素是否有任何约束以及它是否满足这些约束。如果元素未通过其约束，则浏览器会在该元素上触发可取消的无效事件，然后返回 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");
}
});
回答by hemanth
e.preventDefault()is called from a callback function of updateDatamethod, it is quite possible that event is completed before callback is called.
e.preventDefault()从updateData方法的回调函数中调用，很有可能在调用回调之前事件已完成。
Try placing e.preventDefault()before calling updateDatamethod.
尝试e.preventDefault()在调用updateData方法之前放置。
Hope this helps
希望这可以帮助
回答by badboy
The 'Native' modal that comes with Bootstrap doesn't seem to be friendly to javascript programmer, see below for an alternative plugin:
Bootstrap 附带的“本机”模式似乎对 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>Read more about the plugin here http://nakupanda.github.io/bootstrap3-dialog/
在此处阅读有关插件的更多信息http://nakupanda.github.io/bootstrap3-dialog/
