使用 PHP 和 AJAX 填充模态内容?

2024-01-12

我希望用户能够单击表格,并根据他们单击的行 - 它将使用与该行(MYSQL 查询)相关的内容填充模式,并打开模式。

我尝试这样做: - 加载表格内容 - 使用 jQuery 监听表被点击的时间 - 使用 AJAX 将单击的行信息发布到 PHP 文件 - 使用行信息执行 MYSQL 查询 - 用收集的内容填充模式 - 打开模式

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

提前致谢!

EDIT:

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

Modal

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

我知道获取 ID 的传递和内容的获取是有效的,但内容不会传递给 ID,因为在脚本初始化全局变量之前加载模式。


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

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

然后,假设这个按钮应该打开并用数据填充我的模式

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

openModal() 看起来像这样

$.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 脚本本身无法修改您已加载页面的内容。

使用此代码并假设alerts.php将echo "you have a notification";, <div id="modalcontent"> </div>将更改为<div id="modalcontent">you have a notification</div>然后模式将被切换。此方法还确保模式仅打开after数据已被获取,因此如果没有内部数据,模式就不可能打开。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 PHP 和 AJAX 填充模态内容? 的相关文章

  • 类型错误:app.makeSingleInstance 不是函数

    从 Electron v2 0 3 升级到最新版本 v5 0 1 当我尝试运行电子时 出现以下错误 TypeError app makeSingleInstance is not a function 我相信这是因为 api 已经改变了 我
  • 在 React 中使用 document.querySelector?我应该使用 refs 代替吗?如何?

    我现在正在 React 中构建一个轮播 滚动到我正在使用的各个幻灯片document querySelector像这样 useEffect gt document querySelector slide activeSlide scroll
  • 浏览器关闭后从数据库中删除

    我正在开发一个电子商务应用程序 但问题是 当用户将产品添加到购物车并在订购前关闭浏览器时 购物车会带走所有产品 所有购物车项目都保存在表中 如果用户关闭浏览器而不订购 我只想刷新购物车 您可以使用 Javascript 事件捕获浏览器关闭并
  • 通过 Scriptaculous 拖放防止 JavaScript 点击事件

    我的页面上有一些可拖动的元素 这些相同的元素有一个导航到另一个页面的点击事件 我试图确定在用户拖动时防止触发单击事件的最佳方法 但如果不拖动则仍然允许单击事件 有人对实现这一目标的最佳方法有任何想法吗 我通过使用类似以下内容解决了这个问题
  • Zend Framework 中数据库驱动路由的教程?

    我正在开发一个需要使用数据库驱动的 MVC 方案的项目 其中控制器和视图的路由通过单个数据库表进行控制 但是 我无法找到任何使用当前版本的框架演示这一点的教程 它们似乎都是在几个版本之前编写的 我想知道是否有人用更新的版本做过类似的事情框架
  • 在 contenteditable div 中的插入符处插入 html

    我有一个带有 contenteditable 设置的 div 并且我正在使用 jquery 捕获按键 以在按下 Enter 键时调用 PreventDefault 如同这个问题 https stackoverflow com questio
  • 如何正确转义 CSV 中的双引号?

    我的 CSV 中有这样一行 Samsung U600 24 10000003409 1 10000003427 旁边引用24用于表示英寸 而该引号旁边的引号则关闭该字段 我正在读这行fgetcsv但解析器犯了一个错误 并将该值读取为 Sam
  • 没有jquery的动画,左右滑动

    我试图在显示 div 时将其向左滑动 在隐藏它时将其向右滑动 但我不想使用 jQuery 有没有一种方法可以在不使用javascript库的情况下制作简单的动画并支持IE7和IE8 这是我的显示 隐藏js function showHide
  • 检测 html 元素内的用户选择

    如何检测用户选择 用鼠标突出显示 是否在某个元素内 某个元素的子元素 Example div sdfsdf div some span content span div sdfsd div 伪代码 if window getSelectio
  • 如何使用Javascript统计通过ajax返回的
  • 的数量?
  • 我有一个 ajax 代码 它将列表项返回为 li one li li Two li 每次都会返回不同数量的 li 的 我想查一下数量 li li 它返回 如何使用 JavaScript 检查它 给你 returnedHTML find li
  • 如何确定 n 高数字金字塔中的最大路线成本

    我有一个像这样的数字金字塔 7 4 8 1 8 9 2 4 6 7 4 6 7 4 9 4 9 7 3 8 8 routes 32 每个数字都按其系列中的强大程度进行索引 0 9 gt 1 1 8 gt 5 2 8 gt 4 3 7 gt
  • 在带有 OR 条件的 LEFT JOIN 中使用索引

    考虑以下查询 SELECT FROM table1 LEFT JOIN table2 ON table2 some primary key table1 some primary key LEFT JOIN table3 ON table3
  • 重新排列mysql中的主键

    从MySQL表中删除一些行后如何重新排列主键列值 例如 一个包含 4 行数据的表 主键值为 1 2 3 4 当删除第2行和第3行时 第4行的键值变为2 请帮助我找到解决方案 为什么要这样做 你不需要重新排列您的密钥 因为它只是记录的数字和标
  • 重定向后丢失会话变量

    用户填写用户名和密码 如果正确 页面会加载一些信息 例如user id到会话变量 该脚本制作了一个header Location 重定向 不知何故 下一页无法识别会话 怎么会 重定向到同一个域 并且所有页面都有session start 我
  • 将 div 移动到 dom 中的其他位置

    以下代码被动态插入到 DOM 中 但是 我想将 div example 从原来的位置移动并将其添加到 wrapper 前面 我如何使用 jQuery 来实现这一目标 div div div div div div div div I tri
  • 当错误较多时,Laravel 不会显示错误。这是 Bug?

    重复的https github com laravel framework issues 31123 https github com laravel framework issues 31123 Laravel 版本 6 8 0 6 10
  • NESTJS AWS Lambda 和 Sequelize 连接池

    由于我已经给出了下面代码片段中提到的池参数 因此是否有必要在每次 lambda 调用后关闭连接 这个 aws lambda 函数应该每分钟触发一次 池参数仅足以关闭连接吗 export const databaseProviders pro
  • 通过 XMLHttpRequest 将数据从 JavaScript 发送到 PHP

    再会 我正在尝试将一段简单的数据从一个 php 文件 manage php 发送到另一个 view php 我无法通过表单发送数据 我想通过 JS 脚本发送数据 这是我的尝试 var read function id xmlhttp new
  • MySQL 命令输出在命令行客户端中太宽[重复]

    这个问题在这里已经有答案了 我在用mysql终端模拟器中的命令行客户端lxterminal在Ubuntu中 当我运行以下命令时 mysql gt select from routines where routine name simplep
  • 如何在二维数组中找到字符串?

    我有一个看起来像这样的数组 var array a b c d e f 我希望能够在数组中搜索字符串 d 并返回对应的值 c try function find str array for var i in array if array i

随机推荐

  • spring-context.xml 的位置

    当我在 tomcat 上运行应用程序时 spring context xml 文件位于 WEB inf spring context xml 还行吧 但是运行 junit 测试时 我必须向它提供 spring test context xm
  • Jquery 与原型 magento 冲突 - 我怎样才能分开?

    我似乎无法通过我的 Magento 网站将 jQuery 与 Prototype 分开 我已经使用更改的标签等在 JsFiddle 上工作了 但是当我将它添加到我的 magento 站点时 我不断收到未捕获的语法错误 页面位于http ww
  • C++ 中的接口继承

    我有以下类结构 class InterfaceA virtual void methodA 0 class ClassA public InterfaceA void methodA class InterfaceB public Inte
  • 使用 odp.net 和 C# 中的 OCI 连接到 Oracle

    我一直在阅读有关如何从 C win 应用程序连接到我的 Oracle 数据库的信息 但我一直 碰壁 我决定使用odp net和OCI 这样客户端计算机就不需要安装客户端 但我无法让它工作 我有一个小型测试应用程序 如下所示的代码 在我的解决
  • 试图找出 Windows Workflow 4.5 问题的根源

    我得到的错误是 工作流应用程序已中止 因为加载或 LoadRunnableInstance 操作引发异常 创建一个新的 WorkflowApplication 对象尝试加载另一个工作流实例 我正在使用 workflowapplication
  • Facebook API 获取好友相册对某些好友不起作用

    我正在使用以下 FQL 查询 select src src big from photo where aid in select aid from album where owner contactId and type profile 但
  • 获取 java.lang.NoClassDefFoundError: org/pdfbox/pdfparser/

    下面是我正在使用的代码 我提供了一个 pdf 文件和一个文本文件作为命令行的输入 import org pdfbox cos COSDocument import org pdfbox pdfparser PDFParser import
  • 在 Maven 中本地引用依赖项 jar

    在我的项目中 我使用的外部 jar 不存在于公司的 Maven 存储库中 所以我收到以下错误 Could not resolve dependencies for project Could not find artifact in htt
  • 加快 Spring Boot 启动时间

    我有一个 Spring Boot 应用程序 我添加了很多依赖项 不幸的是 看起来我需要所有这些依赖项 并且启动时间增加了很多 只是做一个SpringApplication run source args 需要 10 秒 虽然与 习惯 相比
  • Pandas:如何在python3中使用混合类型多索引的切片?

    正如我在这个部分相关的问题 https stackoverflow com questions 50097704 不可能再对混合类型序列进行排序 Python3 6 sorted foo bar 10 200 3 gt TypeError
  • 让Boost Dijkstra算法在到达目的节点时停止

    我正在使用 boost graph 及其 Dijkstra 实现 当有人使用Dijkstra算法时 可能是为了知道图中2个节点之间的最短路径 但是 由于您需要检查图中的所有节点以找到最短路径 通常 如 boost 算法 Dijkstra 会
  • 禁用应用程序内的 Linux 内存过量使用

    您可以通过以下方式调整系统范围内的内存过量使用策略sysctl https en wikipedia org wiki Sysctl调用 但是是否可以在进程本身内部针对每个进程调整此策略 我想让一个特定的实时进程永远不会使用过度使用 尽管系
  • 在 iOS 应用程序中加载网页

    如果我们加载一个网页 我们可以将其转发到 safari 但这会导致用户离开我们的应用程序 有什么方法可以让用户访问任何网页然后返回我们的应用程序 如果您想要 iOS7 之前的设备的某些浏览器类型功能 您可以使用此内联浏览器 http www
  • 使用枚举时错误 CS0246 找不到类型或命名空间名称

    单例脚本 public static ShipSingleton Instance get return instance private void Awake if instance null instance this Destroy
  • 使用 System.exit(0) 强制退出 Android 应用程序不起作用

    当我尝试通过覆盖 Android 设备后退按钮和 System exit 0 的功能来退出 Android 应用程序时 这不起作用 我有一个名为 LoginActivity 的活动和一个名为 Overview Activity 的活动 当我
  • WKWebView 支持哪些文件类型?

    UIWebView支持完整的文件类型列表 详见这个 Apple 技术问答文档 https developer apple com library ios qa qa1630 index html apple ref doc uid DTS4
  • 如何使用seaborn创建多线图?

    我正在尝试使用 Seaborn 使我的绘图在视觉上比 matplotlib 更好 我有一个数据集 其中有一列 年份 我想在 X 轴上绘制它 并使用不同颜色的线在 Y 轴上绘制 4 列 A B C D 我试图使用 sns lineplot 方
  • 模拟器:错误:检测到挂起线程“Qt 事件循环”

    当我运行 API 27 模拟器时 我得到 错误 检测到挂起线程 Qt 事件循环 我有一张显示错误的图像 正如评论中所讨论的 这是 Android 模拟器中的一个错误该问题已在 27 1 10 版本中修复 https developer an
  • 如何使用 arcore 和 sceneform 使用按钮从场景中删除单个可渲染对象?

    我正在尝试制作一个按钮 在选择 3D 模型后将其从场景中删除 我知道删除 3d 对象的方法是使用anchor detach 我可以使用 node select 选择单个模型 但是 我不确定选择节点后如何访问锚点 FloatingAction
  • 使用 PHP 和 AJAX 填充模态内容?

    我希望用户能够单击表格 并根据他们单击的行 它将使用与该行 MYSQL 查询 相关的内容填充模式 并打开模式 我尝试这样做 加载表格内容 使用 jQuery 监听表被点击的时间 使用 AJAX 将单击的行信息发布到 PHP 文件 使用行信息