Solved

JQuery Conflicts?

Posted on 2013-06-23
9
345 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
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
 

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

914 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now