[CKEditor.Reactive] cannot read property 'setData' of undefined

Forge Component
(1)
Published on 7 May by João Rafael Capucha
1 vote
Published on 7 May by João Rafael Capucha

Hi hi,

I am getting the error "cannot read property 'setData' of undefined" whenever i call SetEditorData in my GetDataOnAfterFetch, like this:

Suggestion on how to resolve are welcome.

Saludos,

Wilko

This is where the java script goes wrong:

Do i need to include something somewhere so it finds the setData function?

Saludos,

Wilko

Why did you have to call the "SetEditorData" action?

CKEditor.Reactive is providing the "InputId" property for connecting to your input (text area).

It gets data(HTML text) from your input and adds it to the Editor automatically.

No need calling "SetEditorData" action


wilko odijk wrote:

This is where the java script goes wrong:

Do i need to include something somewhere so it finds the setData function?

Saludos,

Wilko


Please find the demo for reference.

I hope this will help you.

Happy Coding

Amreen


Solution

wilko odijk wrote:

This is where the java script goes wrong:

Do i need to include something somewhere so it finds the setData function?

Saludos,

Wilko

Look likes you don't have CKEditor object instance in your screen.
Could you please check the CKEditor Jquery/Java Script file are added/loaded in your screen.(see using page source of your screen)


Solution

Salman hi,

Somehow that javascript didn't get loaded on the page, resulting in the error. I removed all ckeditor references, removed unused dependencies, published couple of times, and added the ckeditor again to the page, and now it is ok. Thanks for the help.

Saludos,

Wilko

wilko odijk wrote:

Salman hi,

Somehow that javascript didn't get loaded on the page, resulting in the error. I removed all ckeditor references, removed unused dependencies, published couple of times, and added the ckeditor again to the page, and now it is ok. Thanks for the help.

Saludos,

Wilko


Hi,

Good to hear that your problem has been resolved.
Happy coding :)

Thanks,

Salman

Salman hi,

I remember why i did the SetEditorData call in the first place. If i do just the thing that Duc told me, it works, but only the first time. So if have a popup that i open in which the ckeditor is linked to the text input:


the first time i open the popup this happens (all good):

the second time and from there on:

If i close the page and open the popup the first time, there is data again. the second time not.

this is not handy, so i'll revert for now to just the textarea input.

Saludos,

Wilko

You need to re initiate the jquery/java script code when you open second time.So that all the needed JS will be initialized again.


Salman hi,

The textarea and the ckeditor are in a webblock in a popup, which is on a page.

I have two scenarios, one is where the user opens the popup first time (goes well), closes the popup and opens the popup again, and the text does not appear. second is where in the popup the data gets refreshed, after the refresh the text does not appear.

On the main page:

In the webblock:

Do i need to check the ContentChanged event to refresh the java script, and how would i do that? if not on the event, then where could i refresh the js?

in the first scenario, the webblock gets opened again so i could do something on the initialize or on the parameter changed event, in the second scenario there is a client action that creates new content from a refresh of the data fetched for the screen that is linked to the textarea widget, so the reactive should refresh the textarea. I am not sure where and how i can refresh the ckeditor js myself.

Saludos,

Wilko

I had the same behavior, and solve it by deleting the CK Editor object on the OnDestroy event. 

Check my answer, and some screen shots at this post.

https://www.outsystems.com/forums/discussion/55899/referenceerror-ckeditor-reactive-or-is-not-defined-outsystems11/#Post232650

Cheers,

Rui Coutinho

Hi all,

I've just implemented this CKEditor.Reactive in a similar way where I've placed it in a weblock and it should CreateOrUpdate an Aggregate Text description field (that is bound to an inputTextArea off course). I've encountered this undefined error, encountered the editor showing text the first time after opening a sidebar and not the second time and found the demo somewhat lacking on showing correct implementation in this case.

So, in short my implementation that I found to work:
- Screen aggregate for Description is fetched and Aggregate.Description is bound to DescriptionTextArea.Id.
- CKeditor gets input from DescriptionTextArea.Id, but this only works 1 time. Therefore you need the 'SetEditorData' client action to be performed each time.
Here, input = DescriptionTextArea.Id & HTML = GetAggregate.list.current.description.
- So, create a client action to the above, but trigger this client action on the CKEditorReady event. This event probably occurs after the Aggregate.IsDataFetched since this happens at OnInitialize. If you do this client action OnAggregateAfterFetch the CKEditor is probably not Ready yet so I guess that's where the undefined error comes from.
- I use a client action OnDescriptionChange to set a local variable IsChanged that I use in the Save and this is tied to event ContentChanged in CKEditor
- Then in the SaveAction, I use the TransferDataFromEditor client action to put the HTML editor data in the Aggregate.Description before I save this (ifChanged off course).
- When using the DescriptionEditorWeblock in a screen in a sidebar, I also encountered the undefined error. I had to place an If-condition around the whole block to only load the Block if the sidebare was open. For a popup in Reactive I imagine it to be the same.

Hope this helps and clarifies this issue.