Question

我正在使用twitter boostrap，我在模态中有一个表单。以下是其提交功能的代码

jQuery("#testForm").validate({
   highlight: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    success: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-error');

    },
    submitHandler: function (form) {
        alert('hi');
        $.ajax({
                 type: "POST",
                 url: "forms/test.php",
                 data: $(form).serialize(),
                 success: function (resp) {
                  alert(resp);
                 }
             });
        return false; // required to block normal submit since you used ajax     
    }
  });
 });

基本上我想在成功函数中做两件事

1）关闭模态并在下面显示表格 2）对具有打开模态的按钮的页面进行ajax调用。这是为了反映表单

所做的任何更改

首先我不知道如何以编程方式关闭模态，其次我不知道成功函数中的ajax调用是否会应用于模态中加载的页面（我正在关闭）或是否适用于底层页面。我试图测试它，但我对这一切都是新手，并没有走得太快。

也许ajax调用不必在成功函数中，并且在模态关闭时调用的某些事件中更有意义。当然，这段代码必须检查表单是否已提交，也许我的变量使用了成功函数中设置的标志。我相信你的专家会知道更好的方法

提前感谢您分享您的专业知识。

感谢

修改

我可以看到当模态关闭时如何检测事件 Bind a function to Twitter Bootstrap Modal Close 但我不知道如何检测模态中的表格是否正确提交以及成功函数是否为

编辑2

这是模态的html，我无法分辨模态ID的位置，因为这不起作用。也许是因为该模型也是一个小组

        <div class="col-sm-6 col-md-4">
            <div class="panel panel-default panel-alt">
                <div class="panel-heading">
                    <div class="panel-btns">
                        <a href="" class="panel-close" id='close_button'>&times;</a>
                        <a href="" class="minimize">&minus;</a>
                    </div><!-- panel-btns -->
                    <h5 class="panel-title">Panel As Modal</h5>
                    <p>Easily add panel inside of a modal box.</p>
                </div>
                <div class="panel-body">
            <!--      <a href="modal_pages/modal_panel.php" class="btn btn-primary mr5" data-toggle="modal" data-target=".bs-example-modal-panel">Launch Modal</a> -->  
                       <a href="pages/add_customer.php" class="btn btn-primary mr5" data-toggle="modal" data-target=".bs-example-modal-panel" >Launch Modal</a>   
                </div>
            </div><!-- panel -->
        </div>


<div id="myModal" class="modal fade bs-example-modal-panel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content"></div>
  </div>
</div>





<script>
    jQuery(document).ready(function(){
        //
        $('#myModal').on('hidden.bs.modal', function () {
        alert('modal hidden');
});
    });
</script>

Answer 1

我在我的一个网站上这样做。这很简单。模态在DOM中，因此您可以像平常一样轻松地序列化和发布表单数据，然后在成功函数调用中：

编辑：

$('#myModal').modal('hide');

您的模态目前的ID为myModal。不要忘记使用类modal-header，modal-body，modal-footer添加或注入内容div到模态，以便应用css并且你的模态显示得很好。

<div id="myModal" class="modal fade bs-example-modal-panel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
     <--Add your header here. -->
      </div>
      <div class="modal-body">
     <--Add your content here. -->
      </div>
      <div class="modal-footer">
     <--Add your footer here. -->
      </div>
    </div>
  </div>
</div>

关闭模态并在底层页面上进行ajax调用以反映在模态中执行的更改

1 个答案: