The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.
By kanandkumar on
Hi,
I am a drupal and Javascript newbie. I am trying to use a page that uses the prototype library (prototype.js) in a drupal module. My problem is the definition (or is it redefinition) of the function $() in prototype.js! I can see that drupal makes extensive use of the javascript syntax/function $(...). One of the Durpal usages looks like
var element = Drupal.settings.simplemenu.element;
var menu = '<ul id="simplemenu" class="clear-block"></ul>';
switch (Drupal.settings.simplemenu.placement) {
case 'prepend':
$(menu).prependTo(element);
break;
....
But I could not find where the function $() is declared in Drupal. Prototype.js explicitly defines the function $() to which you could pass the html DOM element id as argument (usage: $('contentid')).
Apparently these two declarations are not compatible. I am doing all the tests in firefox. Could someone shed some light on this? I am trying to resolve this conflict.
Thanks.
Anand
Comments
Drupal ships JQuery by
Drupal ships JQuery by default, and JQuery HATES Prototype, lol.
If you are only a Prototype beginner, i suggest you to start learning JQuery, there are a lot of drupal modules based on it.
Workaround by changing Prototype $() function
I started using Drupal this week. I'm converting an existing website to Drupal, and my existing website uses prototype.js. The prototype.js function $() conflicts with jquery.js, which is part of Drupal. Here's a description of the conflict: http://docs.jquery.com/Using_jQuery_with_Other_Libraries.
Jquery suggests overriding their own $() function, but that will be bad for Drupal core. As an easy alternative, I simply renamed the function $() for my existing website. Easy peasy and it works like a champ.
Here's what I did - WARNING - DO NOT USE "REPLACE ALL"
1) Edit prototype.js - find where it defines function $() and change the name to function $$$()
2) Still in prototype.js, carefully replace each occurance of $(...) with $$$(...), but don't touch anything which says $$(...)
3) Edit each of the other *.js files on my existing website and carefully replace each occurance of $(...) with $$$(...), but don't touch anything which says $$(...).
4) Done.
It took me 3 days to identify the problem and 5 minutes to fix it.
THANK YOU!
Worked perfect.