如何使用php在bootstrap模式中显示远程文件的动态内容?
我有下表显示一些信息并调用远程模态框。
ID Name Family Name Country OK 01 John Lennon UK OK 02 Joey Ramone US OK 03 Joe Satriani US OK
在这里我的模态代码:
我想知道如何将任何行(tr)的单元格(td)中出现的信息发送到远程文件(https://stackoverflow.com/questions/27298630/how-to-display-dynamical-content-from-a-remote-file-in-bootstrap-modal-using-php/remote.php),其中php脚本将使用此信息运行并为我们提供输出在模态中显示而不刷新页面。
在此之前,我曾经通过POST发送信息的forms:(我这里只显示带有表格的单元格。其余部分相同)。
...
脚本运行后,它重定向回页面并显示模式。 这就是我想避免的。
到现在为止,我能够在模态中显示远程文件的内容。 但这是一个静态的内容。 有没有人知道如何使用这种模态结构动态地将表的信息(变量)发送到远程文件?
非常感谢您的帮助!
由于remote
选项在版本3.3.0中已弃用且将在版本4中删除,因此您必须自己管理远程内容的加载。 我建议如下:
03 Joe Satriani US OK
然后你将使用以下代码:
$(function() { $('tr > td > a.btn-info').on('click', function() { var data = $(this).closest('tr').find('>td:lt(4)'), modal = $(this).data('modal'); $.post( $(this).data('href'), { id: data.eq(0).text(), name: data.eq(1).text(), family_name: data.eq(2).text(), country: data.eq(3).text() }, function( data ) { //some processing ... if required $(modal).modal('show'); }); }); });
DEMO
给
类,以便更容易选择它们:
01 John Lennon UK OK
那么btn-info
的click事件处理程序将是:
function showModal(e) { e.preventDefault(); var fields = ["id", "name", "family", "country" ]; var post = {}; for(var i = 0; i < fields.length; i++) { post[fields[i] = $(this).closest('tr').find('td.' + fields[i]).text(); } $.post("https://stackoverflow.com/questions/27298630/how-to-display-dynamical-content-from-a-remote-file-in-bootstrap-modal-using-php/remote.php", post, function(html) { // display modal, set html here }); }