How to pass $_GET variables from a link to a bootstrapmodal?
Snippet from my HTML code.
<td><span data-placement="top" data-toggle="tooltip" title="Show"><a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-book-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>
The modual that are beeing opened when link is clicked:
<!-- Modal -->
<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<?php var_dump($_GET)?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Is there a proper way to pass my id into the modal?
The simple solution to pass id, fetch records from database against passed id and show in modal is;
Simple Solution
Modal Call button
<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" href="file.php?id=<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>
Modal HTML
Put following modal HTML outside the while loop in page where the above call button is located (preferable at bottom of page)
<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
//Content Will show Here
</div>
</div>
</div>
Now Create a PHP file and name it file.php
This file is called with modal call button href="file.php?id=<?php echo $obj->id;?>"
<?php
//Include database connection here
$Id = $_GET["id"]; //escape the string if you like
// Run the Query
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><center>Heading</center></h4>
</div>
<div class="modal-body">
//Show records fetched from database against $Id
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
To remove the data inside modal or in other words to refresh the modal when open next records without page refresh, use following script
Put it after jQuery and Bootstrap library (Remember jQuery & Bootstrap libraries always come first)
<script>
$( document ).ready(function() {
$('#editBox').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
});
</script>
Alternate Solution with Ajax and Bootstrap Modal Event Listener
In Modal Call button replace href="file.php?id=<?php echo $obj->id;?> with data attribute data-id="<?php echo $obj->id;?>" so we pass the id of row to modal using bootstrap modal event
<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>
Modal HTML
Put following modal HTML outside the while loop in page where the above call button is located (preferable at bottom of page)
<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><center>Heading</center></h4>
</div>
<div class="modal-body">
<div class="form-data"></div> //Here Will show the Data
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Now Add following script in same page;
<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() {
$('#myModal').on('show.bs.modal', function (e) { //Modal Event
var id = $(e.relatedTarget).data('id'); //Fetch id from modal trigger button
$.ajax({
type : 'post',
url : 'file.php', //Here you will fetch records
data : 'post_id='+ id, //Pass $id
success : function(data){
$('.form-data').html(data);//Show fetched data from database
}
});
});
});
</script>
Now Create a PHP file and name it file.php (same as use in Ajax Method)
<?php
//Include database connection here
if($_POST['id']) {
$id = $_POST['id'];
// Run the Query
// Fetch Records
// Echo the data you want to show in modal
}
?>
In this solution, you don't need following script to remove the data inside modal or in other words to refresh the modal
$('#editBox').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
Alternate Solution with Ajax and jQuery Click function
Modal Call button
<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" class="open-modal" href="" id="<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>
Put following modal HTML in page where above modal call button located (preferable at bottom of page)
<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="form-data"></div> //Here Will show the Data
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
following Ajax method code in same page where Modal HTML & Modal call button located.
<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() {
$('.open-modal').click(function(){
var id = $(this).attr('id');
$.ajax({
type : 'post',
url : 'file.php', //Here you should run query to fetch records
data : 'post_id='+ id, //Here pass id via
success : function(data){
$('#editBox').show('show'); //Show Modal
$('.form-data').html(data); //Show Data
}
});
});
});
</script>
And the PHP file file.php will be same as the above solution with bootstrap modal event
Pass On page information to Modal
In some cases, only need to pass (display) minimal information to modal which already available on page, can be done with just bootstrap modal event without Ajax Method with data-attributes
<td>
<span data-placement="top" data-toggle="tooltip" title="Show">
<a data-book-id="<?php echo $obj->id;?>" data-name="<?php echo $obj->name;?>" data-email="<?php echo $obj->email;?>" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</span>
</td>
Modal Event
$(document).ready(function(){
$('#editBox').on('show.bs.modal', function (e) {
var bookid = $(e.relatedTarget).data('book-id');
var name = $(e.relatedTarget).data('name');
var email = $(e.relatedTarget).data('email');
//Can pass as many onpage values or information to modal
});
});