Professional Website Design, Graphic Designers, Ecommerce and SEO Resource Blog

Ok, so you’ve been working on a project and decided to get fancy with some jQuery Ajax magic. Awesome! You do all your work in FireFox or maybe even Chrome so you can use Firebug or other Developer tools, and everything seems good, right? Well, since you’re a good developer you want to make sure everyone can enjoy in your hard work so you open up Internet Explorer to test and *cue music* DUN DUN DUN, it doesn’t work…. Hmm… Ok, let’s start debugging and seeing why. 1st you check for syntax errors.

$.ajax({
   type: "GET",
   url: "/events",
   dataType: "json",
   success: function(data) {
     //do stuff with data
    },
   error: function(xhr, status, error) {
     alert(status);
   }
});

Ok, looks like everything is ok with the syntax. What is the status that is being “alerted”? In my case it was “parsererror”. If you’re like me, you’re thinking.. “WHAT DOES THAT EVEN MEAN?!?”. It’s ok, it just means there was an error while trying to parse the target document. So, just out of curiosity, lets see what the value of the xhr.status is, shall we?

$.ajax({
   type: "GET",
   url: "/events",
   dataType: "json",
   success: function(data) {
     //do stuff with data
   },
   error: function(xhr, status, error) {
     alert(xhr.status);
   }
});

And what do we get?? 200!! Wait… what? My first guess was that the server wasn’t returning json properly. Go check your server side code and make sure it’s formatted properly. Basically, no extra commas at the end of an object. Go ahead, I’ll wait…

this..

"item" : { "one":1, "two":2, "three":3, }

should be

"item" : { "one":1, "two":2, "three":3 }

Done? Still no luck? Then let’s move onto the next step. It’s time to get CRAZY!

$.ajax({
   type: "GET",
   url: "/events",
   dataType: "json",
   cache: false, // don't cache the result
   contentType: "application/json", //tell the server we're looking for json
   success: function(data) {
     //do stuff with data
   },
   error: function(xhr, status, error) {
     alert(xhr.status);
   }
});

Now I want to force the content type, and make sure that it doesn’t cache the ajax request.
Note: at this point, it *may* or *may not* work for you. (For me, this didn’t work. So, let’s move on.)

It turns out, IE does like to cache the ajax requests. Sometimes it might not play well with headers though. So what you see passed through to one of the other browsers, might not be the same thing being passed here. There is only 1 more thing I need to add to this to make it work the way I want. I have trust issues when it comes to the whole cacheing thing. Never can tell if clicking the “clear cache” and “always refresh from server” buttons are actually working. For anyone who has used Ruby on Rails before may have seen something that looks like

...src="javascripts/all.js?412847289374"

So, using that idea, let’s add that to our URL and explicitly tell it that it’s json. With that said, we have…

var date = new Date(); // grabbing the date as of this second it gets run
$.ajax({
   type: "GET",
   url: "/events.json?_="+date.getTime(), //add the time stamp and specified format to the end
   dataType: "json",
   cache: false,
   contentType: "application/json",
   success: function(data) {
     //do stuff with data
   },
   error: function(xhr, status, error) {
     alert(xhr.status);
   }
});

Alright, code is place, we run it, and BAM! It’s working! Now, there are small variations here that you can mess with to get it working, but let’s recap to make sure we understand everything.

• 1. Check ALL syntax
• 2. Look to see if the xhr object in your error function is returning a status 200
• 3. Set cache to false and contentType to “application/json”
• 4. Add a .json extension and the timestamp to the URL

As of this writing, jQuery 1.4 was just released, so things might change. If anyone knows of a “cleaner” fix to this, please feel free to let me know.

Tags: ajax, ie, internet explorer, jquery, json, parsererror