Yet Another Pointless Tagline
Permanently Uncached header image 1

Issues with ajaxForm, TinyMCE, File Uploads & iFrames

October 30th, 2009 · No Comments · Web Design

During the process of coding the javaScript for an image admin system on an internal project at Stink Digital recently, I hit 2 rather annoying snags.  One between ajaxForm and TinyMCE and the other with JSON handling in iFrames:

The iFrame Issue

Using TinyMCE and ajaxForm in conjunction with one another caused issues when trying to use ajaxForm’s file upload capabilities.  This is because of a clash between the two separate iFrames generated by the relevant parts of the JS code.  This would result in the follow error in the JS Console on trying to upload a file:

Permission denied to get property Window.document

Unfortunately, toggling the TinyMCE editor on and off wouldn’t fix the issue.  Ultimately the solution to the problem, rather than switching to another editor, was to ensure that the 2 separate code libraries were hosted off the same host.  Obviously working form the two separate hosts was causing an XSS issue.

JSON Handling Issue

The other issue was with data being returned by the application upon a successful file upload.  Returning a mime type of data/json in an iFrame to FireFox was generating a file download dialog.

The dirty solution to the browsers inability to handle the mime type correctly, as it is a normal POST request rather an an XHR request, was to return the data as text/html and then EVAL the code,  again a very dirty solution, but given this was an internal project for internal consumption a viable one.  In an ideal world you might get the updated info via a secondary AJAX request after the POST and iFrame have returned true.

For those of you troubleshooting similar issues. I hope this helps.

Related Posts

No Comments so far ↓

There are no comments yet...Kick things off by filling out the form below.

Leave a Comment

Required

Required, Hidden