How to resolve JQuery and Prototype 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

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.

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

Solution1 – Override the $-function

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

Comments

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