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），其中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

由于版本 3.3.0 中不推荐使用remote选项，并且将在版本 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>课程，以便更轻松地选择它们：

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

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

2 个答案: