JavaScript
Article
By Sam Deering

How to Use jQuery with Prototype

By Sam Deering
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

I came across a problem when trying to load two JavaScript libraries at the same time! (I do not recommend using more than one JavaScript library unless there is a very good reason to do so as it can increase loading times and the functions can get mixed up due to duplicate declarations etc…).

However, on this occasion I “needed” to use jQuery with Prototype to get this fancy Prototype tooltip window working. This is how I did it:

  1. Store jQuery and Prototype functions in different JavaScript files
  2. Include the jQuery files first
  3. Call the jQuery first

jQuery Code

jQuery(document).ready(function($) {
	//alert("js is working");
	//JQUERY CODE CALLS HERE
	$('a[href=#topbar]').click(function(){
		//etc...
	});
});
--ADVERTISEMENT--

Prototype Code

document.observe('dom:loaded', function() {
  //alert("prototype is working");
  //PROTOTYPE CODE CALLS HERE
  $$('#page-wrapper a[rel]').each(function(element) {
			//etc...
		});
  });
});

HTML Code


More information on using jQuery with other libraries can be found here: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?