Home | About | Help Center | Privacy Policy

August 17th, 2009

How to resolve JQuery, Prototype, and lightbox issues to make them work on same page


jQuery emerged as solution for cross platform rich media applications. A featured content gallery , image sliders are few examples of the jquery.

A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX.

Prototype provides class-style Object Oriented and AJAX, freely distributable under the terms of an MIT-style license. Prototype are used with image manipulations and galleries and slitter differ from the Jquery.

While working on few projects i need to use both of the libraries of JQuery and Prototype but normally they don’t work on the samepage due to functions clashes. Ideally jQuery library should not clash with other libraries because it have defined name-spaces with its own names and all the callback global objects are stored inside those jQuery name spaces. Beside the above facts the two different library clashed on the same page. Do you know why? It is because of the shortcut “$”, used to call jQuery.jquery How to resolve JQuery, Prototype, and lightbox issues to make them work on same page

What is the Problem?

My jQuery don’t work with Prototype?

My jQuery don’t work with lightbox?

$-function is the problem.

What is the Solutions?
To remove or modify the cause of the Problem i.e the $-function

Solution1 – Override the $-function

Override the $-function such that it will not conflict with other libraries. This could be done by calling the overriding function jQuery.noConflict() at any point in the header after jQuery script. Overriding function jQuery.noConflict() resolve the Jquery clash with other javascript libraries.

 <html>
 <head>
//This is sample head of your page
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
//This should be include at the end of the both the scripts
<script> //**Start of your patch**//

     jQuery.noConflict();

     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script> //**End of your patch**//

 </head>
 <body></body>
 </html>

Solution2 – Reassign default $-function of jQuery into another shortcut function like $j

Reassign jQuery to another shortcut i.e defined another variable instead of the $-function resolve the jQuery clash with other javascript libraries. For example you can assign

var $j = jQuery;
 
 <html>
 <head>
//This is sample head of your page
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
//This should be include at the end of the both the scripts
 //**Start of your patch which Reassign jQuery to another shortcut**//
   <script>
     var $j = jQuery.noConflict();

     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>

//**End of your patch**//

</head>

<body></body>

</html>

Note: If you used lightbox or other libraries then you can use the same $-function patches to make them work on the same page. If you have any issues with the problem or your problem still not resolved then feel free to ask here.



You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackbackfrom your own site.

Subscribe to our FREE Rss Feed

Hot in Social Media


10 Ways Social Media Can Help Your Business

10 Best Social Media Case Studies

10 Tips To Become Social Without Using Social Media

Top 10 Tips To Enhance Personal Branding

What's Hot

Similar Interesting Posts

Tutorials On

8 Responses to “How to resolve JQuery, Prototype, and lightbox issues to make them work on same page”

  1. How to resolve #jQuery, #Prototype, and #lightbox issues to make them work on same page http://is.gd/2uAGP #$-function

  2. How to resolve #jQuery, #Prototype, and #lightbox issues to make them work on same page http://is.gd/2uAGP #$-function

  3. funky pop up effect on ‘Share this’ Icons – http://bit.ly/2NwP3b

  4. I implemented the solution 2. It is working fine in Firefox but not in IE. Showing operation Aborted error.

  5. How to resolve #jQuery, #Prototype, and #lightbox issues to make them work on same page http://bit.ly/1yhMth

  6. @DaPo http://bit.ly/4Kqsux Google est ton ami :p

  7. Thank you soooooooooooooooooo much!!!!!!!! works like a charm for me!!! ^_^

Leave a Reply

CommentLuv Enabled

Additional comments powered by BackType

    Follow @honeytech On Twitter

    @babychen Yeah, One can create Huffingtonpost with the help of WP, twicks, custom plugins &amp; content structuring. ;P
  • Subscribe For Tips


  • Top Fans Of The Day

  • Sponsors Zone

Hot Tags

Linux Firefox iphone google How to Web design open source blogging Social media ubuntu WordPress Plugin tips free mobile mistakes Internet browser Social Windows Designs