Question

67

TinyMCE not working with Chrome when I dynamically setContent

rated 0 times [ 71] [ 4] / answers: 1 / hits: 22772 / 15 Years ago, sun, august 23, 2009, 12:00:00

I have a site that I put:

<body  onload="ajaxLoad()" >

I have a Javascript function that then inserts data from my database into the text editor by using the setContent Javascript method of the textarea. It seems fine in Firefox and IE but in Chrome sometimes nothing shows up. There is no error, just a blank editor.

In the body section I have:

  <textarea id="elm1" name="elm1" rows="40" cols="60" style="width: 100%"> 

</textarea>

In the head section I have:

function ajaxLoad() {

        var ed = tinyMCE.get('elm1');

        ed.setProgressState(1); // Show progress

        window.setTimeout(function() {

            ed.setProgressState(0); // Hide progress

            ed.setContent('<p style="text-align: center;"><strong><br /><span   style="font-size: small;">General Manager&#39;s Corner</span></strong></p><p style="text-align: center;">August&nbsp;2009</p><p>It&rsquo;s been  15<sup>th</sup> and so have a Steak Night (Saturday, 15<sup>th</sup>) and a shore Dinner planned (Saturday, 22<sup>nd</sup>) this month. urday, September 5<sup>th</sup>. e a can&rsquo;t missed evening, shas extended it one additional week. The last clinic will be the week of August 11<sup>th</sup>. </p><p>&nbsp;Alt (Tuesday through Thursday) </p><p>&nbsp;I wouClub.</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;<strong></strong></p>');

        }, 1);

    }

I am not sure if its some of the formatting that Chrome is rejecting but it seems like if TinyMCE can parse it in one browser, it should be able to do it in any browser, so I am confused.

Any suggestions?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kalaveronicab

Add To Favorites

Follow

Total Points: 3

Total Questions: 100

Total Answers: 105

Location: Guam

Member since Fri, Jun 18, 2021

3 Years ago

kalaveronicab questions

1 Error handling response: TypeError: self.processResponse is not a function

Fri, Jul 15, 22, 00:00, 2 Years ago

1 Can't play video on iOS in Safari: NotAllowedError: The request is not allowed by the user agent or the platform in the current context

Fri, May 27, 22, 00:00, 2 Years ago

1 How to make JSON.parse() to treat all the Numbers as BigInt?

Wed, Oct 20, 21, 00:00, 3 Years ago

1 Discord.Intents(32767) vs [Intents.FLAGS.GUILDS]?

Tue, Aug 17, 21, 00:00, 3 Years ago

1 default sort not working in v-data-table Vuetify

Wed, Feb 10, 21, 00:00, 3 Years ago

View All

answered 15 Years ago irvinjovannix · Accepted Answer

Background:

For various reasons onload() is not considered the proper approach for loading Javascript, see for example Launching Code on Document Ready, with the most important/noticeable one being that Javascript code isn't run until the page has finished downloading entirely, including images and the like, which might take an eternity therefore (e.g. if an external banner ad server is down etc.).

Instead it is recommended to load Javascript as soon as the DOM is ready, but unfortunately there is no cross browser compatible native solution for this, see Getting notified when the page DOM has loaded (but before window.onload); please note that my entire answer is based upon the most excellent Javascript library jQuery, which offers a cross browser solution for this problem, consequently I'd definitely favor the two higher voted answers over the accepted solution myself.

Likely cause:

Your issue seems to be caused by the opposite behavior though: Chrome facilitates the WebKit rendering engine, just like Safari, and for the latter onload() is discussed to behave differently, see section When does onload fire? in Is Safari faster?. Another description of this problem specific to Chrome can be found in window.onload not working correctly in Chrome, without an explanation though.

In conclusion I suspect onload() to fire before the DOM is actually loaded completely, at least concerning the requirements of TinyMCE, which is notoriously fragile regarding issues like this and simply ceases to load.

Possible solution:

Just facilitating attribute defer on the script tag as outlined in window.onload not working correctly in Chrome is again not cross browser compatible, hence I'd simply go with the widely deployed and proven approach of using the already mentioned jQuery cross browser solution for the onload() problem, which is good practice anyway and should in principle take care of your inverse issue as well.

Update:

There are indeed some bugs filed against WebKit which could back my conclusion (no matter whether this behavior actually constitutes a bug or is intentional), see:

onload sometimes fired before all resources are loaded

window.onload fires before all subresources loaded

Window.onload is firing before image resources are loaded