Make JQuery and Prototype Love Each Other

Hello Googlers – Are you getting the following mind-boggling error on your web app as well?

Here it is in its expanded form within Firebug:

‘Security error” code: “1000’ ? Real helpful, prototype. Thanks.

So, first of all, it will likely take you a very long time to realize that these errors stem from an incompatibility between JQuery and Prototype. Then, it will probabaly take you even longer to find out why this is the case and devise a workaround.

Well, in the interest of saving you loads of time, here’s what’s going on.

JQuery and Prototype both use the ‘$’ function (yes, the dollar sign) extensively. Unfortunately, each framework defines the $ function differently. Also, only one definition for the dollar sign function can exist at a time. So, either JQuery is happy or Prototype is happy but never both simultaneously.

If you’re trying to use JQuery and Prototype at the same time, you might get an error like the one shown above. Or, you might get an error that’s completely different, given certain variables (e.g. which library was loaded first).

The Solution

The solution is easy. The JQuery guys will tell you exactly what you need to do! In our particular scenario, none of the proposed solutions would work. So, we simply edited prototype.js (and scriptaculous.js, effects.js, lightwindow.js, etc) so that instead of calling ‘$()’, they now call ‘$p()’. This allows our JQuery code to execute flawlessly without modification while still allowing Prototype to function in parallel.

Hope something here helps you get rid of Prototype’s worthless error message too!

Text versions of the error message to aid in search engine indexing:

Short version:
Security error” code: “1000
http://www.qgia.com/qgia/lightwindow/javascript/prototype.js
Line 1264

Long version:
Security error” code: “1000
(no name)()common.js.pkg.php (line 271)
(no name)(“Uncaught exception in hook (`onloadhooks’) #0: LinkController is not defined [at line 400 in http://…”, “error”)common.js.pkg.php (line 271)
(no name)()common.js.pkg.php (line 269)
_runHooks(undefined)common.js.pkg.php (line 152)
_onloadHook()common.js.pkg.php (line 148)
(no name)()common.js.pkg.php (line 155)
null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

13 thoughts on “Make JQuery and Prototype Love Each Other”

  1. Hi vince,
    Yup – it’s pretty much that easy! The main thing to keep in mind is that it’s also legal to call $() with variants like ‘$ (…)’ (note the space). So, I’d recommend doing a search and replace all first, and then going through after (searching for ‘$’), making sure every instance of $() was replaced with $p().

  2. uhm…i dont like the idea of me making changes to jquery hehe, better use:
    jQuery.noConflict();
    jQuery(‘div.Header’).whatever…

    Hope that helps!

  3. Hi sosamv!

    You’re right – we’d rather not modify jQuery if at all possible. However, the noConflict() call wouldn’t work for us due to platform limitations. Note that we technically didn’t make any changes to jQuery – we modified *Prototype* and its supporting libraries. The link I included in the post is the ideal solution (as provided by the jQuery team themselves), but if that doesn’t work for you, this post might help lead to a solution.

    Thanks for your input! 🙂

  4. Hi,

    I had already done that before I found this article and guess what, I found a conflict and am desperate look for a solution.

    both Prototype and jQuery use the .each() method for iterating arrays and objects.

    So even though prototype and jquery works, when you get a jquery plugin like jquery.tabs.js it will break.

    Please advise

    Thanks

  5. Thanks for that post, it helped me figure out the problem i had. A little hint though: the “security error” message is generated by the internal Javascript parser of Firefox, and has nothing to do with prototype. In my case it was jQuery who generated the error, and it happened in different locations. So don’t blame prototype for it.

  6. Thank you…simple and easy

    As for the .each issue. Go through everything in the same manner for search and replace for all your prototype files before you use them. Make it .each -> .peach……….sounds tasty

    Ideal? No…but I’m not giving up my jQuery $ that easily

  7. doesn’t work 🙁
    Hi everyone… i am using jQuery and neeeeeed to use LIGHTWINDOW… I change all $ to $p and nothing happens. Why? Whyyyyy?
    Help?
    Thank you.

Comments are closed.