Solved

JQuery Conflicts?

Posted on 2013-06-23
9
348 Views
Last Modified: 2013-06-24
I have a site that utilizes a couple of different jquery scripts from different sources.  The second one (a drop-down menu script) seems to be cancelling out another one (a countdown timer).  Is there something that I need to be aware of when utilizing multiple jquery references?

Thanks!
0
Comment
Question by:Bob Schneider
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 4

Assisted Solution

by:Ahmed Hussein
Ahmed Hussein earned 125 total points
ID: 39269244
Try rearranging the JavaScript files inside the html code

1- jquery
2- Countdown  Timer
3- Drop-down menu

use this order and it should work with you.

Best Regards.
0
 

Author Comment

by:Bob Schneider
ID: 39269255
Thanks.  Its a little more complicated than that so here is what I have:

On the page with the countdown timer I have this in the head section:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="/misc/countdown/jquery.countdown.js"></script>

<link rel="stylesheet" type="text/css" href="/misc/styles.css">
<script src="/misc/scripts.js" type="text/javascript"></script>

<style type="text/css">@import "/misc/countdown/jquery.countdown.css";</style> 

<!--#include file = "../includes/meta.asp" -->
<!--#include file = "../includes/time_out_script.asp" -->

Open in new window


The meta include has this:
<meta name="GENERATOR" Content="Microsoft Visual Studio 6.0">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="A team manager and training log for cross-country, track & field, and fitness clubs.  Ideal for use as an off-season training log.">
<meta name="postinfo" content="/scripts/postinfo.asp">
<meta name="distribution" content="global">
<link rel="shortcut icon" href="/favicon.ico">

<meta property="og:title" content="eTRaXC Running &amp; Fitness Team Manager" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.etraxc.com" />
<meta property="og:image" content="http://www.etraxc.com/graphics/logo_large.gif" />
<meta property="og:site_name" content="eTRaXC" />
<meta property="fb:admins" content="509779604" />

<link type="text/css" href="/drop_menu/menu.css" rel="stylesheet" />
<script type="text/javascript" src="/drop_menu/jquery.js"></script>
<script type="text/javascript" src="/drop_menu/menu.js"></script>

Open in new window


The time-out script is just a java script to log out of the app if the session expires:
<script type="text/javascript">
<!--
var elapsedTime = 0;
// set to the Session.Timeout value to notify users
// one minute after their Session times out.
var maxTime = (<%=Session.Timeout%>) * 60;
var oneSecond;
oneSecond = window.setTimeout("timeoutCheck();",1000);
function timeoutCheck() {
    elapsedTime = elapsedTime + 1;
    if (elapsedTime > maxTime) {
        window.location = "http://www.etraxc.com";
    }
    else {
      oneSecond = window.setTimeout("timeoutCheck();",1000);
    }
}
-->
</script>

Open in new window


I have tried re-arranging from within this structure as best I can to no avail, but if I remove the dropdown references then the countdown timer works.
0
 
LVL 15

Assisted Solution

by:Insoftservice
Insoftservice earned 250 total points
ID: 39269296
In meta tags jquery has been repeated.
<script type="text/javascript" src="/drop_menu/jquery.js"></script>
I hope it would be be lower version of jquery.
Can we check it online so that we could resolve it more easily, as we are just looking at issue on air.
Steps to be followed
 1> Please specify error in firebug
 2> check whether timeoutCheck() is being called, check after which line it does not provides alert.
Hope you have idea to use alert or debugger.
0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 

Author Comment

by:Bob Schneider
ID: 39269346
I am a little new to jquery.  I haev a couple of questions:

Should there only be one jquery.js in every site?  
If so, should it be the latest version?  

If some functionality was using a previous version would they still function with later versions?
0
 
LVL 15

Assisted Solution

by:Insoftservice
Insoftservice earned 250 total points
ID: 39269688
I hope you mean to say every page, answer is no.
One jquery.js files is enough.
Ya it can be the case where functionality conflicts with old version of jquery .
Try to use latest one as jquery normally keeps its backward compatibility.
Use jquery.js wisely which means if your whole site requires js then it has to be in such section of page (as normally developers breaks pages into different sections) which would be used in all pages
0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 125 total points
ID: 39270133
Can you post your url ?? that will help to see what you are doing ?
0
 

Author Comment

by:Bob Schneider
ID: 39271879
www.etraxc.com  then select H51 Athletics from the Quick Access dropdown.  BTW I made a couple of changes and for now it appears to be working but I may repost this because I am currently adding a jquery menu that was problematic before I made these changes.  So I will close this now and then repost if needed.

As always, thanks so much for your help!
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 39272341
"Can you post your url ?? that will help to see what you are doing ? "

How this post was given "Accepted solution" status.
Please explain
0
 

Author Comment

by:Bob Schneider
ID: 39272677
I usually give anyone who took the time to assist me with my problem some points.  I probably should not have given this response as many points as I did but I don't have the time to weigh each response with  its overall value.  Note that this person was participating in the discussion with other responses as well.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ASP AND XML 3 30
ASP Classic Query that needs to display more information 18 35
Flex container in CSS 8 27
Glitching Slide Show 19 27
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question