Thursday, January 08, 2009

jQuery conflicts with PageEditor


There is such problem, indeed. It is caused by the conflict with Prototype.js that most of Page Editor, including designer and debugger uses. It can be simply worked around by overriding the $-function by calling "jQuery.noConflict()".
<script type="text/javascript" src="/js/jquery-1.2.6.js"></script>
 
<script type="text/javascript">
 
var $j = jQuery.noConflict();
 
      $j(document).ready(function() {
 
      });
 
</script>
More about that on the jQuery website.

9 comments:

Matt Hovany said...

This is a great tip. I prefer jquery over prototype.js, but always assumed it would conflict with scForm stuff.

Unknown said...

Hey Alex,
Great heads up. I was bitten by this very issue today. Any chance Sitecore will use prototype in no-conflict mode in a future release or patch? As you point out, we can use jQuery in no-conflict mode on page, but it would make everything easier if Sitecore used their libraries in no conflict mode so page coders can use whatever libraries they wish in the mode they wish.

Joël Pittet said...

If you want to use the $ without it hurting prototype:

(function($){ // encapsulated $
$(function(){ // Dom Ready Shortcut
alert("Dom Ready!");
});
})(jQuery); // Passing it as the param

Anonymous said...

I know this is an old posting, but it just solved a problem that I've been chasing for at least a day. You're a God!

Unknown said...

Thank you so much for this solution! I would never have been able to figure this out. I just inserted your script after my jQuery was loaded and then changed all my '$' to '$j'.

Unknown said...

Thank you so much for this solution! I would never have been able to figure this out on my own. I just inserted your script after my jQuery and changed all of my '$' to '$j' and it worked like a charm. Page Editor and jQuery are now in some level of harmony at least.

Chris H. said...

Great post man, saved me a lot of time.

Chris H. said...

Great post man, saved me a lot of time.

Anonymous said...

To make your life easier wrap your code in an anonymous function and pass the jQuery variable in. This is probably more obvious if you’re writing some code others will use like a jQuery plugin, but could help save you down the line.



Adding the anonymous function and passing the jQuery variable in will prevent problems later with the $ variable.




(function ($) {
$(document).ready(function () {
// Do some awesome stuff...
});
})(jQuery);