Thinking Web Publishing? Think www.YouNeedItAll.com!
Custom Website Design and re Design, Custom Website Development, Social Media Networking, B2B Networking, Search Engine Optimizations and Online Marketing.
How to Make JQuery and Prototype work on same page?
How to Make JQuery and Prototype
Web Development and Web Technology
Written by Nikolay Gul   
How to Make JQuery and Prototype 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.

<pre><code>
<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>
</code>
</pre>

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;

<code><pre>

<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>

 

</pre></code>

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.
 
Web developer in Syracuse - Joomla, Drupal and WordPress CMS Developer in Syracuse New York - Google Map Developer in CNY - You Need It All for your Website
Web Templates Sale, Full site templates Sale, flash templates sale




Web Designer, Social Media Networking Manager, B2B Networking, SEO and Online Marketing Specialist.
Nikolay Gul - Web designer and developer in Syracuse New York
Email or Call:(315) 378-9729 and Search for www.YouNeedItAll.com @ Nikolay Gul 2004-2010 © All rights reserved