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.

Web Design Agency Search



Follow Us on Pinterest


Read Our TimeLine

Share With Us on Pinterest


Web Templates Sale



Sedo - Buy and Sell Domain Names and Websites project info: youneeditall.com Statistics for project youneeditall.com etracker® web controlling instead of log file analysis
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.

 








Professional Website Design, eCommerce Programming, SEO and Marketing Agency in New York
Email Us @ 2004-2017 © All rights reserved