将值从 php 传递到 modal

Posted 2023-02-24

【中文标题】将值从 php 传递到 modal

【英文标题】：passing value from php to modal

【发布时间】：2017-12-06 04:10:36

【问题描述】：

我正在尝试学习将值从 php 传递给 modal，但它似乎不起作用，控制台中没有错误。

这是我在 while 循环中的 php

echo'
  <tbody>
    <tr>
      <td>'.$row->equipID.'</td>
      <td>'.$row->equipType.'</td>
      <td>
        <a href="#editModal" class="btn btn-info btn-xs" data-id="'.$row->equipID.'" data-toggle="modal">
        <i class="fa fa-pencil"></i> Edit </a>
      </td>
    </tr>
  </tbody>';

这是我想从 php 传递值的 html 文件

<div class="modal fade" id="editModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <h3 class="modal-title">Edit Truck Category</h3>
      <div class="modal-body">
        <form>
          <div class = "fetched-data"></div>
          <input type="text" id="truck" placeholder="Truck Category *"  required>
        </form>
      </div>
    </div>
  </div>
</div>

这是我的 js

<script>
  $(document).ready(function()
    $('#editModal').on('show.bs.modal', function (e) 
        var rowid = $(e.relatedTarget).data('id');
        $.ajax(
            type : 'post',
            url : 'fetch_record.php', //Here you will fetch records
            data :  'rowid='+ rowid, //Pass $id
            success : function(data)
            $('.fetched-data').html(data);//Show fetched data from database
            
        );
     );
  );
</script>

非常感谢您。

【问题讨论】：

您是在日志文件中还是直接在浏览器中打印php输出（不使用ajax）并验证您是否从php中获取了有效的html输出代码？

console.log(data) 里面成功了，看看是不是你期望的。

没有价值。我也试图把警报（'成功'）;内部成功，但它没有弹出，所以我无法验证从 php 传递的数据是否正确

@NoobProgramer 先检查你的 fetch_record.php 是否返回数据

是的，我尝试输入一个虚拟数据并且它可以工作

【参考方案1】：

我忘了包括

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

【参考方案2】：

您可以使用 load 函数来实现上述功能。我将通过一个例子来描述它。请注意，我只包含了需要解释的代码段。

1.我从PHP文件中返回一个表（假设：文件名-data.php）。

$table = "<table class='table table-bordered'>";
// Table data
$table.="</table>";
echo $table;

2.显示数据的模式。

<div id="mymodal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body mymodal-body">
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

3.加载数据到模态体

$('.mymodal-body').load('/data.php', function (result) 
        $('#mymodal').modal(show: true);

我希望以上代码示例能帮助您了解您的问题。您可以尝试使用加载功能。