jQuery and Prototype library conflict on same page – FIX

Posted: 11/11/2013 in html, JQuery, php

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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<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/”></script&gt;
<!– define jQuery as 2nd –>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script&gt;

<!– script space is default for Prototype, we must invoke jQuery script by: –>
<script type=”text/javascript”>
<!– invoke jQuery: –>
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 !!!’);

<div id=”jQuery”>jQuery script NOT executed</div>
<div id=”prototype”>Prototype script NOT executed</div>


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s