Solved

JQuery Conflicts?

Posted on 2013-06-23
9
341 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 15

Assisted Solution

by:Insoftservice
Insoftservice earned 250 total points
Comment Utility
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
Comment Utility
Can you post your url ?? that will help to see what you are doing ?
0
 

Author Comment

by:Bob Schneider
Comment Utility
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
Comment Utility
"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
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

772 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

13 Experts available now in Live!

Get 1:1 Help Now