Editing Par in Design Mode Causes JavaScript Error

I have no idea how this happened, but clicking Edit in design mode for par (text component) generates a script error in widget.js. All other components work fine in when you click to edit them.

Here are console dumps of the errors:

Firefox: Error: TypeError: this.items.items[(i + 1)] is undefined Source File: http://localhost:4502/libs/cq/ui/widgets.js Line: 147092

The full block of code in question:

if (title != this.items.items[i + 1].title) {
  // next title is different >> break

Chrome: Uncaught TypeError: Cannot read property 'title' of undefined, widgets.js:147092

Some of the included trace paths of the above error:

CQ.Ext.form.FieldSet.listeners.render widgets.js:147092
EXTUTIL.Event.fire widgets.js:9214
EXTUTIL.Observable.fireEvent widgets.js:8860
CQ.Ext.extend.render widgets.js:22566
CQ.Ext.layout.ContainerLayout.CQ.Ext.extend.renderItem widgets.js:26452
CQ.Ext.layout.FormLayout.CQ.Ext.extend.renderItem widgets.js:28653
CQ.Ext.layout.ContainerLayout.CQ.Ext.extend.renderAll widgets.js:26443
CQ.Ext.layout.ContainerLayout.CQ.Ext.extend.onLayout widgets.js:26429
CQ.Ext.layout.AnchorLayout.CQ.Ext.extend.onLayout widgets.js:26961

Where is the title for par located? It's not included in the text component as a standalone item, so something doesn't make sense here.



This issue is not due to issue with the title of the "par" but the title of the components. Basically, when you click on the edit button of parsys in design mode, it lists down all the components that are present in your instance (components that are under both /libs and /apps).

This is done by the ComponentSelector.js present in your widget library. The component selector collects all the groups and components in your instance, ignores the groups that start with a "." (e.g. .hidden), ignores those components without a title, orders all the groups in ascending order of their titles, and then orders all the components under a particular group in ascending order and finally displays the list to the author, where the author gets to select the allowed components for that particular parsys.

Now, if there are 2 or more components present with the same name and the same group in your instance, then it tries to append the name of the project behind the component name, for easy identification(when ordered in ascending, these components appear adjacent to each other and it becomes difficult for the author to identify which app the component belongs to). So, for e.g., if there is a component called "downloads" under foundation as well as geometrixx and so on, then it displays it as downloads(foundation) and downloads(geometrixx) and so on.

This piece of code that you mentioned, checks whether the title of the current component and the next one is same, and in case it is different, it breaks the loop, else continues in the loop to append the project name to the title.

if (title != this.items.items[i + 1].title) {
  // next title is different >> break

Now, this condition works fine, if the titles of adjacent components under a particular group are same, unless and until the components with the same title are the last ones in that particular group, when ordered ascendingly. If, the last 2 components in a group has the same title, then this.items.items[i + 1] would be null(array index out of bounds exception) when the title for the last element is being checked with the next one and hence .title on an undefined object throws the exception Uncaught TypeError: Cannot read property 'title' of undefined, widgets.js:147092.

You can fix this either by replacing the above condition with the following

if (i != length - 1 && title != this.items.items[i + 1].title) {
    // next title is different >> break

Or by making sure that last two component under the same group doesn't have the same name. (This basically happens when you try to copy paste components. Hence making sure to change the title or group after copying an existing component would avoid this issue).


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.