Jquery doesnt work on payment gateways woocommerce - javascript

I want to hide a div when an option is selected:
jQuery(document).ready(function(){
if (jQuery('#Plaats').val() == "option_a") {
jQuery(".payment_method_cod").hide();
}
});
On this example, $payment_method_cod doesn't hide but if i change it to another div ID ( for example, #payment ) it works!
I hope someone can help me.
Thanks in advance!

There is a chance that other code might run which will result in not hiding the div you wanted. So what i would suggest is run this code the bottom of the site.
You can hook this code to the footer of the site using wp_footer hook
Comment or ask me if you have any doubts.
After Inspecting Questioner site.
Actually it is class not id. Please check it well. So the code should be follows
jQuery('.payment_method_cod').hide();
Whole code is
jQuery(document).ready(function(){
if (jQuery('#Plaats').val() == "option_a") {
jQuery('.payment_method_cod').hide();
}
});

I think the script loaded to quick because the payment part of woocommerce is also done with jQuery. After adding in the setTimeout() function it worked!

Related

Disabling redirect to checkout in Magento 1.9 after adding a product using jQuery

so as the title says I want to stop any redirect after somebody clicked on the add to cart button on the product detail page. The html code looks like this:
<button type="button" id="product-addtocart-button" onclick="productAddToCartForm.submit(this)">
<span>Add to cart</span></button>
I know that I can configure this in the magento backend BUT since this is for an AB-test we can only change this behaviour using css or JS/jQuery.
I tried things I found on other pages like
jQuery('#product-addtocart-button').click(function(event){
event.preventDefault();
//do whatever
} );
but this doesn't seem to work at all. So my question is if this is even possible and how I could solve this. I am thankful for every bit of help I can get :)
Try this code
jQuery(document).ready(function()
{
jQuery('#product-addtocart-button').removeAttr('click');
jQuery('#product-addtocart-button').click(function(event)
{
event.preventDefault();
} );
});

Jquery .toggle does not work on live site

I'm trying to toggle a div on click via jQuery.
But somehow on my live site it does not work at all.
I tried .toggle; hasClass .addClass .removeClass in if/else; also .show/.hide on if/else and so on.
But somehow the content does not get displayed or cannot be hidden.
Here is my working fiddle with the segment DOM of the livesite:
JSFiddle Example
$(".jsselect").click(function() {
var popup = $(this).next(".popup_select");
if (popup.hasClass('showit')) {
popup.removeClass('showit');
} else {
popup.addClass('showit');
}
});
Here is my livesite: Livesite
Well,
sometimes you just need to go to bed and figure out, that you've added the same script.js twice - so the code did execute twice.
Well, screw me then ;)
Thank you all so much!

jQuery .change not working in WooCommerce

I am trying to do something very simple. If you go to http://cutecuttingboards.com/product/apple/, I simply want to hide the "From:" price after the user choose a size in the drop down menu. I am trying the code below, which is working fine in Fiddle but not on the live site:
jQuery('#size').on('change', function(){
jQuery('p.price').hide();
});
Here is the fiddle with unformatted code: http://jsfiddle.net/anneber/U2Mat/
Any help is much appreciated!
Anne
i know it's kind of late but.. in case someone else is having the same problem, this should do the trick:
jQuery(document).ready(function($) {
$(document).on("change", ".variations #size", function() {
$('p.price').hide();
});
});
If I copy/paste your code above into web inspector and then change the selection it works, so most likely, the code is either not in the page, not being run, or being run before the related elements have been loaded into the DOM.
There is an error in your cutecutb.js file the Unterminated comment. i.e you are not terminating the comment
There is no "*/" sign.
EDIT :
Now another reason in add-to-cart-variation.min.js there is already an onchange event of dropdown
You can see you "#size" element is inside ".variations" class

How to go to an specific anchor when entering the page (doesn't work)

First of all, thats my current state of play: thsbrk.de.
The black boxes should be e.g. a about section. I want to achieve that if you enter my page (thsbrk.de) you directly go to my reference section (anchor '#references'). Then, if you hit the about link you will scroll up to that about section. I already tried to make it working but it doesn't. The anchor seems to be not working.
It would be awesome if someone could look at my code and offer me a solution :)
(The scroll isn't implemented yet, I only ask for the anchor problem)
EDIT: Here I've got a example how it should work: Example
Give a script tag like this in the head.Let it be the first script also.
<script>
location.href="http://thsbrk.de/#references"
</script>
From your code, you have did the same. But just try reordering the script tags it might work.
Plain JS:
window.onload=function() {
var anchorHash = 'references';
document.getElementsByName(anchorHash)[0].scrollIntoView();
}
Here is a jQuery example from 2009 - there may be newer ways
How do I scroll a row of a table into view (element.scrollintoView) using jQuery?
In your case this might work
$(document).ready(function() {
var anchorHash = 'references';
var pos = $('#'+anchorHash).position();
window.scrollTo(0,pos.top);
});
Try this and tell me the result:
$(document).ready(function() {
window.location.href = '#references';
});
and then modify your anchor tag like this:
<a name="references">Here</a>

JQuery isn't recognising a #id selector, seems to be dependent on the URL

I'm writing a Ruby on Rails app. The following jQuery code is included in the head tag of the index.html.erb file, which is the template for all pages on the site.
<script>
$(document).ready(function() {
$("#select_mailshot").click(function () {
alert('mailshot');
document.location.href = "/products/1";
});
$("#select_blog").click(function () {
alert('blog');
document.location.href = "/messages";
});
$("#select_contact").click(function () {
alert('contact');
document.location.href = "/contacts/1";
});
});
</script>
(the alert steps are in there for debugging)
The following html code in index.html.erb
<ul>
<li id="select_mailshot">Mailshot</li>
<li id="select_blog">Blog</li>
<li id="select_contact">Contact us</li>
</ul>
The intention is that this effectively creates 3 buttons.
When clicking on any button from http://myurl.com/ it all works.
When clicking on any button from http://myurl.com/messages (get to this via the middle button) it all works
When starting from http://myurl.com/products/1 it all stops working (the alerts do not trigger). In fact when starting from http://myurl.com/anything/id it stops working.
I've been trying to solve this for hours now and the only difference between the working and non-working conditions is the url as far as I can see.
Can anyone shed any light as to what's going on here?
What does firebug tell you? Do you have javascript errors on the page? if so, what are they? Are you sure the jQuery library is included correctly in the deeper pages ( i.e. is it a relative path? )
Is this javascript inlined?
If not, then maybe the link is relative so when you try to load it from messages/40 you need ../script.js. Another solution is to use absolute URLs (http://myurl/script.js) or virtual (/script.js).
Thanks to cherouvim and digitaljoel.
This was due to javascript files being included relative to the current URL.
The following was included in the head tag
<script type="text/javascript" src="javascripts/jquery-1.3.2.js"></script>
I changed it to
<script type="text/javascript" src="/javascripts/jquery-1.3.2.js"></script>
(note the extra "/" in the src attribute) and everything works as expected.
I worked this out after checking the error logs on the server and in the browser.
Feeling a little dumb but a lesson well learned.
I was using FaceBox to create modal overlays and I couldn't figure out why I was having the same problem.
I turns out that the listener wasn't being attached to HTML elements until it was visible. (The items were available if I viewed source, but jQuery seemed not to attach a listener until it was visible.)
For anyone having the same problem, I'd suggest moving your click() code to a point where the HTML element you're attaching to is visible.
Also, I've found selecting by ID does give more problems than class. I have no idea why. (No, there were not duplicate IDs.)
Hope this helps someone with the same problem!

Categories