There’s a conflict using both libraries, jQuery and Prototype on same page, because both use the same namespace of ‘$’. To fix it we need to know, that Prototype library doesn’t allow too much to change, but jQuery is such flexible, that even supports different namespacing.
Here’s example (one of many solutions):
download (zip as jpg, change extension to zip!!!)
<!DOCTYPE htmlPUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”><head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>jQuery and Prototype conflict – FIX</title><!– define Prototype as 1st –>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js”></script>
<!– define jQuery as 2nd –>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script><!– script space is default for Prototype, we must invoke jQuery script by: –>
<script type=”text/javascript”>
<!– invoke jQuery: –>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(‘div#jQuery’).text(“jQuery script executed !!!”);
});<!– Prototype (nothing to change, Prototype doesn’t support something similar as jQuery.noConflict(); –>
document.observe(“dom:loaded”, function() {
$(‘prototype’).update(‘Prototype script executed !!!’);
$(‘prototype’).innerHTML;
});
</script>
</head><body>
<div id=”jQuery”>jQuery script NOT executed</div>
<div id=”prototype”>Prototype script NOT executed</div>
</body>
</html>
IT's a passion 
