在引导模态中编辑数据

Question

After searching here for a while I decided to ask my own question, even if it is similar to some others.

I'd like to pass an id to a bootstrap modal. Inside the modal, a form should be populated with data based on this id and then submitted. After submitting, the "thank you" message should also appear in the modal (or the first one should be closed and the second one opened).

I found quite some ideas here, but due to my limited understanding of jQuery and Ajax I'm unable to come up with a solution.

The buttons:

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

The modal:

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

After submitting the form, I'd like a "thank you" message in the same or a new modal.

The jQuery:

/* no idea */

Thanks for your help!

Answer 1

The markup for your buttons should be:

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

The following should open the second modal when the first modal is closed (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 ...