We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

RTE problem: Expression has changed after it was checked

Thread ID:

Created:

Updated:

Platform:

Replies:

132152 Aug 16,2017 04:21 PM Aug 21,2017 06:05 AM Angular 3
loading
Tags: ejRTE
Marko
Asked On August 16, 2017 04:21 PM

Hi,

I have the following code:
<textarea
id="fixTextArea"
ej-rte
[(value)]="newTask.remarks"
></textarea>
And when I set following:
newTask.remarks = "<p><ul><li>TTTT</li></ul></p>";
I get the following error:
EXCEPTION: Error in ./TaskModalComponent class TaskModalComponent - inline template:91:104 caused by: Expression has changed after it was checked. Previous value: '<p><ul><li>TTTT</li></ul></p>'. Current value: '<p></p><ul><li>TTTT</li></ul><p></p>'.


If I remove ej-rte from textarea, then I don't get error. Also if string dosen't have ul inside p, there will be no error. newTask.remarks is deffault "" and it is re-setted when reciving Observable response. If newTask.remarks has ul inside p on load, then there is also no error.
The original HTML (which also don't work) was created by RTE and it has been the following:
"<p></p>ghi<br><p></p><p><ul><li>asf safsa fsadfads</li><li>a sdfasdfdsaf a</li><li>&nbsp;sdf dsf asdf as</li></ul></p>"
If I remove ul element from HTML, then all works well.

So I wonder if is this the RTE problem?

I will be greatfull for any help you can provide,
Marko

Keerthana Rajendran [Syncfusion]
Replied On August 17, 2017 08:37 AM

  
Hi Marko,   
 
Thank you for contacting Syncfusion support. 
 
Query: I get the following error:
EXCEPTION: Error in ./TaskModalComponent class TaskModalComponent - inline template:91:104 caused by: Expression has changed after it was checked. Previous value: '<p><ul><li>TTTT</li></ul></p>'. Current value: '<p></p><ul><li>TTTT</li></ul><p></p>'.
 
We prepared a sample based on the shared code. Unfortunately we were unable to reproduce the reported exception in our end. Also , we couldn’t view the updated image. We have attached sample for your reference. Please download the sample from : 
 
 
Please modify the above sample to reproduce the issue so that we can analyze and provide a better solution 
 
Query: If I remove ej-rte from textarea, then I don't get error. Also if string dosen't have ul inside p, there will be no error. newTask.remarks is default "" and it is re-setted when receiving Observable response. If newTask.remarks has ul inside p on load, then there is also no error.
The original HTML (which also don't work) was created by RTE and it has been the following: 
"
<p></p>ghi<br><p></p><p><ul><li>asf safsa fsadfads</li><li>a sdfasdfdsaf a</li><li>&nbsp;sdf dsf asdf as</li></ul></p>"
If I remove ul element from HTML, then all works well.
 
As per HTML specification, ul element is not valid inside <p> element. So inside RTE iframe the element structure is changed as “<p></p><ul><li>TTTT</li></ul><p></p>”.We suspect that you have received this in current value mentioned in your update. We have ensured this with iframe element  and the behaviour is same . Please refer to the below jsfiddle link 
 
 
 
 
 
Regards, 
Keerthana. 
 


Marko
Replied On August 19, 2017 09:37 AM

Hi,

I read an artical here, and saw that to this issue comes when is not enabled enableProdMode, so just in development mode when comes to double checking...

As you requested, I am attaching ZIP with example where comes to problem when clicking on any of two buttons in example (which simulating http get request).

Regards,
Marko


Attachment: sync_b654c11f.zip

Keerthana Rajendran [Syncfusion]
Replied On August 21, 2017 06:05 AM

Hi Marko,   
   
QueryI read an article  here, and saw that to this issue comes when is not enabled enableProdMode   
   
Yes, as you mentioned if we enable production mode using enableProdMode the issue has been resolved.   
   
Query: So just in development mode when comes to double checking...   
   
In development mode, you can resolve this by running change detection explicitly. Please refer to the given code    
   
constructor(private httpHttp,private cdChangeDetectorRef) {   
  }   
   
  ngAfterViewChecked()   
{   
   this.cd.detectChanges();   
}   
   
   
We have added this to your sample and attached in the below link   
   
   
Regards,      
Keerthana.   


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;