使用变量数据从PHP生成Twitter引导模式对话框

我在一个表中有一个记录列表，其中有一个按钮显示引导模式对话框。它当前为表中的每个记录显示相同的模式对话框。以下是带有一些示例记录的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，因此使用jQuery没有任何问题，只是没有使用该功能的经验，没有调用PHP页面并通过单击按钮传递数据。

删除数据目标和数据切换属性。将类添加到按钮“btn显示详细信息”。可以使用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));

由于模式中有Save和Close按钮，因此必须编写额外的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
        }
    });
});

---

您可以使用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>

//当文档加载并准备就绪时
$（文档）.ready（函数（）{
//当用户单击按钮时
$（'.btn.btn默认值'）。在（'click'，function（）上{
//使用在变量中单击的按钮的id
var reviewID=$（this.attr（'id'）；
//将id发布到php页面，如果成功，则返回变量“data”中的信息
$.post（'getRecord.php'，{id:reviewID}，函数（数据）{
//在myModal的正文中，清空前面的文本并立即使用返回的值。
$（'.modal body'）.empty（）.text（数据）；
});
});

模式标题和正文未使用从PHP页面返回的动态内容进行更新。脚本语法是否有问题。以下是返回内容的示例：{“标题”：“模式对话框标题”，“内容”：“模式对话框内容”}向脚本中添加数据类型：“json”似乎已经解决了这个问题。哦，没错。添加数据类型：json将自动将json响应类型转换为一个对象。否则，您必须在success函数中使用$.parseJSON（）。