We Keep Coding

Get Data from Mysql in a modal Bootstrap 4.5 working w/ PHP and Jquery

I was inspired by the following source code:
https://github.com/felixivance/Bootstrap-Modal-with-Dynamic-MySQL-Data-using-Ajax-PHP
based on bootstrap 3.3.7 & jquery 3.2.1
My goal is to be able to use it with BTS 4.5 / jquery 3.5.1
Here is my code on the index page
<!-- get list -->
<tr>
<td><?php echo $row['beatid']." ".$row['beatname']; ?></td>
<td>
<button data-toggle="modal" data-target="#showBeat" data-id="<?php echo $row['beatid']; ?>" id="getBeat" class="btn btn-sm btn-info"><i class="glyphicon glyphicon-eye-open"></i> View</button>
</td>
</tr>
Here is the Modal code :
<!-- Modal -->
<div id="showBeat" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Your Listening</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div id="modal-loader" style="display: none; text-align: center;">
<img src="ajax-loader.gif">
</div>
<!-- content will be load here -->
<div id="dynamic-content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" datadismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
My JS/jquery code :
<script>
$(document).ready(function(){
$(document).on('click', '#getBeat', function(e){
var uid = $(this).data('id'); // it will get id of clicked row
$('#dynamic-content').html(''); // leave it blank before ajax call
$('#modal-loader').show(); // load ajax loader
$.ajax({
url: 'getData.php',
type: 'GET',
data: 'id='+uid,
dataType: 'html',
success: function(data){
$('#dynamic-content').html('');
$('#dynamic-content').html(data); // load response
$('#modal-loader').hide();
},
error: function(){
$('#dynamic-content').html('Something went wrong, Please try again...');
$('#modal-loader').hide();
}
})
});
});
</script>
And my PHP code dealing with the $ .ajax request :
if (isset($_GET['id'])) {
$id = intval($_GET['id']);
$connect = new PDO ("mysql:host=$servername;dbname=$dataname;charset=utf8", $user, $mdp);
$connect -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$getBeat = $connect -> prepare ("SELECT * FROM databasename WHERE dataid=$id");
$getBeat -> execute();
$rows=$getBeat->fetch();
?>
<div class="row">
<div class="col-xl-12"><img src="<?php echo $rows['data']; ?>" class="rounded mx-auto d-block"></div>
</div>
<div class="row">
<div class="col-xl-3" style="margin:5px;text-align: center;">
<audio src="../file/<?php echo $rows['data']; ?>" controls></audio>
</div>
</div>
<?php } ?>
When I click on my link the modal opens well, but it gets stuck on the loader image
But it does not display the data coming from the database!
I tried to adapt the base code with whatever information I found, but nothing helped.
Could you tell me where my error (s) is, thank you in advance

pass an item id to from card to modal

so i have a 3 cards that has its value taken from database
i want to get the id of the particular card that was clicked and send it to modal so i can echo it in the modal
i tried sending it to the button trigger as data-id=< ?php $card_id ?> but that doesn't seem to work
php & mysql codes to fetch from database
<div class="container">
<div class="title">
<h5><?php echo $card_id; ?></h5> <h1><?php echo $card_title; ?></h1>
<div class="body">
<?php echo $card_name; ?>
<button type="button" data-toggle="modal" data-target="#myModal" name="button" data></button>
</div>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<h1><?php echo $card_id; ?></h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

You could look into using Ajax for this.
Keep data-id="<?php echo $card_id; ?>" in your button.
Create a php page to process the ID to be echoed:
if ($_POST['cardid']) {
$id = $_POST['cardid'];
echo $id;
}
Use a modal event to push the ID to your modal's body using a class declaration:
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function(e){
var cardid = $(e.relatedTarget).data('id');
$.ajax({
type: 'post',
url: 'record.php',
data: 'cardid='+ cardid,
success: function(data){
$('.fetched-data').html(data);
}
});
});
});
Put the class declaration in your modal body where you want the ID to show:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<h1 class="fetched-data"></h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>

Only first button to open bootstrap model works in while loop

I am trying to make a forum, and a have made to open bootstrap modal when someone clicks on Reply Button, but that button is in while loop and modal opens only on first button in row.
This is while loop
$sql = $conn->prepare("SELECT * FROM forum_answers WHERE topicId = :id");
$sql->bindValue(":id", $id);
$sql->execute();
while($row = $sql->fetch(PDO::FETCH_ASSOC))
{
if($row['quote'] == "")
{
?>
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-6">
<b><?php echo $row['uid']; ?></b>
</div>
<div class="col-md-6 text-right">
<?php echo $row['date']; ?>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text"><?php echo $row['answer']; ?></p>
<a class="btn btn-primary" id="btnAddReply"><i class="fas fa-fw fa-reply"></i> Reply</a>
</div>
</div>
<?php
}
else
{
?>
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-6">
<b><?php echo $row['uid']; ?></b>
</div>
<div class="col-md-6 text-right">
<?php echo $row['date']; ?>
</div>
</div>
</div>
<div class="card-body">
<blockquote class="blockquote" style="background-color: #F8F8F8;"><?php echo $row['quote']; ?></blockquote>
<p class="card-text"><?php echo $row['answer']; ?></p>
<a class="btn btn-primary" id="btnAddReply"><i class="fas fa-fw fa-reply"></i> Reply</a>
</div>
</div>
<?php
}
}
This is a modal.
<div class="modal fade" id="addReply" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add Reply</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Quote</label>
<?php
$sql = $conn->prepare("SELECT answer FROM forum_answers WHERE id=:id");
$sql->bindValue(":id", $id);
$sql->execute();
while($row = $sql->fetch(PDO::FETCH_ASSOC))
{
?>
<textarea class="form-control rounded-0" name="quote" id="exampleFormControlTextarea1" rows="4" disabled><?php echo $row['answer']; ?></textarea>
<?php
}
?>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Answer</label>
<textarea class="form-control" id="desc1" cols="40" rows="3" name="answer" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" name="submit3" value="Reply">
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#btnAddReply").click(function() {
$("#addReply").modal();
});
});
</script>
I don't know how to use class instead id in bootstrap, I am not so great with javascript.

if you have more than one id with the same name it by default select the first one with the name when js on click event trigger in your case.
you can use jQuery like operator to trigger on click event for all the ids with name btnAddReply
<script>
$(document).ready(function() {
$("[id^=btnAddReply]").click(function() {
$("#addReply").modal();
});
});
</script>
but a clean and better solution is to use a common class. instead of id in your HTML give the class with name btnAddReply
<script>
$(document).ready(function() {
$(".btnAddReply").click(function() {
$("#addReply").modal();
});
});
</script>

How to pass data for Bootstraps modal

Trying to pass the value of my button to my bootstrap modal and modal is not receiving any data. The button has its data inside but using the same variable for the modal is not working. Here is my code.
<?PHP
$query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="container post" style="border: 1px solid black;">
<h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname']; ?></h4>
<p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
<p class="post"><?PHP echo $row['postDetail'];?></p>
<button data-toggle="modal" data-target="#myModal" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
<Br>
</div>
<?PHP
?>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?PHP echo $row["postID"]; ?></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal content-->
</div>
</div>
<!-- Modal -->
<?PHP
}
}
?>
The modal is showing but the <?PHP echo $row["postID"]; ?> is showing me only the last row of the database.

your $row is effective in while loop.
if yout want to use only one modal and reuse, you will need to use ajax when click the button.
or move modal section to inside while loop.
pair modal div's id and button's data-target.
each modal must has different id. in your case, postID will be good identifier.
<?PHP
$query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="container post" style="border: 1px solid black;">
<h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname']; ?></h4>
<p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
<p class="post"><?PHP echo $row['postDetail'];?></p>
<button data-toggle="modal" data-target="#myModal_<?PHP echo $row['postID']; ?>" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
<Br>
</div>
<!-- Modal -->
<div id="myModal_<?PHP echo $row['postID']; ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?PHP echo $row["postID"]; ?></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal content-->
</div>
</div>
<!-- Modal -->
<?PHP
}
}
?>

Try this code:
<?PHP
$query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="container post" style="border: 1px solid black;">
<h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname']; ?></h4>
<p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
<p class="post"><?PHP echo $row['postDetail'];?></p>
<button data-toggle="modal" data-target="#myModal" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
<Br>
</div>
<?PHP
}
}
?>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?PHP echo $_POST["postID"]; ?></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal content-->
</div>
</div>
<!-- Modal -->

Try to change your button to this:
<button class="btn btn-lg btn-block btn-my-button" name="postDetail" data-title="<?php echo $row['postID']; ?>"><?php echo $row['postID']; ?></button>
just put the value that you need with the data-* in the button then add jquery with the class of your button.
jquery:
$('.btn-my-button').click(function(){
$('#myModal .modal-title').text($(this).data('title'));
$('#myModal').modal('show');
});

Bootstrap Modal in a While Loop

I'm using Advanced Custom Fields plugin with Wordpress and Bootstrap for style.
I'm having problems with a while loop to show some custom posts.
Just the first post content modal-body "
<?php the_field('desc_completa_aula'); ?>
" is showing. I want show all modal-bodies separate, only when click each one.
I tried clean the jquery but no sucess. Could you guys help me?
<?php
// args
$args = array(
'posts_per_page' => 10,
'post_type' => 'post',
'category_name' => 'aula-avulsa',
'orderby' => 'date',
'order' => 'DESC'
);
// query
$the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()): ?>
<div class="row" style="text-align: center;">
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class="col-lg-4 col-md-4 col-xs-6">
<p class="subtitle-lession"><?php the_field('aula_ou_curso'); ?></p>
<h1 class="w-blog-entry-title-h" style=""><?php the_field('titulo_aula'); ?></h1>
<p><strong><i class="fa fa-calendar"></i> Data</strong><br/> <?php the_field('data_aula'); ?></p>
<p><strong><i class="fa fa-clock-o"></i> Horário</strong><br/> <?php the_field('horário_aula'); ?></p>
<p class="description-lession"><strong><i class="fa fa-pencil-square-o"></i> Descrição</strong><br/>
<?php the_field('desc_pequena_aula'); ?>
</p>
<a href="#contato">
<button class="btn-lession">Fazer Inscrição</button>
</a>
<!-- Button trigger modal -->
<button type="button" class="btn-lession-info" data-toggle="modal" data-target="#myModal" title="<?php the_field('desc_completa_aula'); ?>">
Saiba mais
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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"><?php the_field('titulo_aula'); ?></h4>
</div>
<div class="modal-body">
<p style="color: #000"> <?php the_field('desc_completa_aula'); ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php wp_reset_query(); // Restore global post data stomped by the_post(). ?>
I was using this javascript code:
<script type="text/javascript">
$(document).ready(function() {
$('.modal').on('hidden.bs.modal', function(e)
{
$(this).removeData();
}) ;
});
</script>

I think that your problem is that you have the same modal myModal for all your posts. You need to introduce a variable i that increases with each loop. This way you can distinguish between each modal.