Bootstrap Modal in a While Loop - javascript

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.

Related

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 content not showing in Firefox or Safari, Phone aswell

I am using the following code to create a boostrap modal in Wordpress:
<!-- slider -->
<a id="osta" class="anchor"></a>
<div id="slider-section" class="slider-section baas-slider">
<div class="wide-grid gray-back">
<div class="inner-grid">
<div class="sliders">
<?php if( have_rows('b-slider') ):
$counter2 = 1;
while ( have_rows('b-slider') ) : the_row(); ?>
<div class="b-slide">
<div class="button-baas">
<button data-toggle="modal" data-target="#serviceModal<?php echo $counter2; ?>"><?php the_sub_field('b-price'); ?></button>
</div>
</div>
<?php endwhile; $counter2++; endif; ?>
</div>
</div><!-- wide-back -->
</div><!-- slider section -->
<!-- modal -->
<?php if( have_rows('modal') ):
$counter3 = 1;
while ( have_rows('modal') ) : the_row(); ?>
<div class="modal" id="serviceModal<?php echo $counter3; ?>" tabindex="-1" role="dialog" aria-labelledby="serviceModal<?php echo $counter3; ?>Label" aria-hidden="true">
<div class="helper">
<div class="modal-dialog wide-grid">
<div class="modal-controls">
<div class="btn-next">
<span class="ion-chevron-right"></span>
</div>
<div class="btn-prev">
<span class="ion-chevron-left"></span>
</div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ion-close"></span></button>
<div class="modal-content">
<div class="modal-body content-inner">
<div class="flexing">
<div class="flex">
<?php the_sub_field('modal-1'); ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; $counter3++; endif; ?>
<!-- modal -->
For some reason I only see the backdrop of the modal when I open it in Firefox, Safari, android or iOS. Chrome works fine. What could be causing this?
View site here: http://no11.ee/klienditugi/kliendibaas/#osta (click on the price button)
Fixed by moving the modal to footer.php before the </body> tag. Page editing now under the 'Options' page with ACF.

Ajax call returns same result

I have a jquery modal button, where I want to display information from my database.
I have a field in the database where I want everything to be identified by it is called "number"
The modal button is displayed in a table which is already being looped from a SQL query displaying all entries
while ($row = getarray($res)){
<tbody>
<tr>
<td> <? $row["state"] ?> </td>
<td><? $row["number"] ?></td>
<td>
<button type="button" class="btn btn-primary" onclick="detailsmodal(<?
$row["number"])">Description</button>
</td>
</tr>
<!-- Modal Button -->
<button type ="button" class="btn btn-primary" onclick="detailsmodal(<?= $row['number']; ?>)>Modal Button</button>
<!-- Code for modal -->
<?php
$number =$_POST["number"];
$number =(int)$number;
$modalsql = myquery($dbvariable,"SELECT * FROM myTable WHERE Number = '$number' ");
$result2 = myfunction_fetch_array($modalsql);
ob_start();
?>
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="closeModal()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> <?= $result2['number']?></h4>
</div>
<div class="modal-body">
<p><strong>Field 1:</strong><?= $result2['number']?> </p>
<p><strong>Field 2:</strong><?= $result2['field_2']?> </p>
<p><strong>Field 3</strong><?= $result2['field_3']?> </p>
<p><strong>Field 4:</strong><?= $result2['field_4']?> </p>
<p><strong>Field 5:</strong><?= $result2['field_5']?></p>
<p><strong>Field 6:</strong><?= $result2['field_6']?> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="closeModal()">Close</button>
</div>
</div>
</div>
</div>
<?php
ob_get_clean();
?>
<!-- Script for the modal-->
<script>
function detailsmodal(number){
var data = {"number" : number};
jQuery.ajax({
url : "/page1/page2",
method : "post",
data : data,
success: function(){
jQuery("body").append(data);
jQuery("#myModal").modal("toggle");
},
error: function(){
alert("Something went wrong!");
}
});
}
</script>
Ideally, the information should be changed based on the different items that are being clicked. but it is staying the same.
Please try to use following code , there are so many typo mistakes you have in your code.
<?php while ($row = getarray($res)){ ?>
<tbody>
<tr>
<td> <? $row["state"] ?> </td>
<td><? $row["number"] ?></td>
<td>
<button type="button" class="btn btn-primary" onclick="detailsmodal(<?=
$row["number"]) ?>">Description</button>
</td>
</tr>
<!-- Modal Button -->
<button type ="button" class="btn btn-primary" onclick="detailsmodal(<?= $row['number']; ?>)">Modal Button</button>
<!-- Code for modal -->
<?php
$number =$_POST["number"];
$number =(int)$number;
$modalsql = myquery($dbvariable,"SELECT * FROM myTable WHERE Number = '".$number."' ");
$result2 = myfunction_fetch_array($modalsql);
ob_start();
?>
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="closeModal()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> <?= $result2['number']?></h4>
</div>
<div class="modal-body">
<p><strong>Field 1:</strong><?= $result2['number']?> </p>
<p><strong>Field 2:</strong><?= $result2['field_2']?> </p>
<p><strong>Field 3</strong><?= $result2['field_3']?> </p>
<p><strong>Field 4:</strong><?= $result2['field_4']?> </p>
<p><strong>Field 5:</strong><?= $result2['field_5']?></p>
<p><strong>Field 6:</strong><?= $result2['field_6']?> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="closeModal()">Close</button>
</div>
</div>
</div>
</div>
<?php
ob_get_clean();
?>
<!-- Script for the modal-->
<script>
function detailsmodal(number){
var data = {"number" : number};
jQuery.ajax({
url : "/page1/page2",
method : "post",
data : data,
success: function(){
jQuery("body").append(data);
jQuery("#myModal").modal("toggle");
},
error: function(){
alert("Something went wrong!");
}
});
}
</script>

Show data based of selected id on modal popup window after click a button php mysql

On my website, when the button is clicked, it will prompt to a popup window. Im using the modal popup window. My problem is, I cant get the right data that being retrieved based on the id of the button. Below is my code:
The html table:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
The fam_id is the primary key.
Then, below is the code for modal popup window
<!-- Modal -->
<form id="form1" method="post">
<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 class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
Moreover, Im doing them in one file. In conclusion, it is like below:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
<!-- Modal -->
<form id="form1" method="post">
<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 class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</td>
</tr>
<?php
}
?>
</tbody>
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter; $counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td>
<center>
<a class="modalLink" href="#myModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $ser["fam_id"]; ?>" data-addr="<?php echo $ser['fam_add']; ?>" data-phone="<?php echo $ser['fam_phone']; ?>" data-name="<?php echo $ser['fam_name']; ?>">
<button class="btn btn-primary btn-sm">
Edit Attendance Status
</button>
</a>
</center>
Place this code in footer.php or end of this page.
<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>
</div>
</div>
Call your 'somepage.php' (Separate page.Where modal-body is present) through ajax. Place this <script></script> in your JS file.
<script>
$('.modalLink').click(function(){
var famID=$(this).attr('data-id');
var famAddr=$(this).attr('data-addr');
var famPhone=$(this).attr('data-phone');
var famName=$(this).attr('data-name');
$.ajax({url:"somepage.php?famID="+famID+"&famAddr="+famAddr+"&famPhone="+famPhone+"&famName="+famName,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
somepage.php
Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)
<?
$famID=$_GET['famID'];
$famAddr=$_GET['famAddr'];
$famPhone=$_GET['famPhone'];
$famName=$_GET['famName'];
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $famName;?></h4>
</div>
<div class="modal-body">
<form id="form1" method="post">
<b>Details</b>
<hr></hr>
Address: <p><?php echo $famAddr;?></p>
Phone_num: <p><?php echo $famPhone;?></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

Categories