How to display dynamical content from a remote file in bootstrap modal using php?

Question

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>

And here my modal code:

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

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.

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?

Many thanks in advance for your help!

Answer 1

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

DEMO

Answer 2

Give the <td>s class so it's easier to select them:

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

Then the click event handler for btn-info would be:

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