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
– Nick Craver, Commented Jul 22, 2010 at 5:20

Community · Accepted Answer · 2017-05-23 12:06:59Z

3

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.

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Jul 22, 2010 at 6:27

Tom

Sign up to request clarification or add additional context in comments.

Comments

LPL · Accepted Answer · 2011-09-20 00:01:12Z

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>

jhartz · Accepted Answer · 2010-08-03 23:21:03Z

0

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

answered Aug 3, 2010 at 23:21

jhartz

1,5969 silver badges12 bronze badges

Collectives™ on Stack Overflow

jquery.js conflicts with prototype.js

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related