成功AJAX调用时弹出Bootstrap模式 [英] Pop up Bootstrap modal on success AJAX call

问题描述

我正在使用Formkeep来制作表单，使用AJAX向他们的服务器提交电子邮件。我正在坚持的是如何在使用AJAX成功发送电子邮件地址时弹出一个引导模式说谢谢。

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.

这是运行的脚本AJAX。

Here's the script running the 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请求的初学者，所以我们将非常感谢任何帮助。

I'm a beginner at AJAX requests so any help will be greatly appreciated.

谢谢

推荐答案

<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');
              }

并确保您的模态具有类似的属性：

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>

这篇关于成功AJAX调用时弹出Bootstrap模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！