Sitecore 8 Experience Editor with jQuery

Xing Liu • 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.

Xing Liu

Xing Liu is a Sitecore MVP with expertise in all aspects of ASP.NET and SQL Server development across a variety of industries including Government, Banking, Healthcare and Energy. He provides technical thought leadership and consulting to SymSoft and client development teams. Xing has deep expertise in using Sitecore Helix in an Agile delivery model to streamline the construction of complex Sitecore websites, portals and their associated authoring environments. Xing is also a globally recognized photographer with an Instagram following approaching 100,000.

Explore topics:

Other Blog Posts from Xing Liu