在引导模式中编辑数据

Question

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

我想将 id 传递给引导模式。在模态框内，应使用基于此 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 ...