jQuery .html() Problems in Internet Explorer

So I've developed my web application in firefox, all seems to be working fine but before I check-in I quickly check the application in the other major browsers; they all work great. All work great APART from IE!

In IE it turns out that the jQuery .html() attribute won't replace contents of first matched element unless the new HTML is valid (i.e. opening and closing tags match). Guess I can't complain with IE not liking the HTML I'm giving it when its imperfect. If only IE practiced what it preached! :)

// This fails in IE...
$('#someDivID').html("<div id='newDivID'><p>hello world</p></div></div>");

// This works in IE...
$('#someDivID').html("
hello world
");

That is all.

Using Analytics to Track Events & AJAX Navigation

Google Analytics is THE way to record and analyse everything about the traffic on your site. Whilst it's real easy to setup you need to change the default behaviour if you want to record javascript events and AJAX navigation changes; this is how to do exactly that.

Analytics requires two things to work. You need the Analytics resource on the client...

<script type="text/javascript">
   var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
   document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

...and call the tracker with your unique ID (provided when you sign up)...

<script type="text/javascript">
   try {
      var pageTracker = _gat._getTracker("123456789");
      pageTracker._trackPageview();
   } catch (err) { }
</script>

...it's the pageTracker._trackPageview(); part that sends the data to Google Analytics. Without parameters the current URL is sent. However, you can override the default behaviour and pass the URL as an argument.

So change the second part to...

<script type="text/javascript">
   try {
      var pageTracker = _gat._getTracker("123456789");
   } catch (err) { }
</script>

...then you can call pageTracker._trackPageview('/My-Virtual-URL'); with your 'virtual' URLs at will - perfect for recording javascript events and AJAX navigation changes :)

IE AJAX Caching Issue

I don't want to pick on IE again (it has been less than 24 hours since my last post about IE), but I'm afraid I have to. I've been working on a new project recently that makes use of AJAX. I usually develop in Firefox and then fix all my IE problems afterwards. This time however one of my AJAX areas of the site seemed to rarely update in IE (if at all), other browsers were fine.

After some playing around I came to the conclusion that IE was caching my AJAX requests. You could argue that IE is right to cache the requests, as the HTTP spec states that GET requests should be cached. But given the browser knows a XMLHttpRequest is being made the caching is completely uneccessary/unwanted. Once I knew the problem the fix was easy. I just needed to append something random to the request URI, a number or timestamp for example.

So instead of requests to /Resource, just use /Resource?ie={random}. It's fairly straight forward to generate a random number in Javascript:

// Random number between 0 and 100
Math.floor(Math.random()*101);

Realising that I wouldn't be alone in tackling the issue I found people used similar tactics to get around the problem. Another neat way is to change the request to be a POST.