Getting annoyed by IE

Lately I have still been working on my currency conversion plugin for wordpress. I'm slowly getting there with it. Today I was testing in IE8, which was extremely annoying.

The first issue was that clearing cache via the IE developer toolbar didn't clear the cache (both the for domain and general clear cache options). After clearing the cache I'd reload the page, but the js I was trying to debug would still be the cached js file. (The js was included in an iframe so refreshing the enclosing page doesn't force a fresh fetch of the iframe's content).

To actually clear the cache, I had to go to Tools > Delete Browsing History... in IE's menu. That did work. But it does take an extra step compared to (not) clearing through the Developer's toolbar.

Next, the ability to highlight elements on the page by clicking on the elements in the DOM view didn't work. Nor did the ability to click an element on the page to select it in the DOM.

Finally I did manage to debug the issue. Whether it was actually due to IE8 or an issue with TinyMCE in IE8 I'm not sure. But I don't think it's much of a stretch to say that IE was probably causing the problem. Luckily I managed to work around it quite easily.

The issue was that I was dealing with a TinyMCE pop up window, and adding a function to be called on init, like so:

tinyMCEPopup.onInit.add(myfunc, scope);

This code was wrapped in a jQuery document ready function, and while the code would be run, the 'myfunc' added as an init callback would never be executed. Removing the jQuery document.ready wrapper fixed the problem. So it seems that in IE jQuery document ready only triggers after the tinyMCEPopup init has already triggered. And so the init callback is only added after init has already fired.

I didn't have this problem in Chrome or Firefox, but thankfully the code modified for IE compatibility works in those too.

Another issue I've had with IE is that when inserting text into WP's editor using a quicktag, the inserted text would be selected (though not highlighted, so you can't tell it's selected). So if you used a quicktag to insert a tag, then carried on typing, the first character that you type would replace the selected tag you'd just inserted. I had tried for quite a while to find how to resolve this issue with no result.

However, today I found a way round it that seems to work (in IE8 at least). It is just a case of calling

var selTextRange = document.selection.createRange();
selTextRange.text=replacement;

To create a text range based on the current selection and then replace this with your tag. Then:

selTextRange.collapse(false);
selTextRange.select();

To deselect and move the caret to end of the selection.