Why isn't this simple bit of jQuery getJSON wo

Question

I've got a very standard AJAX request:

$.getJSON('/products/findmatching/38647.json', {}, function(JsonData){
  var tableHtml = '';
  var x;

  for (x in JsonData.matchingProds) {
    var matchingProd = JsonData.matchingProds[x];
    var buyMessage;

    if ( x == 0 ) {
      buyMessage = 'Buy Cheapest';
    }
    else {
      buyMessage = 'Buy from this shop';
    }

    tableHtml = tableHtml + '<tr><td><img height="40" src="' + matchingProd.img_url + '" alt="' + matchingProd.name + '" /></td> \
      <td><a href="' + matchingProd._page_url + '">' + matchingProd.name + '</a></td> \
      <td><a href="' + matchingProd._merchant._url + '">' + matchingProd._merchant.title + '</td> \
      <td align="right">&pound;' + matchingProd.price + '</td> \
      <td><a href="' + matchingProd.referral_url + '">' + buyMessage + '</a></td></tr>';
  }

  $('#matchingproducts tbody').html(tableHtml);

  $('#loading').delay(1000).fadeOut();
});

It works fine in all browsers except IE. I don't do much in IE anymore as I have a Mac, but I've got IE8 on an XP virtual machine. Using its built-in Debug Tools hasn't really helped (they're not very good). The only thing I can fathom is that at some point I get and "Expected identifier" error.

Could this be in the JSON data that's returned? How can I examine that data from IE's point of view?

Answer 1

You have to use check browser and version for IE8+, then use the XDomainRequest() if msie8+.

This will return a JSON String, must use jQuery.parseJSON() to create the JSON object…

Don't use getJSON!

Here's my example:

if ($.browser.msie && parseInt($.browser.version, 10) >= 8 && window.XDomainRequest) {
        // Use Microsoft XDR
        var xdr = new XDomainRequest();
        xdr.open("get", reqURL);
        xdr.onload = function() {
            var json = xdr.responseText;
            json = $.parseJSON(json);

            $.each(json.results, function(i, val) {
                    console.log(val.formatted_address);
                    var locString = val.formatted_address;
                    $.each(val.address_components, function(x, comp) {

                        if($.inArray("postal_code", comp.types) > -1) {
                            //alert("___" + comp.types);
                            zipmap[locString] = comp.short_name;
                        }

                    });

                    suggestions.push(val.formatted_address);
                });

            //alert(json.results);
        }
        xdr.send();
        add(suggestions); 
    }else {
        $.getJSON(reqURL, function(data) {

            var isZIP = new Boolean;
            console.log(data.results);
            $.each(data.results, function(i, val) {
                console.log(val.formatted_address);
                var locString = val.formatted_address;
                $.each(val.address_components, function(x, comp) {

                    if($.inArray("postal_code", comp.types) > -1) {
                        console.log("___" + comp.types);
                        zipmap[locString] = comp.short_name;
                    }

                });

                suggestions.push(val.formatted_address);
            });

            add(suggestions);  

        });
    }

requrl is the URL which you are making a request to.

Done!

Credit to: http://graphicmaniacs.com/note/getting-a-cross-domain-json-with-jquery-in-internet-explorer-8-and-later/

I just LOVE IE!

Answer 2

$.ajaxSetup({ cache: false }); 

Answer 3

Ok I figured it out. Someone suggested trying a non-minified version of jQuery. I did this and stepped through the IE8s Javascript debugger. At a certain point, the following error came up:

Could not complete the operation due to error c00ce56e.

A little Googling found that it was the charset declaration I've set for my JSON data. In PHP, this was done with:

header ( 'Content-Type: text/javascript; charset=utf8' );

It turns out that IE is very particular about the charset reference ( http://forums.asp.net/t/1345268.aspx#2732852 ), so I changed it to:

header ( 'Content-Type: text/javascript; charset=UTF-8' );

And hey-presto, it works like a charm. Thanks for your help guys, you pointed me in the right direction again!

Answer 4

Hm...it appears that your script is running fine in IE. The only thing that appears to be breaking is your jQuery fadeOut method. I was able to find something about that here:

jquery IE Fadein and Fadeout Opacity

Basically, IE has issues with altering CSS properties when they haven't previously been declared.

Edit: Perhaps it is not running fine in IE...I might not have understood the exact process of the page load.

Answer 5

edit again — still debugging - that change to use the other function needs to have the last argument be myAjaxResponderFunc with no quotes ...