i want to pass multiple php variables to my modal. this how I am passing my variables but i also want to pass $idd and $gift variable to the modal
$gift ="plasma";
$idd = 4;
$track = "ty67890iuoj":
<li><a data-toggle="modal" data-target="#mySing<?php echo $track; ?>">View</a></li>
//modal
<div id="mySing<?php echo $track; ?>" 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="text-center">Order Details</h4>
</div>
<div class="modal-body">
<h3 class="text-center">Print Details</h3>
<div class="text-center">
<?php $notan = DataDB::getInstance()->select_from_where('order_printd','trackingnumber',$track);
foreach($notan as $ron):?>
<span style="padding-right: 5px;font-weight: 600;"><?php echo DataDB::getInstance()->get_name_from_id('name','print_type','print_type_id',$ron['print_type_id']);?></span>
<?php endforeach; ?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
I want to give extra data of my card in modal where I'm trying to access card id and their data in the modal of the same card.
but I tried the same PHP code into modal but it gave me data of every id in one modal just because I didn't specify the accurate id.
This is my card code:
<?php
$postquery="SELECT * FROM card";
$run=mysqli_query($db,$postquery);
?>
<section>
<div class="container1">
<?php
while($card=mysqli_fetch_assoc($run)){
?>
<div class="container__card">
<div class="container__card--content">
<img src="../images/<?=getcardimagesinfo($db,$card['id'])?>" style="width:100%;
height:100px !important"/>
<h3><?=$card['Name']?></h3>
<h3><?=$card['id']?></h3>
<button type="button" id="modalss" class="a modalss" data-bs-toggle="modal" data-bs-
target="#exampleModal">Start</button>
</div>
</div>
<?PHP
}
?>
</div>
This one is my modal
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-
hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-light" id="exampleModalLabel">Card full Information</h5>
<button type="button" class="btn-close" data-id data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body" style="color:white;">
<?PHP
while($card=mysqli_fetch_assoc($run)){
?>
<h6>Description: <?=$card['Description']?></h6>
<h6>Hint: <?=$card['hints']?></h6>
<?php
}
?>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Save</button>
</div>
</div>
</div>
</div>
First of all render all of your cards:
<?php
$postquery="SELECT * FROM card";
$run=mysqli_query($db,$postquery);
$allCards = [];
while($card=mysqli_fetch_assoc($run))
{
$allCards[] = $card;
}
?>
<section>
<div class="container1">
<?php
foreach($allCards as $card){
$cardId = $card['id'];
$img = getcardimagesinfo($db,$cardId);
?>
<div class="container__card">
<div class="container__card--content">
<img src="../images/<?=$img?>" style="width:100%; height:100px !important" alt="Image of card"/>
<h3><?=$card['Name']?></h3>
<h3><?=$card['id']?></h3>
<button id="card-<?=$cardId?>" type="button" class="a modalss"
onclick="updateModalContent(this)"
data-bs-toggle="modal" data-bs-target="#exampleModal">
Start
</button>
</div>
</div>
<?php } ?>
</div>
</section>
Then embed your modal at the bottom of your page content.
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-light" id="exampleModalLabel">Card full Information</h5>
<button type="button" class="btn-close" data-id data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body" style="color:white;">
<h6>Description: <span id="modal-card-description"></span></h6>
<h6>Hint: <span id="modal-card-hint"></span></h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary">Save</button>
</div>
</div>
</div>
</div>
Finally add JavaScript section at the bottom to handle updating data in the modal window:
<script>
// This contains all cards info as Json object in javascript when the page is loaded
var allCards = <?php echo json_encode($allCards);?>;
// Button click handler
function updateModalContent(clickedButton)
{
let cardId = clickedButton.id.split("-")[1];
let thisCardInfo = allCards[cardId];
document.getElementById('modal-card-description').innerHTML = thisCardInfo.description;
document.getElementById('modal-card-hints').innerHTML = thisCardInfo.hints;
// and so on ....
}
</script>
A PHP function loops through an array of objects and lists down their titles. I have a link that opens a modal. How can I dynamically load the modal header and body with regard to the object $r from the $results when I press details?
<?php
foreach ($results as $r) {
?>
<div class="row justify-content-center">
<div class="alert alert-success">
<strong>
<?php echo $r['_source']['title']; ?></strong> <span id="showSearchTerm"></span></br>
<a data-target="#myModal" data-toggle="modal" class="MainNavText" id="MainNavHelp" href="#myModal">Details</a>
</div>
</div>
<!-- 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> -->
<h2 class="modal-title">
<?php echo $r['_source']['title']; ?>
</h2>
</div>
<div class="modal-body">
<p>
<?php echo $r['_source']['body']; ?>
</p>
<p>
<?php echo $r['_source']['path']['real']; ?>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php
}
Take the information you need to fill up the modal from an Ajax call. After that you can add that content with:
$(".classname").append(information_from_Ajax_call_stored_in_variable);
so i have a while loop and i am fethcing the name and the description of them from my db
so when ever i click on one of the parts i want the modal to display the name of the item that i clicked on in the modal i hope this picture would describe it better
below is the code i have so far
at the moment when i click on the modal i get displayed the name of the item which is first on the list no matter where i click
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#mymodal">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>
You are not doing things the way you have to do. You are re-creating your mymodal for every iteration of your while loop which is not a better way to achieve what you want.
Follow these steps:
Create your mymodal outside of your while loop.
Pass the ID of current row to a javascript function and populate the data of that id using javascript.
I have set the things which needs to be done. Try the following code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--- display table header row-->
<table style="width:100%">
<tr>
<th>name</th>
<th>description</th>
<th>Action</th>
</tr>
<?php
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description'];
$id = $row['id']; // I am assuming that your table has auto incremented primary key column by the name of id, if not then replace that by $row['your_id_column']
?>
<!--- desplay the data in a table row -->
<tr>
<td id="<?php echo "name_".$id; ?>"><?php echo $name; ?></td>
<td id="<?php echo "description_".$id; ?>"><?php echo $description ; ?></td>
<td><div href="#" data-toggle="modal" data-target="#mymodal" onClick="showModal(<?php echo $id ; ?>)">Edit</div></td>
</tr>
<?php } ?>
</table>
<!--- Your 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">Modal Header</h4>
</div>
<div class="modal-body">
<p id="name"></p> <!--- name will be shown here-->
<p id="description"></p><!--- description will be shown here-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
function showModal(id)
{
// setting the values of clicked item in the bootstrap Modal
$("#name").text($("#name_"+id).text());
$("#description").text($("#description_"+id).text());
}
</script>
Looks like you are not serializing the modals... If you wanted to do things that way your code should be something like;
<!-- language-all: lang-html -->
while($row = mysqli_fetch_assoc($result)) {
$procuct_id = $row['ID'];
$name = $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#mymodal_<?php echo $procuct_id;?>">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<div id="mymodal_<?php echo $procuct_id;?>" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php }
<--
A Better way to do it would be to write a javascript function to show the generic modal window, then run an ajax call to load your info into the "modal-body" div. You would have to pass a unique id to the call in order to have your ajax script hit the db and get the info to display.
It's been almost 4 years but I'm writing for everyone; change data-target(id) as row id.
edited code:
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#<?php echo $row['id']; ?>">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<div id="<?php echo $row['id']; ?>" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>
I have a PHP loop that renders results from a Database:
<?php
foreach ($results as $result){
$job_numb = $result['job_numb'];
$job_name = $result['job_name'];
$comments = $result['comments'];
?>
<tr>
<td><?php echo "$job_numb";?> </td>
<td><?php echo "$job_name";?></td>
<td> <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#Comments-<?php echo $job_numb;?>">Comments</button>
<!-- Modal -->
<div id="Comments-<?php echo $job_numb;?>" 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">Comments for <?php echo "$job_name" . "$job_numb";?></h4>
</div>
<div class="modal-body">
<?php echo "$job_name";?>
<?php echo "$comments";?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
<td>Edit Record</td>
</tr>
<?php
}
?>
The Data target for the modal cannot be a STATIC ID because then it's repeating IDs on the same page - so you will just repeat the same information as the first instance of the ID.
What I am after is to make sure the ID is always different for as many records as there are. I have seen the code before, but I cannot find it now. What am I missing?
Create a unique ID using <?php echo and a unique ID:
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#Comments-<?php echo $job_numb;?>">Comments</button>
<div id="Comments-<?php echo $job_numb;?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Comments for <?php echo "$job_name" . " | " . "$job_numb";?></h4>
</div>
<div class="modal-body">
<?php echo "$comments";?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
Using this, I was able to pass all of that dynamic row's specific data to the modal without ID conflicts. I hope this is useful to others seeking out the answer.
i am making a function is when customer click the quickview button it will be open the modal have a infomation about that product, but i don't know how to do this, i try some method but not working, so please help me.
This is my view :
<div class="row">
<h4>Feauture Product</h4>
</div>
<form method="post">
<div class="row">
<div class="product">
<?php foreach ($infolist as $info_key){ ?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://wingsacessorios.com.br/public/img/vertical/img-home05.jpg" class="img-responsive">
<div class="caption">
<h5 class="text-justify">Name product: <?php echo $info_key->name; ?></h5>
<p class="text-justify">Price: <?php echo $info_key->price.' VNĐ'; ?></p>
<p class="text-center"> </i> Buy Now<i class="fa fa-eye" aria-hidden="true"></i> Quick View</p>
</div>
</div>
</div>
<?php }?>
</div>
<!-- Small modal alert when click add cart -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header" style="padding:5px 10px 5px 10px;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel" style="background-color:transparent;color:#000000;">Alert from website !</h4>
</div>
<div class="modal-body">
<h5>Added product to your cart!</h5>
</div>
</div>
</div>
</div>
<!-- Modal quickview -->
<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">Modal title</h4>
</div>
<div class="modal-body">
</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>
if i put modal quickview code in for each loop it just display infomation of first product
To open what you have above you'll need to open the modal with
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
pay special attention to the 'data-target'. that must match the ID of your modal div:
<div class="modal fade" id="myModal"... <---
If you have multiple products on the same page your best bet will be to generate modals programmatically with Bootstrap JS Modal.js plugin
http://getbootstrap.com/javascript/#modals
edit
This is one way to do what I believe you're looking for. I may have missed a variable echo, but the basics are there.
<?php foreach ($infolist as $info_key): ?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://wingsacessorios.com.br/public/img/vertical/img-home05.jpg" class="img-responsive">
<div class="caption">
<h5 class="text-justify">Name product: some product</h5>
<p class="text-justify">Price: 12 VND</p>
<p class="text-center"> </i> Buy Now <i class="fa fa-eye" aria-hidden="true"></i> Quick View</p>
</div>
</div>
</div>
<!-- Small modal alert when click add cart -->
<div class="modal fade bs-example-modal-sm" id="cartModal<?php echo $info_key->id; ?>" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header" style="padding:5px 10px 5px 10px;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel" style="background-color:transparent;color:#000000;">Alert from website !</h4>
</div>
<div class="modal-body">
<h5>Added product <?php echo $info_key->id; ?> to your cart!</h5>
</div>
</div>
</div>
</div>
<!-- Modal quickview -->
<div class="modal fade" id="myModal<?php echo $info_key->id; ?>" 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">
<p>Product <?php echo $info_key->id; ?></p>
</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>
<?php endforeach ?>