Sitecore Page Editor Javascript Error

Question

In the sitecore project I'm currently working on, we've noticed that our Page Editor is not behaving like a Vanilla install's Page Editor. For every placeholder we must click twice to get the editor to focus on that placeholder. On the first click, the tool-bar pop-up focus changes to point at the placeholder or sublayout that we just clicked on but only highlights that item on the second click.

I believe this bahavior is due to a JS error we're getting. The error is:

Uncaught TypeError: Cannot read property 'sc-renderMoreSection' of undefined 
renderTemplate 
Sitecore.PageModes.ChromeControls.Base.extend.renderMoreSection
Sitecore.PageModes.ChromeControls.Base.extend.updateCommands
Sitecore.PageModes.ChromeControls.Base.extend.show
Sitecore.PageModes.SelectionFrame.Sitecore.PageModes.ChromeFrame.extend.showSides
value
Sitecore.PageModes.ChromeFrame.Base.extend.show
Sitecore.PageModes.SelectionFrame.Sitecore.PageModes.ChromeFrame.extend.show     
value 
select
Sitecore.PageModes.Chrome.Base.extend._clickHandler
c jquery.noconflict.js:16
d.event.handle jquery.noconflict.js:16
k.handle.m

The JS is located in a generated script that seems to be pretty standard across Sitecore installations. The method where this error is occuring is

this.renderTemplate = function(templateName, template, data, options) {
   if (!$sc.template[templateName]) {
      $sc.template(templateName, template);
   }
  return $sc.tmpl(templateName, data, options);
};

in the !$sc.template[templateName] statement because template is undefined.

Has anyone run into anything similar before? Anyone have any idea what might cause this issue?

We are running Sitecore 6.5 and jQuery 1.7.2

EDIT: After a day of troubleshooting this issue, I've discovered the following:

Sitecore's page editor is overwriting our version of jQuery, 1.7.1, which we run in no-conflict mode with its own version, 1.5.1, which it runs in no-conflict mode. Our scripts no-conflict to a $$$ alias and sitecore no-conflicts to $sc. At the end of it all, our $ is jquery 1.5.1 (which puzzles me, as it should be returned to the standard $ if I understand no-conflict correctly).

This shouldn't matter as far as the page editor is concerned. The page I'm testing my tweaks on doesn't use jQuery dependent on 1.7. The issue is related to the "Template" jquery plugin that the sitecore page editor script includes. For reasons I have not be able to identify, this module is not working in the page editor and is the source of the error. Our other Sitecore sites still function using the one this site is including. Removing the template plugin causes other sites to behave the way our site currently is.

Also, Sitecore includes prototype in this script as well, but not mapped to $

Do you get the error on all your pages or just some of them? What version of Sitecore are you using? Are you using jQuery or another library in your own project? What version? — jammykam
The error is on every page when the page editor is active. We are using Sitecore 6.5 and jQuery 1.7.2 — Jesan Fafon
Some debugging steps to rule out a conflict like Martijn suggested, remove your own JavaScript in your code and see if you still have an error (so it is just Sitecore JS). You should be using closures, anonymous functions and namespaces to avoid conflicts anyway: blog.navigationarts.com/… — jammykam
We are doing all of these things. I disabled our javascript and nothing changed. — Jesan Fafon

Martijn van der Put Martijn van der Put · Accepted Answer · 2013-04-24T20:43:42

Try to use jQuery in your code in the NoConflict mode as jQuery uses the $ sign but Sitecore also, which could cause conflicts.

jQuery.noConflict();

After doing this you need to use jQuery instead of $ when calling jQuery script or create a new function which embeds your jQuery script as described in the link below.

Sitecore Page Editor Javascript Error

2 Answers