Question

我有一个表，根据数据库记录动态显示行。

我想要做的是当我点击其中一行时，它会加载Bootstrap模式，并包含该数据库中该特定记录的所有信息。

这是显示的每一行的代码，当我点击它时，它会显示模态，但模态为空，没有任何数据。

初始文件

<tr class="issuesTable push" data-toggle="modal" data-target="#myModal" <?php echo "id='" . $row['Issue_ID'] . "'"; ?> >

所以我试图获取此动态ID值并将其传递给名为 issueDisplayModal.php 的文件以进行查询，然后在模式上显示详细信息。这是另一个文件中的查询。

应接收ID的代码

$issueID = $_POST['record_id']
issueQue ="SELECT * FROM Issues WHERE Issue_ID = $issueID";
$result = $my_dbhandle->query($issueQue);
$numResults = $result->num_rows;

在此之后，我做了一系列回声，打印出我工作的模态信息（谢天谢地！）。

这是我尝试发送HTTP请求以根据我发送的ID在模式上显示issueDisplayModal.php代码的JQuery代码。

应调用该文件并发送ID变量的AJAX

$('#myModal').on('show.bs.modal', function (e) {
   var $invoker = $(e.relatedTarget);
   var issue_id = $invoker.attr('id');

   $.ajax({
      type : 'post',
       url : 'issueDisplayModal.php', // in here you should put your query 
      data : 'post_id='+ issue_id, // here you pass your id via ajax .
                 // in php you should use $_POST['post_id'] to get this value 
   success : function(r)
       {
          // now you can show output in your modal 
         $('#mymodal').show();  // put your modal id 
         $('.something').show().html(r);
       }
   });

})

这是应显示 issueDisplayModal.php

结果的模式

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <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">Issue Details:</h4>
      </div>

      <div class="modal-body">

        <div class="something">

         **results should be displayed here**

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Create Task</button>
        <button type="button" class="btn btn-primary">Close</button>
      </div>

    </div>
  </div>
</div>

Answer 1

您的方法中存在一些错误和不必要的代码

<tr class="issuesTable push" data-toggle="modal" data-target="#myModal" <?php echo "id='" . $row['Issue_ID'] . "'"; ?> >

将<?php echo "id='" . $row['Issue_ID'] . "'"; ?>更改为data-id="<?php echo $row['Issue_ID'];?>"

<tr class="issuesTable push" data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['Issue_ID'];?>" >

然后在bootstrap modal events中，您可以在一个变量中获取id，无需定义2个变量

var $invoker = $(e.relatedTarget);
var issue_id = $invoker.attr('id');

你可以这样得到id;

var invoker = $(e.relatedTarget).data('id');

接下来，在Ajax方法中，success: function完全没错，您不需要再次显示模态$('#mymodal').show();而且不需要再显示div something $('.something').show().html(r);所以success: function应该是

$.ajax({
   type: 'post',
   url: 'issueDisplayModal.php', // in here you should put your query 
   data: 'post_id=' + invoker, // change issue_id to invoker .
   // in php you should use $_POST['post_id'] to get this value 
   success: function (r) { //Change
       // now you can show output in your modal 
       //$('#mymodal').show(); // Don't need this
       $('.something').html(r); // Don't need .show() Here
   }
});

<强> PHP

在Ajax中，数据为post_id，但您提取$_POST['record_id']，应为$_POST['post_id'];

$issueID = $_POST['post_id'];
issueQue ="SELECT * FROM Issues WHERE Issue_ID = '$issueID'";
$result = $my_dbhandle->query($issueQue);
$numResults = $result->num_rows;

以模态

获得结果

echo $numResults;

SideNote：确保脚本已准备好DOM。

$(document).ready(function(){
   //Put your script Here
});

这就是全部，它将开箱即用。

修改

最终脚本看起来像

$(document).ready(function(){ $('#myModal').on('show.bs.modal', function (e) { var invoker = $(e.relatedTarget).data('id'); alert(invoker); $.ajax({ type: 'post', url: 'issueDisplayModal.php', data: 'post_id=' + invoker, success: function (r) { $('.something').html(r); } }); }); });

Answer 2

因为您选择了数据切换选项，所以您可能在tr元素上绑定了多个click事件。

如果你没有得到成功的回应，那么弹出模态的唯一原因是因为这些属性。

如果要在同一点击事件上触发ajax调用，请使用内置模态事件

$('#myModal').on('show.bs.modal', function (e) {
    var $invoker = $(e.relatedTarget);
    var issue_id = $invoker.attr('id');
   // now do the $.ajax() call and test for a response
 })

这是这类事情的一个有效例子： http://www.bootply.com/WTgjFfxWSl#

如何通过AJAX将ID发送到PHP文件并在Bootstrap模式中显示结果

2 个答案: