[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 927
  • Last Modified:

jquery slideup slidedown shows twice

Hi,

I have this website http://goo.gl/beU48M, I use jquery slideup slidedown to display error. I dont know why it run twice, could you please help me to fix it?

To show error, you can buy 1 deal, on the shopping cart, check remove and click update. Then you will see the yelow error bar on top of page, it runs twice.

Thank you
0
tkien
Asked:
tkien
5 Solutions
 
MrunalCommented:
Hi
Can you show your code?

Add debugger in your code and check yourself is that code is running twice.
0
 
leakim971PluritechnicianCommented:
Check this : http://validator.w3.org/check?uri=http%3A%2F%2Fv2.wpgroupbuy.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

You've tons of errors in your page.
Especially duplicate ID attributes.
ID attributes must be unique in a page.
0
 
tkienAuthor Commented:
This is the Js file. The error id is #notification

jQuery(window).load(function() {
	jQuery('body').addClass("loaded");
	jQuery('#notification').has('.wg-message').slideDown('medium');
	jQuery('#notification').delay(5000).slideUp('fast');
	
	var sidebar_container = jQuery('.sidebar');
	if ( sidebar_container.width() > 600 ) {
		
		sidebar_container.masonry({
			itemSelector: '.widget',
			isResizable: true,
			gutterWidthInteger: 20,
			// set columnWidth a fraction of the container width
			columnWidth: sidebar_container.width() / 2
		});
	};
});

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
RobOwner (Aidellio)Commented:
You've got the wrong event to initialize this it should be

JQuery(document).ready(function() {
...
});

If you wrap the window.load event then it will call twice as you've seen and animate twice
0
 
tkienAuthor Commented:
I tried with tagit's solution but it still show message twice.
0
 
Robert SchuttSoftware EngineerCommented:
In your page I find:
<script type="text/javascript" src="http://v2.wpgroupbuy.com/wp-content/themes/WPGroupbuy/js/jquery.template.js"></script>

Open in new window

*and*
<script type='text/javascript' src='http://v2.wpgroupbuy.com/wp-content/themes/WPGroupbuy/js/jquery.template.js?ver=2.0'></script>

Open in new window

This seems to be essentially the same script and the code that shows the notification is in there, and is indeed being executed twice.

So I would say, delete one of those references and it should be ok, but still of course you should take notice of the earlier remarks about creating valid html and deciding on right event to trigger on.
0
 
RobOwner (Aidellio)Commented:
Additionally to what robert_shutt has said, you're also including jQuery twice:

view-source:http://v2.wpgroupbuy.com/cart/

line 28: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

line 48: <script type='text/javascript' src='http://v2.wpgroupbuy.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
0
 
RobOwner (Aidellio)Commented:
jquery UI twice

line 29: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>

line 70-72:
<script type='text/javascript' src='http://v2.wpgroupbuy.com/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.10.3'></script>
<script type='text/javascript' src='http://v2.wpgroupbuy.com/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.10.3'></script>
<script type='text/javascript' src='http://v2.wpgroupbuy.com/wp-includes/js/jquery/ui/jquery.ui.tabs.min.js?ver=1.10.3'></script>
0
 
RobOwner (Aidellio)Commented:
All these are going to cause conflicts unless you're separating them with .noConflict and assigning the returned object to a variable (other than jQuery)
0
 
RobOwner (Aidellio)Commented:
You've also got <script> tags all through your <body>.  This is something you should be aware of and how it affects the execution and redering of the page.
I personally have everything in the head.  If I need script to load after the page is ready then I do that with script.  the defer and async attributes can also be used for this purpose but I see no advantage to putting script tags in the <body>
0
 
tkienAuthor Commented:
thank you for comments, I found the issue, just add .not(":animated")

jQuery('#notification').has('.wg-message').not(":animated").slideDown('medium');

Open in new window


and it works :)
0
 
RobOwner (Aidellio)Commented:
That's called a hack :-). In other words you're masking an issue instead of fixing it.
you will still find other issues with your site unless you fix the issues listed here.
0
 
tkienAuthor Commented:
Thank you all for support :) I've found other issues from your comments.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now