使用PHP和AJAX填充模态内容？ [英] Filling modal content using PHP and AJAX?

问题描述

我希望用户能够点击一个表，并根据他们点击的行 - 它将填充模式与该行相关的内容（MYSQL查询），并打开模态。

I want the user to be able to click on a table, and depending on the row they click on - it would fill the modal with content relating to that row (a MYSQL query), and open the modal.

我试图像下面这样做：
- 加载表格内容
- 使用jQuery
点击表格时收听 - 使用AJAX通过点击行的信息发布到PHP文件
- 使用行信息执行MYSQL查询
- 用收集的内容填充模态
- 打开模态

I've attempted to do this like the following: - Load table content - Listen to when table is clicked on using jQuery - Use AJAX to post to the PHP file with the clicked on row's information - Execute MYSQL query using the row info - Filling the modal with the gathered content - Opening the modal

我遇到的问题是因为它是一个MYSQL语句而且函数是非阻塞的，所以变量在模态开始打开时尚未声明。网络编程并不完全是我的强项，所以我确定我错过了一些简单的东西。

The problem I've encountered is that because it's a MYSQL statement and the function is non-blocking, the variables haven't been declared by the time the modal's started to open. Web programming isn't exactly my forte, so I'm sure I'm missing something simple.

提前致谢！

编辑：

jQuery / AJAX

$('#alerts tbody').delegate('tr', 'click', function() {
  var id = $('td:eq(0)', this).text(); // Gets the ID of the row

  // PHP Method (below)


  // Passes ID through to PHP
  $.ajax({
    url: "alerts.php",
    method: "GET",
    data: {id: ID},
    async: true,
    done: function() {
        loadModalFunction();
    }
    });
});

PHP

<?php
  if (!empty($_GET['id'])) {
    // MYSQL Query
    // Sets global variables    
  }
?>

模态

$('#info').find('.modal-title').text("Information (#" + id + ")");
$('#info').find('#modal-body-content').text("<?php echo $GLOBALS['content'];?>");

我知道获取ID并获取内容有效，但内容不是'在脚本初始化全局变量之前加载模态时传递给ID。

I know that the getting passing of the ID and getting of the content works, but the content isn't passed to the ID as the modal is loaded before the script initialises the global variables.

推荐答案

好的，这是我对此的实现问题，只提供基础知识并让你相应地编辑自己的代码会更简单。

Alright, here's my implementation on this issue, it will be a bit simpler to just provide the basics and let you edit your own code accordingly.

首先，我的整个模态内容是一个带有id的div ，< div id =modalcontent> < / div>

First of all my entire modal content is a div with an id, <div id="modalcontent"> </div>

然后，假设此按钮应该打开并用数据填充我的模态

Then, suppose this button should open and populate my modal with data

<a href="#" onclick="openModal()">Open</a>

openModal（）看起来像这样

openModal() will look something like this

$.post("alerts.php", {
    id: ID
}, function(data) {//data will contain whatever alerts.php prints
document.getElementById("modalcontent").innerHTML = data;//insert data into modal
$('#my-modal').modal('toggle');//open modal
});

同样，有很多方法可以做到这一点。有更好的方法来做到这一点。但是你应该理解这样的东西是如何工作的，你只能用javascript获取PHP文件的输出并用javascript编辑你的内容。您可以从另一个PHP脚本获取数据，该脚本将在您需要时由javascript执行，但PHP脚本本身无法修改已加载页面的内容。

Again, there are many ways to do this. There are better ways to do this. But you should understand how something like this works, you can only get the output of the PHP file in javascript and edit your contents with javascript. You can get your data from another PHP script, which will be executed by javascript whenever you need it, but the PHP script itself can not modify the contents of your already loaded page.

使用此代码并假设alerts.php将 echo您有通知; ，< div id =modalcontent> < / div> 将更改为< div id =modalcontent>您有通知< / div> 然后是模态将被切换。此方法还可以确保仅在获取数据后打开模态，因此如果没有数据，模块就无法打开。

Using this code and assuming alerts.php will echo "you have a notification";, <div id="modalcontent"> </div> will change to <div id="modalcontent">you have a notification</div> and then the modal will be toggled. This method also ensures the modal is only opened after the data is fetched so it's impossible for the modal to open without the data inside.

这篇关于使用PHP和AJAX填充模态内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！