Wordpress Javascript Modal Display Doesnt Close - javascript

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

Related

Buttons on one page calling different post ID not working correctly

I am designing a page that will have multiple popup options. The section has a custom field that allows the designer to input a Post ID to identify which popup is assigned to which button. The custom field name is pop_up_name.
The section PHP is as follows:
<?php include( '_data.php' ); ?>
<div class="card-trio-inner <?php echo $classes ?>" <?php echo $style; ?>>
<div><?php echo $intro ?></div> <!--Pulls from page section (defines the actual CTA) -->
<div id="social-popup"> <!--Pulls popup from popup page - hidden until button clicked-->
<img id="social-popup-close" src="/wp-content/themes/huh/_static/images/close-button.svg" alt="close">
<div class="social-popup-inner">
<h1>
Pop Up Heading
</h1>
<?php
$popup = get_post($pop_up_name); // POPUP PAGE ID
echo $popup->post_content;
?>
</div>
THe issue is that when I have multiple buttons on the pave, it pulls the same pop_up_name for each button.
How can I make it so each button pulls the assigned pop_up_name for its respective button?
Here is a sample of the failing code (the top section with the buttons):
https://heyuhuman.com/melissa-test/
You will see both buttons pull the same pop-up (they should be different)
This is not a php issue. This is javascript / jQuery issue.
If you want a specific pop-up to be opened for each button, you must define a unique ID for the pop-ups.
You can then catch which button was clicked and open the pop-up for the same unique ID.
For example:
HTML
show
<div class="pop-up" id="<?php echo $postId; ?>">
hide
</div>
JQUERY
$('a').on('click', function (e) {
e.preventDefault();
var uniqID = $(this).attr('data-id');
var t = $(this).attr('class');
if(t === 'show'){
$('div[id=' + uniqID + ']').show().css('display', 'flex');
}
else if(t === 'hide'){
$('div[id=' + uniqID + ']').hide().css('display', 'none');
}
});

Display contents of $row in a modal dynamically

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>

Open remote page into bootstrap modal

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);
}});
});

Run JavaScript From Dynamically Created Links

I am creating a blog style website in which it pulls information from a database to create each post dynamically. Once all the posts have been created the header from each of the posts will open an overlaid div which brings up the whole article for that particular post.
How the posts are created...
<table class="mainTable">
<tr>
<td id="mainBanner">
<img class="startLogo" src="images/logo.png">
</td>
<?php
$sql = 'SELECT * FROM posts ORDER BY Post_ID DESC';
$result = mysqli_query($conn, $sql);
if($result){
while($row = mysqli_fetch_assoc($result)){
?>
<td class="<?php if($row['Post_Featured'] == 0) {echo 'visualPost';} else {echo 'featuredPost';} ?>" id="<?php echo $row['Post_ID']; ?>">
<a id="openOverlay" name="<?php echo $row['Post_ID']; ?>" href="#">
<?php echo $row['Post_Title']; ?>
</a>
<img src="images/<?php echo $row['Post_Image_Embed']; ?>" width="100%">
<p><?php echo $row['Post_Blurb']; ?> Votes:<?php echo $row['Post_Votes']; ?></p>
</td>
<?php
}
}
?>
</tr>
</table>
JavaScript
var createOverlay = document.getElementById("openOverlay");
var destroyOverlay = document.getElementById("closeOverlay");
createOverlay.onclick = toggleOverlay;
destroyOverlay.onclick = toggleOverlay;
function toggleOverlay() {
var postID = $(this).attr('name');
var specialBox = document.getElementById('specialBox');
var container = document.getElementById('container');
if (container.style.display == "block") {
document.body.style.overflowY = "hidden";
container.style.display = "none";
specialBox.style.display = "none";
$("body").mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 20);
event.preventDefault();
});
$('div#postOverlay').empty();
} else {
document.body.style.overflowX = "hidden";
container.style.display = "block";
specialBox.style.display = "block";
$("body").unmousewheel();
$.ajax({
type: "POST",
url: "overlayFill.php",
data: { 'id': postID },
success: function (data) {
$('div#postOverlay').append(data);
}
});
}
event.preventDefault();
}
I tried using document.getElementById('openOverlay') to grab the link and run the JavaScript needed to bring up the overlay depending on the post and running a php script to grab the information from the database and post it to the overlay but it seems like it only grabs the first dynamically created id (aka the first id getElementById hits) the rest of the posts won't bring up an overlay.
Overlay
<div id="container">
<div id="specialBox">
<a id="closeOverlay" href="#">Close</a>
<div id="postOverlay"></div>
</div>
</div>
Is there a better way to do this? I thought about maybe trying a button but I thought I would end up with the same issues.
Change <a id="openOverlay" to <a class="openOverlay" (and the same with #closeOverlay) and use jQuery's .on(), like so:
$(document).ready(function(){
$(document).on('click', '.openOverlay, .closeOverlay', toggleOverlay);
});
This allows the event to be bound to elements that have not been added to the dom yet.
Instead of dynamically creating the block that has another id attribute, you should use class='closeOverlay'.
Then instead of getElementById('closeOverlay') you can use getElementsByClassName('closeOverlay'), and add your function to each of element in that return array.

Multiple Expand/Collapse Bootstrap buttons in a PHP foreach loop

My code is almost working, with one issue that I'm having a hard time fixing. Here is some code that I have simplified.
<?php for($counter = 0; $counter < 5; $counter++)
{
?>
<button type="button" id="<?php echo 'change_button_label_' . $counter?>" data-toggle="collapse" data-target="<?php echo '#button_number_' . $counter?>" class="btn btn-warning"><span class="glyphicon glyphicon-chevron-down"></span>Expand</button>
<div id="<?php echo 'button_number_' . $counter?>" class="collapse">
This gets collapsed #<?php echo "$counter"; ?>
</div>
<script>
$('<?php echo "#change_button_label_" . $counter?>').click(function () {
if($('button span').hasClass('glyphicon-chevron-up'))
{
$('<?php echo "#change_button_label_" . $counter?>').html('<span class="glyphicon glyphicon-chevron-down"></span>Expand');
}
else
{
$('<?php echo "#change_button_label_" . $counter?>').html('<span class="glyphicon glyphicon-chevron-up"></span>Collapse');
}
});
</script>
<?php
}
?>
If I try to click 1 or more buttons, they work in the sense that each will expand/collapse and reveal/hide its relevant content as expected.
However, only the 1st button that is clicked (and it doesn't matter which one is clicked 1st) will have its text and glyphicon changed from "expand" to "collapse." All of the other buttons will continue to say "expand" regardless of if they are actually expanded or collapsed.
I'm hoping someone can help me figure out how to fix it so that the other buttons will toggle their text correctly when they are clicked. I don't mind gutting my attempted code above if needed.
Actual output:
Expected output:
The text on each button should look like the first one after they've been clicked. The expand/collapse feature is already working for each button.
Generated HTML/CSS output:
https://gist.github.com/bryanjamesmiller/c14e623152ab9b5f9246
Thank you in advance!
Take your script block out of the PHP for loop and bind to the button element itself, rather than the button ID:
<?php for($counter = 0; $counter < 5; $counter++)
{
?>
<button type="button" class="btn btn-danger" id="<?php echo 'change_button_label_' . $counter ?>">DISLIKES<span class="glyphicon glyphicon-thumbs-down"></span></button>
<?php
}
?>
<script>
$(document).ready(function(){
$('button').click(function() {
var $button = $(this),
test = $button.text() === 'DISLIKES';
if(test)
{
$button.text('LIKE');
test=false;
}
else
{
$button.text('DISLIKES');
test=true;
}
});
});
</script>
This is pretty basic and will just change the button text. To toggle the icon as well you'd just need to do something like:
$button.addClass('like-class');
or
$button.removeClass('dislike-class');
In the appropriate if block
Check out this fiddle to see it in action
change
if($('button span').hasClass('glyphicon-chevron-up'))
to
if($('button#<?php echo 'change_button_label_' . $counter?> span').hasClass('glyphicon-chevron-up'))
you are done !

Categories