PHP＆Bootstrap - Modal在内容更新前显示

在数据库中，我有一个名为的文章。在我的网站的一个页面上有一个所有文章的标题列表 - 每个标题实际上是编辑文章的链接。它看起来像这样：PHP＆Bootstrap - Modal在内容更新前显示

<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秒表格填充（更新）数据。

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

在此先感谢。

来源

2016-01-13 PeraMika

听起来像你需要preventDefault（）。可能的答案在这里：http://stackoverflow.com/questions/24289575/showing-ajax-call-result-in-bootstrap-modal – ReLeaf

或者你需要设置为ajax调用async：false –

@Ghazanfar米尔是的，解决了问题。请回答这个问题，我可以接受它！ – PeraMika

由于Ghazanfar米尔在下面我的问题的评论中写道，我只需要设置：

async: false

的Ajax调用，问题就解决了。

谢谢你Ghazanfar米尔。

来源

2016-01-13 17:14:38 PeraMika

不客气 –

PHP＆Bootstrap - Modal在内容更新前显示

回答

相关问题