Sitecore 8 Experience Editor with jQuery

Posted by Xing Liu on 10/16/2015

In the Sitecore 8 development, often times we encounter jQuery error such as “$ is not defined” when the page is in the Preview or Editor mode.   This is because the Sitecore ribbon is using Prototype.js plug-in, which is also using the $ as the global variable.

In order to solve this, you need to wrap your jquery functions with the following:

+function( $ ) 
{
 //Your javascript code here 
}( jQuery );

Also, in your layout page, you have to use the noConflict() function call to avoid conflict in the page editor mode.

@if (Sitecore.Context.PageMode.IsPageEditor)
{
<script>$.noConflict();</script>
}
This fix will avoid the jQuery conflict with Sitecore Experience Editor’s Prototype.js plug-in.


CONTACT SYMSOFT SOLUTIONS

Looking for a partner who will exceed your expectations? Get in touch.

Name
*
Message
*
SYMSOFT SOLUTIONS 4090 Truxel Road, Suite 200 Sacramento, CA 95834
United States (916) 567-1740