Visualforce AJAX and Internet Explorer 9 Error (and Fixes) [UPDATED]
UPDATE: An official patch has been released by the Visualforce team, so this should no longer be a problem. If you don't see IE9 behaving properly without using any of the below, make sure to refresh or clear out your cache since this was a client side issue.
If you had used these fixes, I would recommend testing when removing them since you may be allowing the original IE9 rendering engine back into the mix.
The public release of Microsoft's latest iteration of Internet Explorer hit March 14th, and the browser adds new muscle towards HTML5, CSS3 and various new tricks in JavaScript.
It also apparently can break using rerender in Visualforce pages. If your rerender fails in IE9, check the JavaScript console and you may see the following error:
3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript, line 122 character 41
SCRIPT16386: No such interface supported
We don't appear to be alone here, other users of the same JavaScript library have discussed the same issues and possible fixes. What appears to have happened is Microsoft added a XMLSerializer class to their JavaScript runtime which isn't compatible with the Sarissa library, but since Sarissa detects that it exists – it tries to use it anyway. When the AJAX response is returned and Visualforce tries to decode it into an actual HTML node, you get the lovely message above.
The Visualforce team is, of course, aware of this issue and they're on a fix. However, when you're responsible for delivering a front end framework to, you know, millions – you can't just hotfix something like this overnight. When I started playing with the JavaScript fix I'll describe in a bit in my dev org, I fixed it for IE9 and had Visualforce returning nothing but "undefined" for every other browser on the planet. Clearly that kind of thing should be avoided in production.
Thankfully, the Force.com development community rocks. Potentially being part of it, you may have already known that. The last couple of days, there has been a great discussion on it over twitter and the boards – and here's a couple of fixes you can try.
Firstly, you might be able to add the following meta tag to your pages:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
This will tell IE9 that you would prefer it operate like IE8, and IE8 still works fine. However, I believe this meta tag needs to be one of the first things declared in the page, and under some situations (like showHeader=true) you may not have control over that. In that case, you can add the following to the Apex controller:
Apexpages.currentPage().getHeaders().put('X-UA-Compatible', 'IE=8');
Remember that Apex controllers can also be served up as extensions to other custom controllers or standard controllers – so if you need to add this to several pages but don't want to rewrite the constructor of each controller, you can add one extension, place the above in the constructor – and then add the extension to existing pages without having to manipulate a lot of existing Apex.
It appears that the changing the meta information doesn't work if the Visualforce page is being served in an iframe. If you have a Visualforce page with an iframe, it seems you can add the above to the parent page and get the right effect. However, you're using the Visualforce within a page layout – once again you may not have control to manipulate the meta information correctly. Basically for the meta tag fix to work, it needs to be the first thing IE9 receives before rendering anything else – including JavaScript. Which makes sense, because IE9 can't just change browser engines in midstep.
If the above doesn't work for you, either because you can't manipulate the meta information or perhaps you actually need the IE9 rendering engine – you can to add the following JavaScript after the page loads, but before any rerender function occurs:
if(Sarissa._SARISSA_IS_IE && parseFloat(navigator.appVersion.substring(navigator.appVersion.indexOf("MSIE")+5)) >=9) {
window.XMLSerializer = function(){};
window.XMLSerializer.prototype.serializeToString=function(oNode){return oNode.xml;}
}
This is essentially says to the Sarissa library: if you think this IE9, go back to the function you would have used for IE8.
While this may look like a simple couple lines of JavaScript, I want to be clear that I've framed this post in order of intrusion. It's better to just add a meta tag in HTML than it is to do it code, and it's better to just add a meta tag in general than to go mucking about in a core JavaScript library which powers your page framework. So the JavaScript here fix needs to be used with caution and plenty of regression testing. However it seems to have helped a few people where the other two haven't, so I'm including it here.
Like I said: we're aware, we're on it – we'll have an official fix for this when we can. If you have impacted users and you need a fix now, take a careful look at the suggestions above, do you your due dilligence and pick what makes the most sense to you.
I want to thank the community, especially everyone in this board discussion, as well as this one … with a shout out to@TehNrd, @_drako, @ca_peterson, @SalesForceGirl, @plmcgrn, @osamanasir on twitter and granders on the boards (who I believe first posted the Apex meta code) – for discussing this over the last couple of days. Tell your bosses you deserve some kind of sugary treat today. If I missed anyone in that shoutout, sorries – I personally owe you a sugary treat.