无需通过 Ajax 刷新页面的动态模态

Question

我正在尝试使用基于表单输入的动态数据填充模式，而无需重新加载页面。

一步一步：

1) 用户将在 admin.php 上输入名称并提交表单

2) 数据通过 Ajax 提交（理想情况下）并通过 editUser.php 处理

3) 从 mysqli 数据库中提取数据并放入模态内容

4) 模态已加载（同时仍在查看 admin.php 页面），没有重新加载页面，但在模态中具有动态内容。

到目前为止我的代码： 表单+Ajax：

<script src="http://malsup.github.com/jquery.form.js"></script> 
            <script> 
                // wait for the DOM to be loaded 
                $(document).ready(function() { 
                    // bind 'myForm' and provide a simple callback function 
                    $('#myForm').ajaxForm(function() { 
                        alert("Thank you for your comment!"); 
                    }); 
                }); 
            </script>
            <form id="myForm" action="query/editUser.php" method="post"> 
                Name: <input type="text" name="name" /> 
                <input type="submit" value="Submit Comment" /> 
            </form>

editUser.php：

<script>
    $(window).load(function(){
        $('#myModal').modal('show');
    });
</script>

    <!-- Modal -->
    <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">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            --List data based on the form input from before
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

我目前的问题是提交表单后不知道如何显示模态。 你会注意到我目前没有调用我的数据库，也没有在模态框上填充任何内容，因为这将在以后出现。我现在的目标是在提交表单后显示模态（并且这样做的方式仍然可以在显示之前填充模态）。

我被卡住了，一直在尝试解决这个问题，非常感谢帮助。

编辑：

这里是我拥有的和我想要的的细分。

现在，我有 2 页：admin.php 和 editUser.php

管理页面包含表单，提交时使用“操作”发布到 editUser 页面，该页面包含我的模态代码。

当表单发布时，我希望使用 while 语句从数据库中提取信息来动态填充信息（基于管理页面的输入）。

然后我希望模式在管理页面上显示为叠加层 - 这一切都应该在绝对不刷新页面的情况下发生。

我知道如何用信息动态填充模态，我知道如何调用模态，但我不知道如何在我的管理页面上显示模态，在提交表单然后填充保存的模态之后userEdit 页面动态。

Answer 1

如果dialog 是要接收内容的<div class="modal"> 的ID，

$('#dialog').modal('show');

例如：

$.get(url).then(function(data) {
    // fill "#dialog .modal-body" with content based on 'data'
    ...

    $('#dialog').modal('show');
});