Question

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

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

当您点击链接时 - 触发函数 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>

所有这些都有效 - 但是有一个问题 - 当我点击编辑链接时 - 显示模态，然后 2或3秒后< / strong>表单用数据填充（更新）。

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

提前致谢。

Answer 1

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

async: false

用于ajax调用，问题解决了。

谢谢Ghazanfar Mir。

PHP＆amp; Bootstrap - 在内容更新之前显示的模式

1 个答案: