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 has 5 years of experience with developing web solutions using ASP.NET and SQL Server. For the past 3 years, he has been actively engaged in website development projects using Sitecore CMS. He enjoys creating web solutions for clients using Sitecore CMS and, using its flexibility, provides cohesive and integrated solutions. Xing is a Sitecore Technology MVP, 2016.

Explore topics:

Other Blog Posts from Xing Liu



Subscribe for insights, trends and big ideas