Problems trying to use two different scripts in same page

[adeking]

Hi,

I am developing a site and have used a peice of JQuery javascript for my search box. I am also trying to implement Lightbox for images. I can only get one or the other to work.

If I comment out 1 script then the other works fine and vice versa. If I try to have both scripts running the page opens fine (but with errors) and the JQuery script does not work.

The code in my header is below....

<script type="text/javascript" src="js/jquery.js"></script>
<script language="JavaScript" src="js/jquery.hint.js" type="text/JavaScript"></script>

<script type="text/javascript" charset="utf-8">
$(function(){
// find all the input elements with title attributes
$('input[title!=""]').hint();
});
</script>

<script type="text/javascript" src="<?php print $root."lightbox2.04/js/prototype.js"?>"></script>
<script type="text/javascript" src="<?php print $root."lightbox2.04/js/scriptaculous.js?load=effects,builder"?>"></script>
<script type="text/javascript" src="<?php print $root."lightbox2.04/js/lightbox.js"?>"></script>

 

[BabyJeffy]

The problem is the conflict between jQuery and Prototype (both are javascript frameworks). There is a solution. The order that the libraries are loaded in is important, as is a directive to jQuery. Here is the order I would suggest (for your js files - including the noConflict() call):

...
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="lightbox.js"></script> ...

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[adeking]

Hi,

Thanks for the expert advice. Unfortnately it still is not working. I have implemented your ideas as I feel I am closer to getting it resolved. The code now stands as

...<script type="text/javascript" src="js/common.js"></script>
<script language="JavaScript" src="tabs/nav-h.js" type="text/JavaScript"></script>

<script type="text/javascript" src="<?php print $root."lightbox2.04/js/prototype.js"?>"></script>
<script type="text/javascript" src="<?php print $root."lightbox2.04/js/scriptaculous.js?load=effects,builder"?>"></script>

<script type="text/javascript" src="<?php print $root."js/jquery.js"?>"></script>
<script language="JavaScript" src="<?php print $root."js/jquery.hint.js"?>" type="text/JavaScript"></script>
<script type="text/javascript">jQuery.noConflict();</script>


<script type="text/javascript" src="<?php print $root."lightbox2.04/js/lightbox.js"?>"></script>

<script type="text/javascript" charset="utf-8">
$(function(){
// find all the input elements with title attributes
$('input[title!=""]').hint();
});
</script>...

 

[BabyJeffy]

I would imagine it's the result of loading the jquery.hint.js file before you have set the noConflict() code. See if moving the jquery.hint.js file down a line (so that it occurs after the noConflict() call) fixes things.

You can read more about this at the jQuery site here:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094