Javascript Oddities
When working on certain projects I always come across certain JavaScript oddities which can take some time to resolve. I’ve never actually taken the time to write them down but I figured it’s a good idea to keep me or others from kicking the dog out of frustration. In no particular order here they are:
TinyMCE:
If you’re trying to load tiny dynamically meaning your using yui loader or something else to pull in the js file, you’ll need to add the following line before your init method:
tinymce.dom.Event.domLoaded = true;
The reason why? Tiny attaches a listener to the window which is supposed to be fired when the dom is ready. However, if you load the js dynamically the event is never triggered.
Dynamically Loading Scripts w/ Safari and Firefox
Today I was trying to load some js code inner mixed with html dynamically. The problem was that after the ajax call, inserting the mixed html and js into the dom wouldn’t cause it to be ‘active’ within Safari. So, I seperated out the js code returned and html. Then in my callback I create two different tags, one div and one script. Also, make sure you add a textNode to the script tag, do not use the innerHTML method as this fails on Safari (4.x). Here’s an example:
var scriptTag = document.createElement(’script’);
scriptTag.id = ’script’;
scriptTag.setAttribute(’type’,'text/javascript’);
scriptTag.appendChild(document.createTextNode(responseData.jsData));
document.getElementsByTagName(”head”)[0].appendChild(scriptTag);
var divTag = document.createElement(”div”);
divTag.innerHTML = responseData.divData;
divTag.id = ‘DivStuff’;
YAHOO.util.Dom.insertBefore(divTag, ‘footer’);
This hasn’t been tested in IE though. You may need to set the text property on the script tag to make it work.