Back to recent posts

blog

Web Content Management, Web Development, , ,

Avoiding jQuery’s noConflict() Mode with Prototype and Sitecore April 5th, 2010

Rob Cherny

Rob Cherny

One Comment

Mixx This  /  Save to del.icio.us  /  Share on Facebook

The brevity of the Prototype JavaScript library’s $() (i.e. the “dollar” function) is without a doubt a handy tool and easy to type over, and over, and over again. It caught on quickly as JavaScript frameworks took off and John Resig’s jQuery library used a version of it from the start as well. Of course, this had issues where from time to time both Prototype and jQuery might show up on the same Web page.

The pros and cons of loading more than one JavaScript library over HTTP is of course a whole other article in and of itself. Please always consider the implications of such a move. It’s all about page weight and performance.

jQuery has been the JavaScript framework of choice at NavigationArts for quite some time. It has, for as long as I can remember, featured a method called noConflict() which returns control of the $() function to whatever it was previously defined as. What does that mean? Well, in jQuery, $() is just an alias to the jQuery object, so it removes that alias. It’s done this way:

jQuery.noConflict();
// or you can also do this
$.noConflict();

After that call in your script, you can no longer use jQuery’s $() function, but must instead use jQuery() as the function call which is chained, like this:

jQuery("#worker").remove();

But that sure is long winded, right? If you want a shorter version, you can actually reset the object to something else like this:

j$ = $.noConflict();

So from there on out, your code would look like this:

j$("#worker").remove();

Honestly, I’m not a huge fan of doing that. To me, my coworkers, and some of the editors and tools we use which are actually jQuery aware, it’s just not the same, frankly.

But what does all this have to do with Sitecore?

jQuery and Sitecore

When we started working with Sitecore we quickly noted the problem when the front ends started to effectively break in Page Edit mode. In this mode, Sitecore recognizes that you’re logged into the Sitecore client and outputs extra code for the Sitecore Ribbon which is driven by, sure enough, the Prototype JavaScript library.

Sitecore wizard Alexey Rusakov mentions it in his article, “JavaScript Friends of Sitecore“.

Bottom line, if your page is using jQuery publicly, you need to address the conflict that is going on in order for your pages to work while logged into Sitecore.

Another Sitecore guru, Alex Sheba discusses the noConflict() workaround in his article “jQuery conflicts with PageEditor“.

But there’s that technique again, kind of weak. Instead of worrying about scope issues, how about just isolating all your code and being able to continue to use the $() alias in your jQuery JavaScript?

Passing in the $ Argument to Use the jQuery $() Function

There are actually several ways you can continue to use the $() function, and it essentially comes down to isolating your code in it’s own scope by wrapping the whole of it.

I’ve written about one such technique previously, in my article “JavaScript Growing Up“.

Essentially, if you do this:

(function(){
// wrap all your code in this
})();

All your code will operate in it’s own scope, with no fear of conflicts. So you can continue to use the $() function. So what does this look like? Take the following example:

$.noConflict();
(function($){
     $("#worker").remove();
})(jQuery);

Here we’ve reset the $ variable, but by passing the jQuery object back in, we can continue to use it freely and our editors, plugins, and fingers can still type less and be happy. But what’s great about this is we can build just about anything inside of this block, even setting event handlers, creating objects, methods, and functions freely.

For example:

var Example = {};
(function($){
     Example.test = function(){
          $("#worker").remove();
     }
     $(function(){ // domloaded shortcut
          Example.test();
     });
})(jQuery);

There are more examples on the jQuery API docs page for noConflict(). The jQuery documentation has come a long way, in particular since the 1.4 launch, I highly recommend you check it out.

One Comment for "Avoiding jQuery’s noConflict() Mode with Prototype and Sitecore"

  1. Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher!

    emt training on April 18th, 2010 at 9:34 pm

Careers

We are looking for experienced professionals to join us and contribute to our clients’ success.

View Opportunities