$.ajax call error in IE but not FireFox

Question

I am trying out $.ajax instead of getJSON for debugging purposes. Because getJSON did not report an error in IE (6,7 or 8) and I am trying to figure out why a jQuery plug-in is not painting my returned images to the screen in IE but is in other browsers.

So I tried this. Interestingly enough, it hits the error event in IE but not firefox, safari and the rest and I don't know why (this code works great and renders my data just fine in FireFox and the rest). I know my returned json is valid:

$.ajax({
    type: "GET",
    url: "http://localhost:59396/sss/sssHandler.ashx?action=getproducts&ids=" + ids,
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) {
        alert(data.length);
        carousel.size(allProductIDs.length);

        if (numberOfImagesLeftToShow < numberOfImagesToDisplay) {
            first += (numberOfImagesToDisplay - numberOfImagesLeftToShow);
        }

        var d = 0;
        for (var i = first; i <= last; i++) {

            if (d != undefined) {
                // add data using index of the array returned by JSON (which starts at 0)
                carousel.add(i, decode(data[d].ImageTag));
            }

            // set to last ProductID showing in Carousel
            if (i == last) { lastProductID = parseFloat(data[d].ProductID); }

            d++;
        }
    },

    error: function() {
        alert("An error has occurred. Please try again.");
    }
});

I don't know what else to do to troubleshoot why IE is having so much trouble with the returned JSON or just executing the function(data) using either getJSON OR this. I have set the headers not the cache also in the response. That is not the problem. The problem is for whatever reason, IE refuses to enter my function(data) on the response.

Here's the returned JSON which shows valid (even checked it with http://www.jsonlint.com/):

[
    {
        "ImageTag": "\u003cdiv class=\"CarouselItem
\"\u003e<p><img src="http://www.xxx.com/image/
2568.jpg" alt=""></p>\u003cp\u003e\u003ca href=
\"Bear-10.prod\"\u003eTeddy Bear\u003c/a\u003e\u003c/p\u003e\u003cp
\u003e$20.95\u003c/p\u003e\u003cdiv\u003e",
        "ProductID": "540"
    },
    {
        "ImageTag": "\u003cdiv class=\"CarouselItem
\"\u003e<p><img src="http://www.xxx.com/image/
50.jpg" alt=""></p>\u003cp\u003e\u003ca href=
\"Pendant362.prod\"\u003eBirthday\u003csup\u003e©\u003c/sup
\u003Necklace\u003c/a\u003e\u003c/p\u003e\u003cp\u003e$36.95\u003c/p
\u003e\u003cdiv\u003e",
        "ProductID": "83"
    }
]

in my .ashx I simply have the following main code to product the response

        context.Response.ContentType = "application/json";
        context.Response.Charset = Encoding.UTF8.ToString();
        context.Response.Cache.SetNoStore();
        context.Response.Cache.SetExpires(DateTime.MinValue);
        context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        context.Response.Cache.SetValidUntilExpires(false);

        context.Response.Expires = -1;
        context.Response.ExpiresAbsolute = DateTime.MinValue;
        context.Response.AddHeader("Cache-Control", "no-cache");
        context.Response.AddHeader("Cache-Control", "post-check=0, pre-check=0");
        context.Response.AddHeader("Pragma", "no-cache");

...

string jsonString = imageList.ToJSON(); <-- uses the .NET 3.5 JavaScriptSerializer
        context.Response.Write(jsonString);

also, it doesn't seem to matter if you specify the response.ContentType as "application/json" or "text/plain" because at least I'm getting valid data in FireFox returned and parsed.

Answer 1

I suspect it is the json data, lets first try and home in on the issue. Does the request work if you return simply?

[
    {
        "ImageTag": "imagePath",
        "ProductID": "540"
    },
    {
        "ImageTag": "imagePath",
        "ProductID": "83"
    }
]

If it does then ie is having difficulty with some of that encoding.

N.B I also tried the json you pasted at jsonlint and could not get it to validate unless I removed the last line of the imageTag in the second image.

Also do you really need to return html in the json. if so why not just do a html get as your not really benefitting from a lightweight json structure

Answer 2

Not sure if this is related to the problem, but the contentType parameter specifies the MIME type of the data being sent to the server, not being received.

Since you're not sending anything (just a GET with the query string already specified in the URL), you probably don't need the contentType or data parameters in your options.

Answer 3

I think jQuery uses eval("(" + data + ")"), and then passes the result to your success function, because you have specified that you are expecting JSON data. It might be worth changing this content type to "text", and then using JSON.parse in your success callback to parse it. Just an idea!

Answer 4

fixed it,

removed:

context.Response.Charset = Encoding.UTF8.ToString();

changed: context.Response.ContentType = "application/json;charset=utf-8";