Bootstrap模态Ajax

Question

I have a bootstrap table with data. Need to edit that data and set the value of some fields that are not displayed with the table.

I added a edit button to each row, and a modal form. The button is loading the modal form with no issue.

I have 3 questions.

1. How to load the modal with the data for the row associated with the button.
2. How to save the edited data in the modal when the save button is clicked.
3. How to refresh the table after the modal closes when the save button was clicked.

I'm assuming that I'd be better off with a tutorial, but I'll be danged if I can find one.

The table code is just basic bootstrap table.

Current code for the button.

<button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#checkInModal">Check In</button>

Current code for the modal. (for brevity sake i removed all the fields from the snippet.)

  <!-- Modal -->
    <div class="modal fade" id="checkInModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Check In</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

When the edit button is clicked you would need to find the closest element relative to the button. In jQuery you can do it like this:

<button type="button" data-toggle="modal" data-target="#myModal"></button>


$('.btn').on('click', function(){
   var $row = $(this).closest('tr');
})

Then you can loop through all the cells and retrieve the contents and place them into the modal body area.

var $row = $(this).closest('tr');

var $modalContentArea = $('#myModal .modal-body');

$row.find('td').each(function(){

   var $cell = $(this);

   var cellContents = $cell.text();

   $modalContentArea.append('<input type="text" value="' + cellContents +'"/>');

});

The save button would need to be connected to an ajax request of some sort. You would need to construct a JSON object from the data collected. Then you could use the $get function of jQuery to send the request with the JSON object as the parameter.

$('btn-primary').on('click', function(){

    $.get( "process.php", function( data ) {

        //The ajax callback can populate the table with the new values.

    })

});

In the backend you would need to retrieve the JSON object, parse it, and save it to a database. Then return the new values to the ajax callback.