Skip to main content

How to Use jQuery with Prototype

By Sam Deering



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");

Prototype Code

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


<!-- load js libraries -->
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/prototype.js"></script>

<!-- load js functions -->
<script type="text/javascript" src="/js/javascript-jquery.js"></script>
<script type="text/javascript" src="/js/javascript-prototype.js">

More information on using jQuery with other libraries can be found here:

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

Integromat Tower Ad