Question

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

一步一步：

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

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

处理

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

4）加载模态（在查看admin.php页面的同时）没有页面重新加载，但是模态中包含动态内容。

我的代码到目前为止： Form + 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>

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

我被困住了，一直试图弄清楚这一点，并且非常感谢帮助。

编辑：

以下是我所拥有的和我想要的内容的细分。

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

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

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

然后我希望模式在管理页面上显示为叠加层 - 这应该完全没有页面刷新。

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

Answer 1

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

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

e.g：

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

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

没有通过Ajax刷新页面的动态模态

1 个答案: