Javascript 成功 AJAX 调用时弹出 Bootstrap 模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32482680/
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
Pop up Bootstrap modal on success AJAX call
提问by Jonathan
I'm using Formkeep to do my forms, using AJAX to submit an email to their servers. What I'm getting stuck on is how do I pop up a bootstrap modal saying 'thanks' on the successful sending of an email address using AJAX.
我正在使用 Formkeep 来做我的表单，使用 AJAX 向他们的服务器提交电子邮件。我遇到的问题是如何在使用 AJAX 成功发送电子邮件地址时弹出引导模式说“谢谢”。
Here's the script running the AJAX.
这是运行 AJAX 的脚本。
<script>
$(function() {
$('#beta-signup').submit(function(event) {
event.preventDefault();
var formEl = $(this);
var submitButton = $('input[type=submit]', formEl);
$.ajax({
type: 'POST',
url: formEl.prop('action'),
accept: {
javascript: 'application/javascript'
},
data: formEl.serialize(),
beforeSend: function() {
submitButton.prop('disabled', 'disabled');
}
}).done(function(data) {
submitButton.prop('disabled', false);
});
});
});
</script>
I'm a beginner at AJAX requests so any help will be greatly appreciated.
我是 AJAX 请求的初学者，因此将不胜感激任何帮助。
Thanks
谢谢
采纳答案by Mark
<script>
$(function() {
$('#beta-signup').submit(function(event) {
event.preventDefault();
var formEl = $(this);
var submitButton = $('input[type=submit]', formEl);
$.ajax({
type: 'POST',
url: formEl.prop('action'),
accept: {
javascript: 'application/javascript'
},
data: formEl.serialize(),
beforeSend: function() {
submitButton.prop('disabled', 'disabled');
}
success: function(data) {
$('#your-modal').modal('toggle');
}
}).done(function(data) {
submitButton.prop('disabled', false);
});
});
});
</script>
After your done call back, add:
完成回调后，添加：
success: function(data) {
$('#your-modal').modal('toggle');
}
And make sure your modal has similar attributes as:
并确保您的模态具有与以下类似的属性：
<div class="modal fade" id="your-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
回答by w3spi
You have to add some elements.
您必须添加一些元素。
HTML (Simple markup for the modal):
HTML（模态的简单标记）：
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirmation</h4>
</div>
<div class="modal-body">
<p>Success message</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS (Add this code to your success return):
JS（将此代码添加到您的成功返回）：
// Your code
}).done(function(data) {
submitButton.prop('disabled', false);
$('#myModal').modal({'show' : true});
});
