Google Chrome add to cart buttons via Javascript not working on site

Brad Bansner
Brad Bansner used Ask the Experts™
on
On this page, click any Add to Cart button and it normally works, in most browsers:
https://www.e-photon.com/catalog/circuit-breakers/alpha-argus

My client is having a problem with Google Chrome for Windows. When you click Add to Cart, it just jumps to the top of the screen, since my HTML looks like this:

<a class="btn addtocart" data-itemid="747-148-20-000" href="#">ADD TO CART</a>

Open in new window


Obviously the # jumps to the top of the screen.

Here is my Javascript/jQuery that handles the clicks:

$('.addtocart').on(touchClick, function(){
	var itemid=$(this).attr('data-itemid');
	$('#cart').load('/_cart.asp?itemid='+encodeURIComponent(itemid), function(){
		if ($('#cart').html().indexOf('DUPLICATE')>=0){
			$.Zebra_Dialog('The item you selected is already in your <strong><a class=blue href=/shopping-cart.htm>Shopping Cart</a></strong>.', {'type':'warning','title':'Add to Cart'});
		} else {
			$.Zebra_Dialog('Item has been added to your <strong><a class=blue href=/shopping-cart.htm>Shopping Cart</a></strong>.', {'type':'confirmation','title':'Add to Cart'});
		}
	});
});

Open in new window


touchClick is defined like this:

var touchClick='ontouchend' in document ? 'touchend' : 'click';

Open in new window


Any reason why Google Chrome would not work with this?

Thank you.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Sounds like he is not getting a javascript file

either the file is not downloading (try cleaning cache and doing a forced refresh - check console for download errors)
Or his network / machine is blocking the file
Brad BansnerWeb Developer

Author

Commented:
Thanks for checking. That is certainly a possibility, I will have to get the client to try that. One of his customers is having the same problem, though, but I know sometimes old Javascript can get stuck in these browsers.

Question: when I go to Google Chrome, click the three dots in the upper-right, click More Tools, click Developer Tools, I see a "console" window like in other browsers. However, as I click links on my website, I don't see the Javascript (AJAX) actions that are going on. I was hoping to analyze that in Chrome and maybe see what is going on with my Javascript, but it doesn't seem to work like other browsers. Do you see any activity? Or am I looking in the wrong Developer Tool somehow?

I don't have experience troubleshooting Javascript in Chrome, I was hoping it would be obvious.

Thank you!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Shortcut to console F12
Chrome - you can see the network traffic on the network tab.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

leakim971Multitechnician
Top Expert 2014

Commented:
another shortcut on Chrome, do a left click on the page (for example on your link) and choose "Inspect"
the interesting option in your case is the "disable cache" available on the "Network" tab.

TEST this too :
<a class="btn addtocart" data-itemid="747-148-20-000" href="javascript:void(0);">ADD TO CART</a>

Open in new window

Web Developer
Commented:
I fixed this problem by changing my Javascript listener from this:

$('.addtocart').on(touchClick, function(){

Open in new window


To this:

$('.addtocart').on('click', function(){

Open in new window


As I said, the touchClick variable was defined like this:

var touchClick='ontouchend' in document ? 'touchend' : 'click';

Open in new window


Chrome for Windows did not like the way I was doing that, apparently. However, it was not a problem in my version of Chrome for Windows. But at least two computers did have the problem using Chrome for Windows.

I am really confused why my code would be rejected.

Thanks.
Brad BansnerWeb Developer

Author

Commented:
Found the specific solution on my own.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial