[英]Pop up Bootstrap modal on success AJAX call
我正在使用 Formkeep 来做我的表单,使用 AJAX 向他们的服务器提交电子邮件。 我遇到的问题是如何在使用 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>
我是 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');
}
success: function(data) {
$('#your-modal').modal('toggle');
}
}).done(function(data) {
submitButton.prop('disabled', false);
});
});
});
</script>
完成回调后,添加:
success: function(data) {
$('#your-modal').modal('toggle');
}
并确保您的模态具有与以下类似的属性:
<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>
您必须添加一些元素。
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(将此代码添加到您的成功返回):
// Your code
}).done(function(data) {
submitButton.prop('disabled', false);
$('#myModal').modal({'show' : true});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.