Print information in Modal (of Bootstrap) - php

In my search input give me result about keywords like below:
![While of result's] http://i.stack.imgur.com/7VaWl.png
and my target is get more information by open Modal if click any result:
http://i.stack.imgur.com/qU36A.png
I want to select more information from mysql on open model. How can I do this?
Below is my code:
<body>
<h1>חפש פריט</h1>
<br>
<form action="search.php" method="post">
<input type="text" name="keywords" class="form-control" style="width: 250px;margin-left:auto;margin-right:auto;display:inline;" placeholder="הקלד שם של פריט..." /><button type="submit" name="search" class="btn btn-primary">חפש</button>
</form>
<br>
<?php
$keywords = $_POST['keywords'];
$ok = 1;
if(isset($_POST['search'])) {
if(empty($keywords)) {
echo '<div class="alert alert-danger fade in">
×
<strong>שגיאה:</strong> הקלד מילות חיפוש
</div>';
$ok = 0;
}
if(!empty($keywords) && !preg_match("/[A-Za-z0-9א-ת\.\,\_\- ]/", $keywords)) {
echo '<div class="alert alert-danger fade in">
×
<strong>שגיאה:</strong> הזנת תווים לא חוקיים
</div>';
$ok = 0;
}
else if($ok !== 0) {
$search_sql = mysql_query("SELECT * FROM `list` WHERE `Name` LIKE '%$keywords%';");
if(mysql_num_rows($search_sql) < 1) {
$status = "
<div class='alert alert-warning'>
<strong>לא מצאנו</strong> תוצאות עבור חיפוש זה ($keywords)
</div>
";
}
echo '<div class="container">
<h2>תוצאות חיפוש</h2>
<br />
'.$status.'';
while($result = mysql_fetch_array($search_sql)) {
printf('
<div class="well" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">%s</div><br />
<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>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
', $result['Name']);
}
echo '</div>';
}
}
?>
EDIT: Now I am can select the information form the mysql but only with while of "$i"..
with this:
echo '<div class="container">
<h2>תוצאות חיפוש</h2>
<br />
'.$status.'';
$i = 1;
while($result = mysql_fetch_array($search_sql) and $i < 1000) {
printf('
<div class="well" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal'.$i.'">%s</div><br />
<div id="myModal'.$i.'" 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">'.$result['Name'].'</h4>
</div>
<div class="modal-body">
<p>'.$result["Description"].'</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">סגור</button> <span style="float:left;">'.$result["Date"].'</span>
</div>
</div>
</div>
</div>
', $result['Name']);
}
But, it is not working good. If I'm click on any-result the modal is open with same result:
i.stack.imgur.com/SKrka.png
So, I want anything more proffesional for this..

Does not matter,
I am just replace the i var to result-id from the mysql
Replace this:
<div class="well" class="btn btn-info btn-lg" data-toggle="modal" data-target="#openM'.$i.'">%s</div><br />
<div id="openM'.$i.'" class="modal fade" role="dialog">
To:
<div class="well" class="btn btn-info btn-lg" data-toggle="modal" data-target="#openM'.$result['ID'].'">%s</div><br />
<div id="openM'.$result['ID'].'" class="modal fade" role="dialog">
Have a nice day! ☺

Related

Want to call each card data in their modal PHP

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>

pass multiple php variables to modal

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>

Creating Dynamic Modal popups with information from job

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.

Bootstrap modal delete confirmation

Good day! I've got a problem in my bootstrap modal where I want to delete a post using a modal.
Here is my PHP code where it toggles the delete_modal.php
<?php
if ($row['member_id'] == $_SESSION['member_id']){
echo "
<div style='float:right;'>
<a href='#<?php echo $id; ?>' data-toggle='modal' data-target='#myModal'>Delete</a>
</div>";}
else{
echo "
<div style='float:right;'>
<a href='#'>Delete</a>
</div>";
}
?>
Next this is my delete_modal.php
<div class="modal fade" id="myModal" 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>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button id="<?php echo $id; ?>" href="deleteposthome.php?id='.$row['post_id'].'" type="button" class="btn btn-danger" data-dismiss="modal">Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Now this is my deleteposthome.php
<?php
require ("connection.php");
?>
<?php
$id =$_GET['id'];
mysql_query("DELETE FROM posts WHERE post_id = '$id'")
or die(mysql_error());
?>
I don't know how to get ID so that it can be deleted using modal ! please help me
This is my answer, for how many months I've asked this question.
<div class='modal-footer' style='background-color:#1F4E78;'>
<a class='btn btn-danger' href='deleteposthome.php?id=".$row['post_id']."'> Delete</a>
</div>

bootstrap stacked modal input

I create two modal window. First is contains some list, and have input field for searching. My Idea is on next modal window to show results of searching.
How I can use value from input in first modal and run in query of second modal window ?
<!--Modal cal list-->
<div id="modalCal" class="modal" role="dialog">
<div class="modal-dialog" style="overflow-y: scroll; max-height: 85%;margin-top: 50px;margin-bottom: 50px;" >
<!--Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Lista CAL-ova</h4>
<input type="text" placeholder="cal x color" name="cal" id="cal" />
<button class="btn" data-toggle="modal" href="#src">Pretraga</button>
</div>
<div class="modal-body">
<?php
$result = $objCal->ListCal();
echo '<ul class="list-group">';
while($row = mssql_fetch_array($result)) {
echo '<li id="cals" class="list-group-item">'.$row['cal'].'</li>';
}
echo '</ul>';
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Modal cal list-->
<div id="src" class="modal" role="dialog">
<div class="modal-dialog" style="overflow-y: scroll; max-height: 85%;margin-top: 50px;margin-bottom: 50px;" >
<!--Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Lista CAL-ova</h4>
<div class="modal-body">
<?php
$result = $objCal->FindCalByName('input from first modal');
echo '<ul class="list-group">';
while($row = mssql_fetch_array($result)) {
echo '<li class="list-group-item">'.$row['cal'].'</li>';
}
echo '</ul>';
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You create file modal2.php like:
<?php $calName = $_GET['input_by_first_modal']; ?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Lista CAL-ova</h4>
<input type="text" placeholder="cal x color" name="cal" />
<button class="btn" data-toggle="modal" href="#pretraga">Pretraga</button>
</div>
<div class="modal-body">
<ul class="list-group">
<?php
$result = $objCal->FindCalByName($calName);
while($row = mssql_fetch_array($result)) {
echo '<li class="list-group-item">'.$row['cal'].'</li>';
}
?>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
JS in modal1 page should be something like this
var $modal = $('#src');
$('#modalCal').on('click', '#your-ul > li', function(){
var name = $(this).val();
setTimeout(function(){
$modal.load('modal2.php?input_by_first_modal='+name, '', function(){
$modal.modal();
});
}, 1000);
});
Thanks everyone on help.
I found better solution. Instead to open two modal window, with js I made to search directly inside ul li elements.
$(document).ready(function(){
$("#cal").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$("ul li").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
}
});
});
});

Categories