How to pass a GET variable in Bootstrap Modal? - php

Question

I've a problem with my code. I want to pass a PHP variable to bootstrap modal.
Here's my code :
My link to open modal :
<td><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#modal-user" href="userDetails.php?id_user=<?= $rel['id_user'] ;?>"><?= $rel['id_user'] ;?></a></td>
My modal code :
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-user" aria-hidden="true" id="modal-user">
<div class="modal-dialog modal-lg">
<?php
include('userDetails.php');
?>
</div>
</div>
And the userDetails.php code :
<?php
require 'connect.php';
if (isset($_GET['id_user']) && !empty($_GET['id_user'])) {
$idUser = $_GET['id_user'];
}
$sql = "SELECT * FROM users WHERE id_user=" .$bdd->quote($idUser);
$query = $bdd->query($sql);
$userDetails = $query->fetchAll(PDO::FETCH_ASSOC);
?>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Infos</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php
foreach($userDetails as $details) {
?>
<p><?= $details['name'] ?></p>
<p><?= $details['firstname'] ?></p>
<?php
}
?>
</div>
</div>
Also, I've this jQuery code :
<script>
$( document ).ready(function() {
$('#modal-user').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
});
</script>
I've looking other posts and normaly, everything must be ok but I've an error and I still don't know why...
Notice: Undefined variable: idUser in /Applications/MAMP/htdocs/directory/userDetails.php on line 10
Can you help me please ?

Answer 1

Bootstrap modal href is not calling your page when you click. Your page is already loaded when you include userDetails.php. So you can define the get before the include or pass the user id through GET variable.
So:
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-user" aria-hidden="true" id="modal-user">
<div class="modal-dialog modal-lg">
<?php
$_GET['id_user'] = $rel['id_user'];
include('userDetails.php');
?>
</div>
</div>
In a LOOP
If you have a loop and want to do it dynamically through the jQuery you can do the following:
Remove the bootstrap calls from your link, and add a trigger class modal-btn and make it like:
<a
class="btn btn-primary modal-btn btn-xs"
href="userDetails.php?id_user=<?= $rel['id_user'] ;?>"><?= $rel['id_user'] ;?>
</a>
Update your modal structure and remove the include():
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-user" aria-hidden="true" id="modal-user">
<div class="modal-dialog modal-lg">
<div class="modal-content"></div>
</div>
</div>
The jQuery should get the href property of the link and call the bootstrap modal function load and also force the modal to show
$(".modal-btn").on('click',function(e){ //trigger when link clicked
e.preventDefault();
$('#modal-user').modal('show'); //force modal to show
$('.modal-content').load( $(this).attr('href')); //load content from link's href
});
So your page userDetails.php will be loaded inside the modal, and you will need to remove the <div class="modal-content">...</div> from it to avoid duplication...