如何使用 php 在引导模式中显示来自远程文件的动态内容？

Question

我有下表显示一些信息并调用远程模态框。

<table>
    <tr>
        <td>ID</td>
        <td>Name</td>
        <td>Family Name</td>
        <td>Country</td>
        <td>OK</td>
    </tr>
    <tr>
        <td>01</td>
        <td>John</td>
        <td>Lennon</td>
        <td>UK</td>
        <td>
            <a class="btn btn-info" data-target="#myModal" data-toggle="modal" href="remote.php">OK</a>
        </td>
    </tr>
    <tr>
        <td>02</td>
        <td>Joey</td>
        <td>Ramone</td>
        <td>US</td>
        <td>
            <a class="btn btn-info" data-target="#myModal" data-toggle="modal" href="remote.php">OK</a>
        </td>
    </tr>
    <tr>
        <td>03</td>
        <td>Joe</td>
        <td>Satriani</td>
        <td>US</td>
        <td>
            <a class="btn btn-info" data-target="#myModal" data-toggle="modal" href="remote.php">OK</a>
        </td>
    </tr>
</table>

这里是我的模态代码：

<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

        </div> <!-- /.modal-content -->

    </div> <!-- /.modal-dialog -->

</div> 

<!-- /.Modal -->

我想知道如何将出现在任何行 (tr) 的单元格 (td) 内的信息发送到远程文件 (remote.php)，在该远程文件 (remote.php) 中，php 脚本将使用此信息运行并给我们一个无需刷新页面即可在模式中显示的输出。

在此之前，我曾经通过 POST 使用表单发送信息： （我这里只显示带有表格的单元格。其余的都是一样的）。

    <tr>
        <td> ... </td>
        <td>
            <form id="form" action="remote.php" method="POST">
                <input name="id" type="hidden" value="01" />
                <input name="name" type="hidden" value="Jonh" />
                <input name="family" type="hidden" value="Lennon" />
                <input name="country" type="hidden" value="UK" />
                <input type="submit" value="OK">
            </form>
        </td>
    </tr>

脚本运行后，它被重定向回页面并显示模式。这是我想避免的。

到目前为止，我能够在模态中显示远程文件的内容。但它是静态内容。有谁知道如何使用这种模态结构将表的信息（变量）动态发送到远程文件？

非常感谢您的帮助！

Answer 1

由于remote 选项在版本 3.3.0 中已弃用，并将在版本 4 中删除，因此您必须管理自己远程内容。我建议如下：

<tr>
    <td>03</td>
    <td>Joe</td>
    <td>Satriani</td>
    <td>US</td>
    <td>
        <a class="btn btn-info" data-modal="#myModal" data-href="remote.php">OK</a>
    </td>
</tr>

然后你会使用下面的代码：

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

Answer 2

提供<td>s 类，以便更容易选择：

<tr>
    <td class="id">01</td>
    <td class="name">John</td>
    <td class="family">Lennon</td>
    <td class="country">UK</td>
    <td>
        <a class="btn btn-info" data-target="#myModal" data-toggle="modal" href="remote.php">OK</a>
    </td>
</tr>

那么btn-info 的点击事件处理程序将是：

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("remote.php", post, function(html) {
     // display modal, set html here
  });
}