Question

在这里搜索了一会儿后，我决定问自己的问题，即使它与其他人相似。

我想将id传递给bootstrap模式。在模态中，应该使用基于此ID的数据填充表单，然后提交。提交后，＆＃34;谢谢＆＃34;消息也应出现在模态中（或者第一个应该关闭，第二个应该打开）。

我在这里找到了一些想法，但由于我对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>

提交表单后，我想要一个＆＃34;谢谢你＆＃34;消息在相同或新的模态中。

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 ...

在bootstrap模式中编辑数据

1 个答案: