jquery.js conflicts with prototype.js

Question

I'm using prototype.js for light box window and jquery.validate.js using for form validation in same window but both the scripts are getting conflicts

i used noconflict function but light box only working form validation is not working

light box script

<script type="text/javascript" src="javascripts/prototype.js"> </script>
<script type="text/javascript" src="javascripts/effects.js"> </script>
<script type="text/javascript" src="javascripts/window.js"> </script>
<script type="text/javascript" src="javascripts/window_effects.js"> </script>
<script type="text/javascript" src="javascripts/debug.js"> </script>

validation sctipt

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

Also as a side note, there's a lightbox plugin for jQuery...so do you even need to use both libraries? — Nick Craver, Jul 22 '10 at 05:20

score 3 · Answer 1 · edited May 23 '17 at 12:06

If you call jQuery.noConflict(); it would not associate $ with jQuery.

Then you would just use jquery functions as JQuery(element).html() and Prototype with $.

As Nick suggested, there's a lightbox jQuery plugin, which can be found here

If you really need to use both, this answer has some information that might help you.

But it might be best to stick with one library to avoid the hassle.

score 1 · Answer 2 · edited Sep 20 '11 at 00:01

SOLUTION:

<!--<script type="text/javascript" src="scripts/prototype.js"></script>-->
<!--<script type="text/javascript" src="scripts/lightbox.js"></script>-->       
<script type="text/javascript" src="scripts/mootools.js"></script>
<script type="text/javascript" src="scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/videobox.js"></script>    
<!--<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>-->    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>   
<script type="text/javascript" src="scripts/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="scripts/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/jquery.fancybox-1.3.4.css" media="screen" />

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

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.boxgrid.caption').each(function () {
            jQuery(this).mouseenter (function() {
                jQuery(this).find(".cover").animate({top:'50px'}, {queue:false, duration:160});
            });     
            jQuery(this).mouseleave (function() {
                jQuery(this).find(".cover").animate({top:'150px'}, {queue:false, duration:160});
            });     
        });
        jQuery("a.external").fancybox();
    });
</script>

score 0 · Answer 3 · answered Aug 03 '10 at 23:21

If you put <script src="jquery.js"> (and all the other jQuery stuff) first, then embed the prototype scripts, Prototype will overwrite anything that jQuery defines that conflicts with Prototype (ie. $ will belong to Prototype). Then, Lightbox can use Prototype via the $ variable and you can use jQuery(...) instead of $(...) for jQuery stuff.

Details from jQuery docs

jquery.js conflicts with prototype.js

3 Answers3

Linked