使用可变数据从PHP生成Twitter Bootstrap模式对话框

Question

I have a list of records in a table with a button to show a Bootstrap modal dialog. It's currently showing the same modal dialog for each record in the table. Here's the HTML with some sample records:

 <tr>
 <td><button class="btn btn-default" data-toggle="modal" id="33926" data-target="#myModal">Review</button></td><td>Approved</td>
 </tr>
 <tr>
 <td><button class="btn btn-default" data-toggle="modal" id="33951" data-target="#myModal">Review</button></td><td>Pending</td>
 </tr>

and here's the html for the modal dialog:

<div class="modal" id="myModal" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Review Job</h4>
      </div>
      <div class="modal-body">
        <p>This will be dynamic content from database call</p>
      </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>

I'm now at the point where I need to make this dynamic, so that clicking the Review button passes the value for the id attribute for the selected row to a PHP page (getRecord.php) which does a database query and returns details for the selected row to be displayed inside the modal. I'm an intermediate PHP developer but have no experience with Javascript, AJAX and jQuery which I believe I need to use to make this happen.

I haven't been able to find a template or example that shows this in action with the required steps to make this happen. Bootstrap obviously uses jQuery so no issues with using that, just have no experience with this and calling a PHP page and passing data via the button click.

Answer 1

Remove the data-target and data-toggle attributes. Add a class to the buttons "btn-show-details". You can bind an onclick event to your buttons using jQuery:

var row_id;

$('button.btn-show-details').on('click', function() {
    row_id = $(this).attr('id');
    $.ajax({
        url: 'getResults.php',
        type: 'POST',
        data: {id: row_id},
        success: function(a) {
            $('#myModalLabel').html(a.title);
            $('.modal-body').html(a.content);
            $('#myModal').modal('show');
        }
    });
});

In your getResults.php echo a json object like:

echo json_encode(array('title' => $modal_title, 'content' => $modal_content));

And since you have Save and Close buttons inside the modal, you will have to write additional javascript code to save the row_id in memory and handle the onclick events of those buttons. That might be like:

$('button.btn-close-modal').on('click', function() {
    row_id = 0;
    $('#myModalLabel, .modal-body').html('');
    $('#myModal').modal('hide');
});

$('button.btn-save-changes').on('click', function() {
    $.ajax({
        url: 'saveResults.php',
        type: 'POST',
        data: {id: row_id, data: some_data_you_want_to_send},
        success: function(a) {
            // reload page or change stuff or show success msg
        }
    });
});