Javascript conflict on my html page

Question

Hello,

I have an accordion menu and a lightwindow script on my web page. The lightwindow script does not work because of the accordion script because if I delete the latter the lightwindow script works. There must be a conflict but what?

Here is the head section of my page:

<!-- lightwindow files -->
<script type="text/javascript" src="lightwindow/javascript/prototype.js"></script>
<script type="text/javascript" src="lightwindow/javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script>
<link rel="stylesheet" href="lightwindow/css/lightwindow.css" type="text/css" media="screen" />


<!-- accordion scripts -->
<script src="js/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/accordion.css" />

Thank you for your time.

Cheers

tochiro

Answer 1

You might have a method/function defined in both libraries with the same name.

If not a duplicate method/fucntion name, check for duplicate global variable names.

I've run into conflicts several times when trying to add methods to the document that overwrote each other.

Answer 2

You almost certainly have a conflict between JQuery and Prototype. They both define $ for instance.

JQuery has a compatibility mode that you can enable to avoid conflicts.

Answer 3

You would need to use the jQuery.noConflict method described at http://docs.jquery.com/Core/jQuery.noConflict.

Not for certain if version 1.2.1 will have it though.

Just read the instructions on that page for how to wire it up. First thing is that you'll need to put jQuery before the other libraries.

Update: added the code below to help you apply the fix. If the line jQuery.noConflict() causes an error then you may need to try a newer version of jQuery.

<script src="js/jquery-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript"> jQuery.noConflict() </script>

<!-- lightwindow files -->
<script type="text/javascript" src="lightwindow/javascript/prototype.js"></script>
<script type="text/javascript" src="lightwindow/javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script>
<link rel="stylesheet" href="lightwindow/css/lightwindow.css" type="text/css" media="screen" />


<!-- accordion scripts -->
<script src="js/menu.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/accordion.css" />

Also, NOTE you may need to swap some of your code from $(...) to jQuery(...)

From the jQuery doc page:

where you used to do $("div p"), you now must do jQuery("div p").

Answer 4

<script type="text/javascript"> jQuery.noConflict() </script> 

Just wanted to say that this litle trick worked wonders for me thanks. If you use chronoforms this is probably the answer to your javascript problems.

No more "DONE BUT WITH ERRORS ON PAGE" Finally.

Thanks again