将值从php传递给模态

时间:2017-07-03 00:16:06

标签: javascript php jquery

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

这是我的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>';

这是html文件,我想传递来自php的值

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

非常感谢你。

2 个答案:

答案 0 :(得分:0)

我忘了包括

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

答案 1 :(得分:0)

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

1.我从PHP文件返回一个表(假设:file name- data.php)。

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

2.Modal显示数据。

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

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