It use to work in the past and on other current websites but updating this site it no longer works. I had a pop up message with woocommerce notices, just saying the item has been added to cart, and with a close button using the javascript:void method. However it no longer works and when I look at the source code it's just out putting as "void(0)" instead of "javascript:void(0)"
I've tried other way such as just using # instead. Nothing works. Box won't close.
<div id="woocommerce-message">
<div class="close">
<a href="javascript:void(0)" class="closeEmbtn" onclick="closeEm()"
title="Close Notification"><i class="fa fa-times" aria-hidden="true"></i>
</a></div>
<div class="success-cart">
<div class="woocommerce-message">
<?php foreach ( $messages as $message ) : ?>
<?php echo wp_kses_post( $message ); ?>
<?php endforeach; ?>
</div>
</div>
<div class="message-cart-buttons">
<a class="button" href="/cart/">View Cart/Checkout</a>
Continue Shopping
</div>
</div>
<script type="text/javascript">
function closeEm() {
document.getElementById("woocommerce-message").style.display = "none";
}
</script>
I'm wanting just a way to close/hide the the "woocommerce-message" div when they click a close button.
--Edit --
I tried a different approach
<div class="close">
<a class="closeEmbtn" onclick="closeEm()" href="#" title="Close Notification"><i class="fa fa-times" aria-hidden="true"></i></a></div>
<script>
function closeEm() {
var x = document.getElementById("woocommerce-message");
x.style.display = "none";
}
</script>
But it's the "onclick=" isn't showing up in the source code either. Is there something in wordpress that could be blocking it?
I figured out a work around with a new script function
<script>
document.getElementById("close1").onclick = function() {
document.getElementById("woocommerce-message").style.display = "none";
}
</script>
which then doesn't have to rely on javscript:void(0) and onclick in the html.
But I am still curious to know why those elements suddenly disappeared from the output code
Related
So what I'm trying to achieve is to set the value of a hidden input so that I can send that value to a PHP file where this value will be used to execute a delete query.
The only problem that I'm facing is that it will only select the data-id from the first element, which is not what I want.
Here is the JQuery code, if any other files are required for more info I'll post those aswell.
$('document').ready(function(){
// Makes menu visibility toggable
$('#hamburger_btn').on("click", function() {
$('#sidemenu').toggleClass("show");
})
// Closes menu via separate button
$('#close_btn').on("click", function() {
$('#sidemenu').removeClass("show");
})
// Opens dialogbox
$('.openDialog').on("click", function() {
$('#dialog').addClass("showBox");
$('#overlay').addClass("showOv");
// Sets the input value in dialog
$('#post_id').val($('.openDialog').data("id")); // Here lies the problem
})
// Closes dialogbox
$('#closeDialog').on("click", function() {
$('#dialog').removeClass("showBox");
$('#overlay').removeClass("showOv");
// Sets value to empty and remove attribute value
$('#post_id').val('').removeAttr("value");
})
});
If this question has already been answered elsewhere please let me know aswell, because I couldnt find it.
EDIT:
The HTML
<?php
// Get all posts from DB
$sql = "SELECT * FROM cm_posts";
$stmt = $conn->prepare($sql);
$stmt->execute();
$results = $stmt->get_result();
?>
<section class="s-reset s-posts-overview">
<div id="top"></div>
<div class="posts-overview-content-wrapper">
<h3 class="s-title">Overview</h3>
<div class="post-cards-container">
<?php // Display all posts in a card ?>
<?php while($row = $results->fetch_assoc()):?>
<div class="post-card">
<h4 class="card-title"><?php echo $row["post_title"];?></h4>
<h5 class="card-sub-title"><?php echo $row["post_date"];?></h5>
<div class="card-btn">
<button>View</button>
<button class="btn-small openDialog" id="openDialog" data-id="<?php echo $row["post_id"];?>">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<?php endwhile ?>
</div>
<div class="scroll-btn">
<a href="#top" class="button">
<i class="fas fa-arrow-up"></i>
</a>
<a href="#bottom" class="button">
<i class="fas fa-arrow-down"></i>
</a>
</div>
</div>
<div id="bottom"></div>
</section>
<div class="overlay" id="overlay"></div>
<div class="dialog" id="dialog">
<div class="dialog-content-wrapper">
<h3>Are you sure you want to delete this item?</h3>
<form action="data/post_db_files/delete-post-db.php" method="post" id="del_post_item">
<input type="hidden" id="post_id" name="post_id">
<input type="submit" value="Delete" id="del_post" class="del_post">
</form>
<button id="closeDialog" class="close-btn">Cancel</button>
</div>
</div>
Picture of the browser with devtools
The image shows where the id is supposed to appear, now if i click the delete button on any of these elements, I always get the value of 1, but if I select "hello 2" which has a post_id of 2 I want that id to appear in the hidden input. I hope this clears somethings up.
You are trying to get the data-id of the clicked item, but you are using $('.openDialog') => This would get all elements wich class is openDialog.
Use this instead:
$('#post_id').val($(this).data("id"));
you can also create on onClick function on this button like this & pass value in that function
<button id="openDialog onClick=openDialogButtonClick("<php echo $row["post_id"];>")>
after this just create function in your Js file or tag
function openDialogButtonClick(id){
//in this id param you will get id then set this id to your hidden field
$("#post_id").val(id);
}
I'm working on a WP code, but my problem in specific to JS. So I post my question here at StackOverflow.
Final goal is, clicking on the post image, showing the HTML markup of large img on Console. Here's my code:
<div class="img lightbox-trigger">
<?php the_post_thumbnail(); ?>
<div class="hover" >
<i class="fa fa-arrows-alt"></i>
</div><!--hover-->
</div><!-- .img .lightbox-trigger -->
<?php $large_thumb = get_the_post_thumbnail($post->ID, 'large') ?>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".lightbox-trigger").click(function(){
var largeThumb = <?php echo json_encode( $large_thumb ); ?>;
console.log( largeThumb );
});
});
</script>
The problem is when I click on one of the post's images, the largeThumb value of all other posts (there are 10 posts) printed on Console!
I don't know how to use $(this) in this specific context to just get the value related to the element being clicked on.
Any help is appreciated.
You could use data-* attributes to store the $large_thumb of every lightbox-trigger in the related div :
<div class="img lightbox-trigger" data-large-thumb='<?php echo get_the_post_thumbnail($post->ID, 'large'); ?>'>
<?php the_post_thumbnail(); ?>
<div class="hover" >
<i class="fa fa-arrows-alt"></i>
</div><!--hover-->
</div><!-- .img .lightbox-trigger -->
Then in the js you could get this info :
jQuery(document).ready(function($){
$(".lightbox-trigger").click(function(){
console.log( $(this).data('large-thumb') );
console.log( $(this).html() );
});
});
Hope this helps.
On my login mysql table, i have an account type column. If the user has a Manager account type, i want to show a management menu item and if not hide it.
This is pretty simple but its not working:
In my header, i have the following:
<script>
var logged_in_account_type = "<?php echo $_SESSION['account_type'] ; ?>";
if(logged_in_account_type === "Manager") {
document.getElementById('management_menu').style.display = 'block';
} else {
document.getElementById('management_menu').style.display = 'none';
}
</script>
I tried without the echo has well.
<div id="management_menu" style="display:none">
<li>
<i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span>
</li>
</div>
<div class="text-bg"><span class="text-slim">Welcome,</span> <span class="text-semibold"><?php echo $_SESSION['account_type'] ?></span></div>
Have you tried using php if while rendering your menu? Something like this:
<?php if($_SESSION['account_type'] == 'Manager'): ?>
<div id="management_menu">
<ul>
<li>
Dashboard
</li>
<li>
Users
</li>
</ul>
</div>
<?php endif; ?>
Where is your javascript code in the document? If your javascript code is on the top of the document, it possibly shows or hides the <div> element properly, but, because the <div> element is at the bottom of the document, it is hidden because its "style" says so.
The solution is to move the javascript code below the <div> element, this will solve the "execution order" problem you have. Example :
<div id="management_menu" style="display:none">
<li>
<i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span>
</li>
</div>
<?php
session_start();
$_SESSION['account_type'] = "Manager";
?>
<script>
var logged_in_account_type = "<?php echo $_SESSION['account_type'] ; ?>";
if(logged_in_account_type === "Manager") {
document.getElementById('management_menu').style.display = 'block';
} else {
document.getElementById('management_menu').style.display = 'none';
}
</script>
I want to create a bootstrap modal for social sharing buttons in my wordpress blog. For the modal to be visible, I have to place it outside the post (loop) but its trigger (button) inside the post. I want to pass the URL and Title of the post to the Sharing Buttons inside the modal.
I have created two variables inside the post to get its URL and title:
<?php
// Get current post URL
$URL = get_permalink();
// Get current post title
$Title = str_replace( ' ', '%20', get_the_title()); ?>
Then, I created the trigger inside the post to display the modal
<button class="btn btn-link btn-lg" id="socialbtn" data-toggle="modal" data-target="#myModal">Share</button>
And in the modal body, I have many buttons, like
<a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=***URL of the post***">Facebook</a>
<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=$URL&text=$Title$" >Twitter</a>
What I want to do is to replace the $URL in href of Facebook and Twitter with the URL of the post and likewise the title.
I know that I have to use JavaScript, but I'm unable to figure out the correct syntax.
Will be thankful for help. :)
I did it like this:
In the trigger button, I set the data attributes as follows:
<button class="btn btn-link btn-lg" id="socialbtn" data-url="<?php echo $URL; ?>" data-title="<?php echo $Title; ?>">Share</button>
then got the facebook and twitter URLs in separate variables and then set the href attributes as follows:
<script>
$(document).on("click", "#socialbtn", function () {
var url = $(this).data('url');
var title = $(this).data('title');
var fburl = "https://www.facebook.com/sharer.php?u="+url;
var twurl = "https://twitter.com/share?url="+url+"&text="+title;
$("#facebook").attr("href", fburl);
$("#twitter").attr("href", twurl);
</script>
And in the modal body, used the anchor tags as follows:
<a class="ssk ssk-text ssk-facebook" id="facebook" href="#">Facebook</a>
<a class="ssk ssk-text ssk-twitter" id="twitter" href="#">Twitter</a>
You have to output them using PHP:
<a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=<?php echo $URL; ?>">Facebook</a>
<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=<?php echo $URL; ?>&text=<?php echo $Title; ?>" >Twitter</a>
$(".ssk-facebook").attr("href", "YourNewURL");
$(".ssk-twitter").attr("href", "YourNewURL");
$( "#socialbtn" ).click(function() {
$(".ssk-facebook").attr("href", "https://www.facebook.com/sharer.php?u=<?= $URL ?>");
$(".ssk-twitter").attr("href", "https://twitter.com/share?url=<?= $URL ?>&text=<?= $Title ?>");
});
You have to identify which button the user have clicked on.
You can archive that by using unique IDs OR by adding hidden inputs or divs containing the correct hrefs for each post.
Then select those "href-container" relatively to the button and change the modal. ("closest(), parent(), nextAll() etc.)
Do you need code examples?
Use data attribute to add link with every post's share button:-
HTML
<!-- Share button (PLACE IT INSIDE YOUR LOOP) -->
<a data-url="<?php echo url; ?>" data-title="<?php echo $title;?>" class="open-share btn btn-primary" href="#">share</a>
<!-- Model popup (PLACE IT AFTER LOOP) -->
<div class="modal hide" id="sharepopup">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Share </h3>
</div>
<div class="modal-body">
<a id="facebook" class="ssk ssk-text ssk-facebook">Facebook</a>
<a id="twitter" class="ssk ssk-text ssk-twitter" >Twitter</a>
</div>
</div>
JS
<script>
$(document).on("click", ".open-share", function () {
var url = $(this).data('url');
var title = $(this).data('title');
$('#facebook').attr("href", "http://facebook.com?share="+url);
$('#facebook').attr("title", "http://twitter.com?share"+title);
$('#twitter').attr("href", url);
$('#twitter').attr("title", title);
// Initialize popup with Javascript.
$('#sharepopup').modal('show');
});
</script>
I'm working on a shopping cart and my client wants it to have one background when it's empty and another one when it has items. So here's what I got as a mark up:
<a href="#" id="shopping-cart" data-count="0" class="trigger cart">
<span>
</span>
</a>
The changes on the data-count are being handled on server side and updated via php my problem is that I have no idea how to make jquery read the data-count and make the if statement so it reads
if data-count= 0 then add .empty
else data-count > 0 then add .full
Also, I'm not sure if I should use .addClass or .toggleClass from empty to full, I'm sorry, so far all my attempts to write jquery have failed and the handler for all that is on vacation so I would appreciate all the help.
A decision was made to change the plugin being used and now I tried to replicate this on the new one and cant seem to wrap my head around it to achieve it the new code available looks something like this:
<?php global $woocommerce; ?>
<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"
title="<?php _e('View your shopping cart', 'woothemes'); ?>">
<?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
$('a.cart').data('count')
Gives the value of count.
why don't you do this ? :
$cart = sprintf(_n('%d', cart::$cart_contents_count, 'mini-cart'), cart::$cart_contents_count);
if($cart >= '1')
{
?>
<a href="#" id="shopping-cart" data-count="$cart" class="trigger cart">
<span>
</span>
</a> <?php
}
else
{ ?>
<a href="#" id="shopping-cart" data-count="0" class="trigger cart">
<span>
</span>
</a>
<?php
}
this way you do not need to use jQuery to hide elements that are not needed.