使用可變數據從PHP生成Twitter Bootstrap模式對話框

Question

我在表中有一個記錄列表，帶有一個按鈕來顯示Bootstrap模態對話框。 它當前為表中的每個記錄顯示相同的模式對話框。 這是帶有一些示例記錄的HTML：

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

這是模式對話框的html：

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

現在，我需要使它動態化，以便單擊“ Review”按鈕，將所選行的id屬性的值傳遞到PHP頁面（getRecord.php），該頁面進行數據庫查詢並返回有關所選行以顯示在模式內部。 我是PHP中級開發人員，但是沒有Javascript，AJAX和jQuery的經驗，我相信我需要使用它來實現這一目標。

我還沒有找到一個模板或示例來演示此操作，並提供了實現此操作所需的步驟。 Bootstrap顯然使用jQuery，因此使用它沒有問題，只是對此沒有經驗，沒有調用PHP頁面並通過單擊按鈕傳遞數據的經驗。

Answer 1

刪除數據目標和數據切換屬性。 將一個類添加到按鈕“ btn-show-details”。 您可以使用jQuery將onclick事件綁定到您的按鈕：

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');
        }
    });
});

在您的getResults.php中，回顯一個json對象，例如：

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

而且，由於模態中有“保存”和“關閉”按鈕，因此您將不得不編寫其他JavaScript代碼以將row_id保存在內存中並處理這些按鈕的onclick事件。 可能是這樣的：

$('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
        }
    });
});

Answer 2

您可以使用Ajax來做到這一點，一種簡單的方法是

<!--call script-->
<script>
    //when document is loaded and ready
    $(document).ready(function(){
        //when a user clicks on the button
        $('.btn.btn-default').on('click', function(){
            //use the id of the button that was clicked in the variable
            var reviewID = $(this).attr('id');

        //post the id to php page, and if it succeeds, return the info inside the variable 'data'
        $.post('getRecord.php', {id: reviewID}, function(data){
        //in the body of myModal, empty the previous text and use the returned value now.
            $('.modal-body').empty().text(data);
        });
    });
</script>