通过Ajax在bootstrap模式中的PHP变量

时间:2016-02-21 19:22:08

标签: php ajax

我有一个php页面,列出了数据库中的一堆id。然后我在每个id旁边都有一个按钮,它将在页面中打开一个Twitter Bootstrap模式窗口,我需要将php变量传递给该模型窗口,以便我可以在其中执行mysql查询。

我的问题是模型窗口只是显示我设置的应该显示唯一ID的文本框。然而,它显示的文本框只有一个" null"在里面。

我的代码如下   用于触发模态窗口的链接。注意我确认下面的链接确实显示了php变量的值。

<a href='#switch_modal' class='btn btn-default btn-small' data-toggle='modal' data-id='$scommentid'>REPLY</a>

用于将php变量放入Modal窗口的Ajax代码

 <!-- get the unique comment id to use in the modal window -->
  <script>                     
       $(document).ready(function(){
          $('#switch_modal').on('show.bs.modal', function (e) {
                var rowid = $(e.relatedTarget).data('id');                                                                                                  
                $.ajax({
                          type : 'post',
                          url : 'fetch_comment_id.php', //Here you will fetch records 
                          data :  'rowid='+ rowid, //Pass $id
                          success : function(data)
                            {
                                 $('.fetched-data').html(data);//Show fetched data from database
                            }
                         });
                     });
                  });
  </script>

这是我的模态窗口代码

<div class="modal fade" id="switch_modal" role="dialog">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Edit Data</h4>
        </div>
        <div class="modal-body">
            <div class="fetched-data"></div>  
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

下面是我的fetch_comment_id.php文件

  <?php
    $id = $_POST['rowid']; //I know I need to clean this variable
    echo "# <input type='text' name='acommentid' value='$id'>";
  ?> 

2 个答案:

答案 0 :(得分:2)

更改

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

var rowid = $(e.relatedTarget).attr('data-id');

您的代码应如下所示:

  $('#switch_modal').on('show.bs.modal', function (e) {
    var rowid = $(e.relatedTarget).attr('data-id');
    $.ajax({
      type : 'post',
      url : 'fetch_comment_id.php', //Here you will fetch records 
      data :  'rowid='+ rowid, //Pass $id
      success : function(data) {
        $('.fetched-data').html(data);//Show fetched data from database
      }
    });
  });

您可以在下方看到此演示。请注意,我已将rowid传递给html()而不是data,以表明它正确传递了该值。

https://jsfiddle.net/29wtk0gu/2/

答案 1 :(得分:-1)

试试这个:

将锚标记中分配的data-id属性替换为:

 data-id='<?php echo $scommentid; ?>'