jQuery: Using prototype and jquery together
JavaScript is a powerful tool for a website but to extend the capabilities and functionality extra libraries can be included, the most commonly used libraries are jQuery and Prototype. Normally a website will choose either of these libraries but sometimes both libraries are required, if this is the case a small change needs to be performed to stop the two libraries conflicting.
Both jQuery and Prototype try to bind to the $ character for easy and quick referencing but due to this bind both libraries conflict leading to one loading incorrectly.
Resolving the conflict
Jquery has a noConflicts() function which when used stops it binding to the normal “$” character we can still access jQuery simply by replacing “$” with jQuery. This is how we call the noConflicts() function.
|
1 |
jQuery.noConflicts(); |
It must be placed straight after the line of code which includes the jQuery library. After that the following code will no longer work due to jQuery not binding to “$” but this will resolve all compatibility issues between the two libraries.
|
1 |
$(‘#maincontent’).css(‘background’, ‘red’); |
The above can still be achieved by using the following instead.
|
1 |
jQuery(‘#maincontent’).css(‘background’, ‘red’); |
You can read into this more from the official documentation found at:
http://api.jquery.com/jQuery.noConflict/
Bind jQuery to another character
Typing jQuery every time we want to reference jQuery can be long winded so we can rebind jQuery to another variable for quick and easy referencing. The following will bind jQuery to “$j”.
|
1 |
var $j = jQuery; |
Now we can type the commands used above like so
|
1 |
$j(‘#maincontent’).css(‘background’, ‘red’); |
It has come to my attention that if call the noConflicts function and assign the output to a variable it will perform both the unbinding and new binding in one step.
|
1 |
var j = jQuery.noConflicts(); |
The example above will unbind from the normal “$” character and rebind to the new character which in this case is “j”.
I would recommend that when you include the jQuery library files that you called the noConflicts() function immediately after and then perform your binding.
Extra / Advanced
Unbinding and rebinding is probably the easiest but it’s still possible to use the “$” character even when you have unbound jQuery using the noConflict function. JQuery offers the ability to continue using the “$” character in specific instances normally with in a function or call back, this allows us to continue using “$” for all are jQuery referencing at a specific point but it will not cause conflicts between other libraries. Below is an example of code which allow you to continue using “$”.
|
1 2 3 4 |
jQuery(document).ready(function($) { // Code that uses jQuery's $ can follow here. }); // Code that uses other library's $ can follow here. |
By providing the “$” character in the function arguments we tell jQuery that we want to temporally bind jQuery to “$” but only for the code during this function and straight after jQuery lets go of the binding and the other libraries doesn’t even know. Here is more examples.
|
1 2 3 4 |
jQuery(document).ready(function($) { // Code that uses jQuery's $ can follow here. }); // Code that uses other library's $ can follow here. |
|
1 2 3 4 5 6 |
(function($) { $(function() { // more code using $ as alias to jQuery }); })(jQuery); // other code using $ as an alias to the other library |
Conclusion
It may not be the solution you’re looking for but it works, I prefer jQuery so would like to rebind Prototype and leave jQuery bound to “$” but Prototype doesn’t have this ability so the only solution to using both of the libraries is to rebind jQuery.
After writing this I found out about the ability to temporarily continue using jQuery alias “$” within certain instances, I have update this post and you can read these changes in the Extra / Advanced section. Using these methods gives you all your normal operation of jQuery if used correctly.