PHP & Bootstrap - 模式在内容更新之前显示

Question

在数据库中，我有一个名为 articles 的 table。在我网站的一页上有所有文章标题的列表 - 每个标题实际上是一个 link 来编辑文章。它看起来像这样：

<a onclick="launch_edit_modal(<?php echo $article->getId(); ?>)" data-toggle="modal" data-target="#edit_modal" href="#">Edit</a>

当您点击 link - 函数 launch_edit_modal(id_of_article) 被触发：

<script type="text/javascript">

   $('#edit_modal').modal({
       show: false
   });

   function launch_edit_modal(id) {
     $.ajax({
        type: "POST",
        url: "return_article_data.php",
        data: {
            id:id
        },
        dataType: "json",
        success: function(data) {
            $("#category").val(data.category_id);
            $("#title").val(data.title);
            $("#content").val(data.content);
            $('#edit_modal').show();
        }
     });
   }
</script>

这个脚本在底部。

因此，使用 AJAX 我找到了关于该文章的其他数据（类别、标题、内容），然后我更新了模态内容的表单：

<div class="modal fade" id="edit_modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h3 class="modal-title">Edit article</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form id="edit_forma" class="form-horizontal" method="post" action="edit_article.php">
                        <fieldset>
                            <!-- Select Basic -->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="selectbasic">Category:</label>
                                <div class="col-md-4">
                                    <select id="category" name="category" class="form-control">
                                        <?php foreach($categories as $c): ?>
                                            <option value="<?php echo $c->getId(); ?>"><?php echo $c->getName(); ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <!-- Text input-->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="title">Title:</label>
                                <div class="col-md-4">
                                    <input id="title" name="title" placeholder="" class="form-control input-md" type="text">
                                </div>
                            </div>

                            <!-- Textarea -->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="content">Content:</label>
                                <div class="col-md-4">
                                    <textarea class="form-control" id="content" name="content" rows="10"></textarea>
                                </div>
                            </div>

                            <!-- Button -->
                            <div class="form-group">
                                <label class="col-md-4 control-label" for="submit"></label>
                                <div class="col-md-4">
                                    <button type="submit" id="submit" name="submit" class="btn btn-success">Izmeni</button>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

所有这些都有效 - 但有一个问题 - 当我点击 edit link - 显示模态，然后 2 或 3 秒后 表格中填充（更新）了数据。

有没有办法解决这个问题 - 在表单填写（更新）后显示模式？

提前致谢。

Answer 1

正如 Ghazanfar Mir 在我的问题下方的评论中所写，我只需要设置：

async: false

调用ajax，问题解决

谢谢 Ghazanfar Mir.

PHP & Bootstrap - 模式在内容更新之前显示

PHP & Bootstrap - Modal Shown just before content updated

php

ajax

jquery

bootstrap-modal

twitter-bootstrap-3