在成功调用AJAX时弹出Bootstrap模式
在成功调用AJAX时弹出Bootstrap模式
提问于 2015-09-09 22:43:56
我正在使用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请求的初学者，因此任何帮助都将不胜感激。
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-09-09 22:49:36
<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>Stack Overflow用户
发布于 2015-09-09 22:50:50
你必须添加一些元素。
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});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32482680
复制相关文章
相似问题
腾讯云开发者
