#13218 closed Bug (fixed)
"Uncaught TypeError: Cannot read property 'filter' of undefined " and "Uncaught TypeError: Cannot read property 'removeClass' of undefined " after widget drop
Reported by: | Radoslav Petkov | Owned by: | Szymon Cofalik |
---|---|---|---|
Priority: | Normal | Milestone: | |
Component: | UI : Widgets | Version: | 4.5.0 Beta |
Keywords: | Cc: |
Description
I have strange behaviour with my custom widget that does not happen on other widgets.I thought it is from my plugin.js but it seems the error comes from the CKEditor's widget api and i wanted to share the errors with you.
The attached gif shows in what situation the errors occur.
Here is the code that defines the widget
editor.widgets.add('widgetCast', { template: '<div class="container-fluid layout-container">\ <div class="row layout-row">\ <div id="layout-column-one" class="col-xs-6 col-sm-6 col-md-6 col-lg-6 layout-column">\ <p>content</p>\ </div>\ <div id="layout-column-two" class="col-xs-6 col-sm-6 col-md-6 col-lg-6 layout-column">\ <p>content</p>\ </div>\ </div>\ </div>', upcast: function(element) { return (element.name == 'div' && element.hasClass('layout-container')); }, editables: { layoutColumn1: { selector: '#layout-column-one', allowedContent: allowedContent }, layoutColumn2: { selector: '#layout-column-two', allowedContent: allowedContent } }, allowedContent: allowedContent });
Attachments (4)
Change History (13)
Changed 8 years ago by
Attachment: | widgetBug1.gif added |
---|
Changed 8 years ago by
Attachment: | dropWidgetFilterRemove.gif added |
---|
Another gif representing the same issue
comment:1 Changed 8 years ago by
I think this happens because i am using id as selector and when i insert multiple widgets there are elements in the dom with same ids which is contradicting with the definition of id : 'You can only use an ID name once in any XHTML or HTML document.' Am i right?
Changed 8 years ago by
Attachment: | mywidget.zip added |
---|
comment:2 Changed 8 years ago by
Keywords: | widget filter removed |
---|---|
Status: | new → confirmed |
I have recreated (sort of) this widget. @rpet please review it and tell me if this is what you use?
I think this ticket is valid after all.
I don't think it is good approach to use ids as in such case thus I have changed it to class. (moved id to class and changed the selector (from # to .))
I have then tried moving around the widget until I do to situation shown on overlapping_handles.png. Once you try moving widget from there you are getting JS error thrown.
comment:3 Changed 8 years ago by
Yup thats it, but actually yours is getting this error thrown faster than my previous version.However i have fixed it by using classnames as selectors.
Changed 8 years ago by
Attachment: | mywidget2.zip added |
---|
comment:4 Changed 8 years ago by
@rpet are you able to get scenario where you have overlapping drag handles with your plugin? Are you getting any error then?
I have attached mywidget2 plugin where ids were changed to classes however I'm still getting the error with above scenario. Are there any core differences between your and my sample plugin?
comment:5 Changed 8 years ago by
Strangely but, yes I broke yours then I broke mine the same way.The bug stays.However, I broke it only with this error first: Uncaught TypeError: Cannot read property 'blur' of null.And the widget fields stays focused.Then when i select another field it throws :
'Uncaught TypeError: Cannot read property 'filter' of undefinedm @ plugin.js? t=F3LC:244(anonymous function) @ plugin.js?t=F3LC:380h @ ckeditor.js:10CKEDITOR.event.CKEDITOR.event.fire @ ckeditor.js:11CKEDITOR.editor.CKEDITOR.editor.fire @ ckeditor.js:13a @ ckeditor.js:370(anonymous function) @ ckeditor.js:25 plugin.js?t=F3LC:245 Uncaught TypeError: Cannot read property 'removeClass' of undefined'
comment:6 Changed 8 years ago by
Owner: | set to Szymon Cofalik |
---|---|
Status: | confirmed → assigned |
Gif representing the issue