php - 在 Bootstrap 模式中编辑数据

Question

在这里搜索了一段时间后，我决定问自己的问题，即使它与其他一些问题类似。

我想将 id 传递给 Bootstrap 模式。在模态中，应根据此 id 填充表单数据，然后提交。提交后，“谢谢”消息也应该出现在模式中(或者第一个应该关闭，第二个打开)。

我在这里发现了很多想法，但由于我对 jQuery 和 Ajax 的理解有限，我无法提出解决方案。

按钮:

<a class="btn..." data-toggle="modal" data-target="#myModal" data-id="1">First Item</a>
<a class="btn..." data-toggle="modal" data-target="#myModal" data-id="2">Second Item</a>

模态:

<div id="myModal" class="modal hide fade">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">&times;</button>

    <!-- would be great to have data from my database already for the title -->
    <h3><?php echo "$TitleBasedOnId"; ?></h3> 

  </div>
  <div class="modal-body">            
      <div id="modalContent">

         <form id="editData" role="form" method="post">
         <!--  Form should populated with data from my MySQL database -->
         <div class="form-group">
            <div class="col-md-3">
               <label for="user">User:</label> 
               <input class="form-control" name="user" type="text" id="user" value="<?php echo '$UsernameBasedOnId'; ?>" >     
            </div>
         </div>
         ...
         <button type="submit" class="btn...">Edit User</button>
         </form>
      </div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-info" data-dismiss="modal" >Close</a>
  </div>

提交表单后，我希望在相同或新的模式中收到“谢谢”消息。

jQuery:

/* no idea */

感谢您的帮助!

Answer 1

按钮的标记应该是:

<a class="btn..." data-toggle="modal" data-target="#myModal" data-id="1">First Item</a>
<a class="btn..." data-toggle="modal" data-target="#myModal2" data-id="2">Second Item</a>
<!-- The ID of the second modal is myModal2 -->

以下内容应在第一个模式关闭时打开第二个模式(hidden.bs.modal):

//On DOM ready
$(function() {

    //set up a listen to ... sense when the first modal is hidden ... and 
    $('#myModal').on('hidden.bs.modal',function() {

        //...show the second modal
        $('#myModal2').modal('show');
    });
});

.....Reference ...