How to display dynamic content from a remote file in bootstrap modal using php?
I have the following table which shows some information and calls the mod's remote module.
<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 is 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 can send the information that appears inside the cells (td) of any line (tr) to a remote file (remote.php) where the php script will work with that information and give us the output to be shown in modal mode without refreshing the page.
Before that I used to POST the information with the form: (I'm only showing the cell with the form here. 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 running the script, it was redirected back to the page and the modal was shown. I would like to avoid this.
So far, I can show the contents of the remote file in modal format. But this is static content. Does anyone know how I can dynamically pass table information (variables) to a remote file using this modal structure?
Many thanks for your help!
source to share
Due to the fact that the parameter is remote
deprecated in the version 3.3.0and will be removed in the version 4, you will have to manage the loading of the removed 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 should 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');
});
});
});
source to share
Give a class <td>
to make it 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
});
}
source to share