Fixed Common FF AJAX TinyMCE Problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Fixed Common FF AJAX TinyMCE Problem

Post by volomike »

I mixed these three things together: FF (2 or 3, and OS didn't matter) + AJAX + TinyMCE. Occasionally, almost randomly, the red stop button would appear after doing an AJAX call and then not go away. The page would not stop downloading and I'd get the spinning throbber icon, the progressbar in the status bar, and the red stop button. It would happen on Ubuntu Linux and Windows 2008 Server (the two systems I tested) and on FF2 or FF3. When I tested with Opera, Safari, IE6, or IE7, the problem would not appear at all.

I got together with John Resig, maker of jQuery (which was how I was doing the AJAX call through something called jQuery Form Plugin), and he was stumped as well and hadn't seen the issue before. However, I built 3 web apps and this problem was occurring in each one. I would have AJAX pull back a form with a TinyMCE control on it, and then the red stop icon would appear in an infinite loop randomly when that control was either shown or the form was processed back to the server. I checked it for Javascript errors and had none. I checked it for XHTML issues and had none. I tried to add debug statements in the code and could only determine that the problem would occur after showing or hiding the TinyMCE control, or doing an AJAX call to retrieve a form with it.

I then published the problem on stackoverflow.com and eventually someone had seen it before and suggested I try what he did. His solution was to use an IFRAME in the calling page (the one that made the AJAX call), and every time I retrieve or post the form over AJAX with the TinyMCE control, to use Javascript to write to the document object of that IFRAME and then close it.

Well, sure enough this problem was fixed. First, stick this IFRAME in your calling page:

Code: Select all

<iframe frameborder="0" src="http://mysite.com/fixdoc.html" id="frameFix" height="1" width="1" style="position: relative; left: -500px"></iframe>
 
Second, after retrieving the AJAX form or posting it and getting a response from the server, run this piece of code:

Code: Select all

var ifr = document.getElementById('frameFix');
var doc = ifr.contentDocument;
if (doc == undefined || doc == null)
doc = testFrame.contentWindow.document;
doc.open();
doc.write(' ');
doc.close();
You'll find the random infinite page load problem goes away forever. Yeah, I think in the end that we're looking at either a TinyMCE bug or a FF bug.

Hope this helps you, in case you ever run up against it.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: Fixed Common FF AJAX TinyMCE Problem

Post by alex.barylski »

TinyMCE is a pretty buggy codebase...at least it's wonky in behavior at the very best. I use it and jQuery in a few projects and have seen the progressbar bug a few times but only in FF.

I test in IE6|7, OP9, FF2|3, SF and my code only seems to hang in FF browsers...at least the progress bar doesn't always reach complete...stupid thing... :P
Post Reply