I have a website in which events are queried and displayed on the index page. Upon clicking an image which was among the results of the query, a modal pops up.
As i have multiple images, I would like to dynamically display the contents of each row in the modal depending on which image was clicked. Currently, I am able to click any image and a modal appears, however they all contain the data from row[0].
INDEX PAGE:
while($row = $result->fetch_assoc()) {
include 'testModal.php';
echo "<tr><td><figure><figcaption style='padding-bottom:20px'>" . $row["name"]."</figcaption>".
'<img class="modalBtn" style="width:15em; height:17em;" src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/></figure></td>'.
"<td>".$row["category"]."</td>".
"<td> $".$row["price"]."</td>".
"<td>".$row["age"]."</td>".
"</tr>";
}
?>
The below is the modal page.
MODAL PAGE:
<div id="TheModalTest" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="closeWindow()">X</span>
</div>
<div>
<?php echo '<img style="width:15em; height:17em;"
src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>'; ?>
</div>
<?php echo '<p class="desc">'.$row["description"].'</p>' ?>
<div class="modal-footer">
<h3>BOOK NOW</h3>
</div>
</div>
</div>
<script>
//get modal
var Testmodal = document.getElementById('TheModalTest');
//get button that opens modal
//var modalbtn = document.getElementById('modalbtn');
var modalbtn = document.getElementsByClassName('modalBtn');
console.log("Length: " + modalbtn.length);
//Open modal when btn click
for (var i = 0; i < modalbtn.length+1; i++ ) {
console.log("I IS: " + i);
modalbtn[i].onclick = function(){
console.log("MODAL IS: " + modalbtn[i]);
Testmodal.style.display = "block";
}
}
</script>
The below images are what it looks like. When i click the event image for Kanye, the modal pops up with his image. However if i click the image of Katy Perry, the modal pops up with Kanye still.
https://i.imgur.com/YhIoXmT.png
https://i.imgur.com/AaqxChj.png
Your Question Something unclear, Try to Provide the Output screenshots and mark it. Because i don't know the output.
But
I have Re written your mysql Code as foreach So you can play with foreach images.
while($row1 = $result->fetch_assoc()) {
foreach($row1 as $row){
include 'testModal.php';
echo "<tr><td><figure><figcaption style='padding-bottom:20px'>" . $row["name"]."</figcaption>".
'<img class="modalBtn" style="width:15em; height:17em;" src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/></figure></td>'.
"<td>".$row["category"]."</td>".
"<td> $".$row["price"]."</td>".
"<td>".$row["age"]."</td>".
"</tr>";
}
}
Replace the above code with your Old one. Hope it works.
Try not to mix " and '. Just stick with single quotes for php and js, it makes it simpler when you're starting.
What you'll need to do is add an attribute to the element with the data you want to pass to the modal, than grab that attribute's value with your js.
notice: data-category="'.$row['category'].'" below
<?
while($row = $result->fetch_assoc()) {
include 'testModal.php';
echo '<tr><td><figure><figcaption style="padding-bottom:20px">' . $row['name'].'</figcaption>'.
'<img data-category="'.$row['category'].'" class="modalBtn" style="width:15em; height:17em;" src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/></figure></td>'.
'<td>'.$row['category'].'</td>'.
'<td> $'.$row['price'].'</td>'.
'<td>'.$row['age'].'</td>'.
'</tr>';
}
?>
now in the modal... notice category = modalbtn[i].getAttribute('data-category');
<div id="TheModalTest" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="closeWindow()">X</span>
</div>
<div>
<?php echo '<img style="width:15em; height:17em;"
src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>'; ?>
</div>
<?php echo '<p class="desc">'.$row["description"].'</p>' ?>
<div class="modal-footer">
<h3>BOOK NOW</h3>
</div>
</div>
</div>
<script>
//get modal
var Testmodal = document.getElementById('TheModalTest');
//get button that opens modal
//var modalbtn = document.getElementById('modalbtn');
var modalbtn = document.getElementsByClassName('modalBtn');
console.log("Length: " + modalbtn.length);
//Open modal when btn click
for (var i = 0; i < modalbtn.length+1; i++ ) {
console.log("I IS: " + i);
modalbtn[i].onclick = function(){
console.log("MODAL IS: " + modalbtn[i]);
/// here your go
var category = modalbtn[i].getAttribute('data-category');
console.log('category',category);
Testmodal.style.display = "block";
}
}
</script>
<script>
Related
I have a function that opens modal, when I click on a div. It opens ,but when I press X it doesnt close the Modal. Display doesnt change the value to none, but I can change background color and everything else.
UPDATE -> So get the right clasName and correct modal Id, still I can change the whole modals background for etc , but i cant change the display: block value to none, I can change to none thru inspect, but it doesnt work through the selector.
I have it working through my own WordPress loop, where I need to get post ID and Modal Id (), to show the correct content.
FOUND THE PROBLEM.
So when I console log thisBtn Event and click Event I get this in console:
1.pressing click-to-open I get display Block
2. But when I press X (close) I get var model who is NONE, and after that immediately click to open fires and makes it block again. So my mistake is that the X button fires both in the same time, and Im trying to figure it out.
CONSOLE PICTURE FOR THE ERROR
<div id="click-to-open<?php echo get_the_ID(); ?>" data-modal="<?php echo get_the_ID(); ?>" class="qodef-event-list-item-holder <?php echo get_the_ID(); ?>">
<?php echo prowess_core_get_shortcode_module_template_part('templates/parts/image', 'event-list'); ?>
<div class="qodef-event-list-item-content">
<div class="qodef-event-list-item-content-holder">
<div class="qodef-event-list-item-content-inner">
<?php
echo prowess_core_get_shortcode_module_template_part('templates/parts/category', 'event-list', '', $params);
echo prowess_core_get_shortcode_module_template_part('templates/parts/title', 'event-list', '', $params);
echo prowess_core_get_shortcode_module_template_part('templates/parts/excerpt', 'event-list', '', $params);
//echo prowess_core_get_shortcode_module_template_part('templates/parts/info', 'event-list', '', $params);
echo prowess_core_get_shortcode_module_template_part('templates/parts/read-more', 'event-list', '', $params);
?>
</div>
</div>
</div>
<!-- The Modal -->
<div id="<?php echo get_the_ID();?>" class="modal" >
<!-- Modal content -->
<div class="modal-content" id="content<?php echo get_the_ID();?>" >
<span id="close" class="close<?php echo get_the_ID();?>" data-modal="close">×</span>
<p><?php the_content( 'Read more ...' ); ?></p>
</div>
MODAL
var btn = document.getElementsByClassName("<?php echo get_the_ID(); ?>");
for (var i = 0; i < btn.length; i++) {
var thisBtn = btn[i];
thisBtn.addEventListener("click", function() {
var modal1 = document.getElementById(this.dataset.modal);
modal1.style.display = "block";
}, false);
}
KRYZIUKAS
var span = document.getElementsByClassName("close<?php echo get_the_ID();?>");
// console.log(span)
for (var b = 0; b < span.length; b++) {
var click = span[b];
click.addEventListener("click", function(){
var modal = document.getElementById("<?php echo get_the_ID();?>");
modal.style.display = 'none';
console.log("modal", modal)
console.log('modal style--->', modal.style);
}, false);
}
Photo For Answer
So the problem was the value false in the event listener I needed to change it to true.
Explanation: https://www.w3schools.com/js/js_htmldom_eventlistener.asp
The product list will be populated from MySql Database using PHP code and is having a check box for each product.
On that page, whenever a check box is clicked, I need that product to be highlighted and store its value to some other array type variable to pass that value to another page.
Code for product list creation:
<?php
$cnt=0;
$rslt = mysqli_query($conn,"SELECT Icode,Name,Size,Style FROM productinfo");
if(!$rslt){
die(mysqli_error($conn));
}else{
echo "<table width='100%'>";
while($row = mysqli_fetch_assoc($rslt)){
if($cnt==0){
echo "<tr>";
}
echo "<td width='30%'>
<div class='card'>
<img src='upload/"."download.jpg"."' alt='Avatar' style='width:100px' >
<div class='container'>
<h4><b>".$row['Name']." <input type='checkbox' name=".$row['Icode']." value=".$row['Icode']." onclick=' echo return OptionsSelected(this)'/> </b></h4>
<p>".$row['Size']."</p>
<p>".$row['Icode']."</p>
</div>";
?>
<!-- <button role="button" data-toggle="modal" data-id="<?php print $row['Icode']?>" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Inquiry</button>
</div>
<?php
echo "</td>";
if($cnt==2){
$cnt=0;
echo "</tr>";
}
else
$cnt = $cnt + 1;
}
}
echo "</table>";
?>
<?php
....
$sql = "SELECT * FROM items ORDER BY item_id DESC";
$query = mysqli_query($con, $sql);
while ($row_item=mysqli_fetch_array($query)){
$id = $row_item['item_id'];
$title = $row_item['item_title'];
$image = $row_item['item_image'];
$trailer = $row_item['item_trailer'];
echo "
<div class='col-sm-3'>
<img src='item-images/$image' />
<p>$title</p>
<a href='' class='launch-modal' data-modal-id='modal-video'>Trailer</a>
<!--Modal-->
<div class='modal fade' id='modal-video' tabindex='-1' role='dialog'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>Close</button>
<h4 class='modal-title'>$title</h4>
</div>
<div class='modal-body'>
<div class='modal-video'>
<video id='video-frame' controls src='item-trailer/$trailer'></video>
</div>
</div>
</div>
</div>
</div>
</div> <!--.col-sm-3-->
";
?>
How can i make this $trailer launch inside modal dialog with it's own id?
i already try this but it's not working:
href='index.php?$id'
FYI: This is the old one which targeted to the other page without modal dialog:
echo "
href='trailer.php?single_id=$id'
";
<!--The Other Page-->
<?php
if(isset($_GET['single_id'])){
$item_id = $_GET['single_id'];
$get_item = "SELECT * FROM items WHERE item_id='$item_id'";
$run_item = mysqli_query($con, $get_item);
while ($row_item=mysqli_fetch_array($run_item)){
$theID = $row_item['item_id'];
$theTitle = $row_item['item_title'];
$theTrailer = $row_item['item_trailer'];
echo "
<video controls src='item-trailer/$theTrailer'></video>
<p>$theTitle</p>
";
}
}
?>
For more review, i give the javasript that execute the page:
$(function(){
// open the modal
$('.launch-modal').on('click', function(e){
e.preventDefault();
$( '#' + $(this).data('modal-id') ).modal();
}); // reload the modal contents when it is closed
$("#modal-video").on("hidden.bs.modal", function () {
var url = $('#video-frame').attr('src');
$('#video-frame').attr('src', '');
$('#video-frame').attr('src', url);
});
});
I am trying to submit the page inside the iframe using the submit button from modal of Page1.php to trigger the submit button of Page2.php. Can I ask for a help if what is the best way to execute this?
The reason why my submit is in modal is to execute multiple functions from Page1.php, and the Page1.php codes is some part of the button from dataTable just incase you notice those single (')s
Page1.php
<a class='btn btn-md btn-warning' data-toggle='modal' data-target='#editModal' >View</a>
<div class='modal fade' id='editModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog' style='width:95%; height:100%'>
<div class='modal-content' style='height:100%'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h4 class='modal-title' id='myModalLabel'>EDIT HERE</h4>
</div>
<div class='modal-body'>
<iframe src='page2.php' id='info' class='iframe' name='info' seamless='' height='100%' width='100%'></iframe>
</div>
<div class='col-lg-12' style='text-align: center' ><button type='submit' name='outerSubmit' id='outerSubmit' value='Submit' class='btn btn-lg btn-danger'>SAVE</button></div>
</div>
</div>
</div>
Page2.php
<form id="getedit" name="getedit" action="someaction..." method="POST" class="form-horizontal" onSubmit="if(!confirm('Are you sure you want to save changes?')){return false;}" >
<div class="col-sm-3">
<label for="exampleInputtext1">Name:</label>
<input type="text" class="form-control" id="dogr" value='somename'readonly/>
</div>
<div class="col-lg-12" style="text-align: center" ><button type="submit" name="getData" id="getData" value="Submit" class="btn btn-lg btn-danger" hidden>SAVE</button></div>
</form>
I just want to let the readers understand the whole process because I think I already have the correct codes but I dont know how to apply it properly in this situation. so here is my whole function:
function suysing_search($data)
{
$sEcho = intval($data["sEcho"]);
$sSearch = $data["sSearch"];
$iDisplayStart = intval($data["iDisplayStart"]); //start of record
$iDisplayLength = intval($data["iDisplayLength"]); //display size
$pageNum = ($iDisplayStart/$iDisplayLength)+1; //page num
$colSort = $data['iSortCol_0'];
$dirSort = strtoupper($data['sSortDir_0']);
$qString = "CALL suysing_list(";
$qString .= " " . $colSort . ",";
$qString .= "'" . $dirSort . "',";
$qString .= "" . $pageNum . ",";
$qString .= "" . $iDisplayLength . ",";
$qString .= "'" . $sSearch . "',";
$qString .= "" . $sEcho . ")";
//$res = $this->db->query($qString);
//$res = $res->result();
$res = $this->db->query($qString)->result();
//print_r($res);
//$res = $res->result();
$iTotalDisplayRecords = 0;
$iTotalRecords = 0;
//echo intval($res[0]->TOTAL_ROWS);
if(count($res) > 0)
{
$iTotalDisplayRecords = intval($res[0]->TOTAL_ROWS); //used for paging/numbering; same with iTotalRecords except if there will be search filtering
$iTotalRecords = intval($res[0]->TOTAL_ROWS); //total records unfiltered
}
$output = array(
"sEcho" => intval($sEcho),
"iTotalRecords" => $iTotalRecords,
"iTotalDisplayRecords" => $iTotalDisplayRecords,
"aaData" => array()
);
$countField = "<input type='hidden' name='ctd_count' id='ctd_count' value='".$iTotalRecords."' />";
//print_r($res);
setlocale(LC_MONETARY, 'en_PH');
if(count($res) > 0)
{
foreach($res as $row)
{
$output['aaData'][] = array(
$row->ref_no,
"
<script>
function sample(){
alert('Outer submit triggered!');
window.frames['innerframe'].document.forms['getedit'].submit();
}
</script>
<a class='btn btn-md btn-warning' data-toggle='modal' data-target='#editModal".$row->ref_no ." ' >View</a>
<div class='modal fade' id='editModal". $row->ref_no ."' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog' style='width:95%; height:100%'>
<div class='modal-content' style='height:100%; '>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h4 class='modal-title' id='myModalLabel'>EDIT HERE</h4>
</div>
<div class='modal-body' style='background:url(".base_url()."images/animal.gif) center center no-repeat; height:85%'>
<iframe id='innerframe' src='".base_url()."index.php/suysing/view_profile/".$row->ref_no."/a/ASHAJSHAKS'class='iframe' name='innerframe' seamless='' height='100%' width='100%'></iframe>
</div>
<div class='col-lg-12' style='text-align: center'><button name='outerSubmit' id='outerSubmit' class='btn btn-lg btn-danger' onClick='sample();'>SAaaaaaVE</button></div>
</div>
</div>
</div>
"
);
}
}
echo json_encode($output);
}
One way you can do this is using only javascript to add a javascript function to page1.php that will submit your form on page2.php. Add this code to the top of page1.php
<script type="text/javascript">
function sumbit_up_form()
{
window.frames["info"].document.forms["getedit"].submit();
}
</script>
Then Modify the button on page1.php to run the function when clicked by using:
<button type='submit' name='dateData' id='dateData' value='Submit' class='btn btn-lg btn-danger' onclick='sumbit_up_form();'>SAVE</button>
instead of
<button type='submit' name='dateData' id='dateData' value='Submit' class='btn btn-lg btn-danger'>SAVE</button>
EDIT -- ADDITION
If you want this to work using your jquery script then use:
window.frames["info"].document.forms["getedit"].submit();
instead of
$('#info').contents().find('#getData input[type="submit"]').click();
Breakdown of how the code works:
window. is a reference to the browser window object. In order for this code to work Page1.php will need to be the top document in the browser window. If Page1.php is in an iframe itself then you will need to reference the iframe or leave window. out of the code. However, leaving out the window. could make your site/app more easy to hijack.
frames["info"]. is a reference to the iframe object using the name attribute.
document. is a reference to the document inside the iframe.
forms["getedit"]. is a reference to the form object using the name attribute. If you prefer to use the ID then use getElementById("getedit"). instead. NOTE: In XHTML, the name attribute is deprecated. Use the id attribute instead.
submit() calls the submit method for the form object.
When you submit your form with i frame,after successful submission set value in session flash data.
session()->flash('operation_status', 'success');
and then get that flash data in your iframe.
Inside Your Iframe
$operation_status = session()->get('operation_status', false)
if ($operation_status == 'success')
var p = window.parent;
p.jQuery('body').trigger('refreshPage');
}
In parent page
$('body').on('refreshPage', function (e) {
window.location.reload();
});
This code is from laravel
Here is something that seems to be having repetition problem with. I want to open a content into a modal from a remote page, which is populated from a MySql database. I also want that modal to be opened with my custom styling etc. I have gone so far with it, but after that I have got stuck. Here is the code so far
the output on the page:
$output .='<h4><a class="md-trigger" data-OfferID="' . $offer_id . '" href="#" data-modal="offer_modal">' . $title . '</a></h4><hr>';
the modal where data is loaded, on click of output (located in footer.php):
<div id="offer_modal" class="md-modal md-effect-flip" aria-hidden="true">
<div class="md-content">
</div>
</div>
the script located in the page where $output is echoed:
$('.md-trigger').click(function(){
var OfferID=$(this).attr('data-OfferID');
$.ajax({url:"Open-Offer.php?OfferID="+OfferID,cache:false,success:function(result){
$(".md-content").html(result);
}});
});
and just as a reference, the remote page which loads the data based on id, and then populates modal:
<?php
extract($_GET);
?>
<?php
require('inc/connect/config.php');
$offer = (int) $_GET['OfferID']; ?>
<?php
try {
$code_sql = 'SELECT * FROM codes WHERE id LIKE :code_id';
$query = $db->prepare($code_sql);
$code_params = array(':code_id' => $offer);
$query->execute($code_params);
$code_r = $query->fetch(PDO::FETCH_ASSOC);
$c_title = $code_r['title'];
$c_desc = $code_r['description'];
$c_redeem = $code_r['redemption'];
$c_textcode = $code_r['textcode'];
$c_exp = $code_r['expiry'];
$c_terms = $code_r['terms'];
$c_url = $code_r['url'];
} catch (PDOException $e) {
echo "failed to load offer";
exit;
}
?>
<button type="button" class="close close-md" data-dismiss="modal" aria-label="Close"><h3><span aria-hidden="true">×</span></h3></button>
<h5><?php echo $c_title; ?></h5>
<p><?php echo $c_desc; ?></p>
<h3><?php echo $c_textcode; ?></h3>
<p><?php echo $c_redeem; ?></p>
<p class="small-text"><?php echo $c_terms; ?></p>
At the moment, the problem I am getting is the modal only loads once, when the top item in the list is clicked, it won't load when clicking any other item in the list... what am i doing wrong!! I am pretty new to all of this, so go easy on me please :)
thanks in advance
Kaylee
Test with this example.
$('.md-trigger').on('click',function(){
var OfferID=$(this).attr('data-OfferID');
$.ajax({url:"Open-Offer.php?OfferID="+OfferID,cache:false,success:function(result){
$(".md-content").empty().append(result);
}});
});