如何使用php以自举模式显示远程文件中的动态内容? [英] How to display dynamical content from a remote file in bootstrap modal using php?

问题描述

我有一张下表，其中显示了一些信息并调用了一个远程模式框.

I have following table that shows some info and calls a remote modal box.

<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脚本将使用此信息运行并给我们一个输出将显示在模式中而无需刷新页面.

I would like to know how I could send the info that appears inside the cells (td) of any line (tr) to the remote file (remote.php) where a php script would run with this info and give us an output that would be showed in the modal without to refresh the page.

在此之前，我曾经使用过以下形式通过POST发送信息: (我仅在此处显示具有该形式的单元格.其余部分相同).

Before that I used to send by POST the info with a form: (I show here only the cell with the form. The rest is the same).

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

脚本运行后，将其重定向回页面并显示模式.这就是我要避免的事情.

After the script ran it was redirect back to the page and the modal was shown. That's what I would like to avoid.

直到现在，我都能够以模式显示远程文件的内容.但这是静态内容.有人知道如何使用这种模式结构将表的信息(变量)动态发送到远程文件吗?

Until now I'm able to show the content of the remote file in the modal. But it's a static content. Does anybody have an idea how can I send the info (variables) of the table to the remote file dynamically with this modal structure?

在此先感谢您的帮助！

推荐答案

由于remote选项在版本 3.3.0 中已弃用，在版本中将被删除4 ，则您必须自己管理远程内容的加载.我建议如下:

Due to the fact that the remote option is deprecated in version 3.3.0 and will be removed in version 4, you would have to manage loading of the remote content yourself. I would suggest the following:

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

然后，您将使用以下代码:

Then you would use the following code:

$(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');
         });
    });
});

演示

这篇关于如何使用php以自举模式显示远程文件中的动态内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！