Why won't this script do anything in IE

Question

I could use another pair of eyes. This script does what I want in Chrome (renders a gallery of images from a google picasa web album), but doesn't render anything in IE8, can anyone see anything obvious?

    $(function () {
    var json_Photo_URI = "https://picasaweb.google.com/data/feed/base/user/111727095210955830593/albumid/5420114965919213729?alt=json&fields=entry(title, media:group)&thumbsize=75"
    $.ajax({
        type: 'GET',
        url: json_Photo_URI,
        success: function (data) {

            var photo_URL = "";
            var photo_Thumb_Url = "";

            $.each(data.feed.entry, function (i, item) {
                $.each(item.media$group.media$content, function (i, item) { photo_URL = item.url; });
                $.each(item.media$group.media$thumbnail, function (i, item) { photo_Thumb_URL = item.url; });

                var photo_Description = item.media$group.media$description.$t;

                $('#gallery').append("<a href='" + photo_URL + "' title='" + photo_Description + "'><img src='" + photo_Thumb_URL + "'></a>");
            }); 

            $('#gallery a').lightBox({ txtImage: 'Photo', txtOf: '/' });
        }, dataType: 'json'
    });
});

first thing I've noticed: missing ; in second line after url string..don't know..maybe — gpasci, Mar 20 '12 at 21:03
@gpasci as long as your code is on seperate lines you don't need semi-colons, just good practice to use them — Snuffleupagus, Mar 20 '12 at 21:05
no, not getting errors. and the missing ';' was a good catch, but didn't help. — E.J. Brennan, Mar 20 '12 at 21:06
IE Caches remote AJAX calls which can cause problems with the request. See this question for more insight: http://stackoverflow.com/questions/1013637/unexpected-caching-of-ajax-results-in-ie8 — Jon McIntosh, Mar 20 '12 at 21:15
@E.J.Brennan It might if jQuery's attempting to use `XMLHttpRequest` (`dataType: 'json'`) rather than JSONP. jQuery [doesn't use](http://code.jquery.com/jquery.js) the [`XDomainRequest` object](http://msdn.microsoft.com/en-us/library/cc288060(v=vs.85).aspx) needed for [IE8/9](http://caniuse.com/cors) to make cross-origin Ajax requests. — Jonathan Lonowski, Mar 20 '12 at 21:16
IE is calling the $.ajax error callback. Also here's a fiddle with the code: http://jsfiddle.net/b36v5/ — T. Junghans, Mar 20 '12 at 21:16

score 3 · Accepted Answer · answered Mar 20 '12 at 21:18

3

Replace:

dataType : 'json'

with

dataType : 'jsonp'

See: http://jsfiddle.net/b36v5/2/

answered Mar 20 '12 at 21:18

T. Junghans

11,385
7
52
75

That did the trick - thank you. Here is a post that explained json/jsonp: http://stackoverflow.com/questions/4683114/sending-jsonp-vs-json-data – E.J. Brennan Mar 20 '12 at 21:22
@E.J.Brennan: This would make a great question. I remember reading about IE caching requests more aggressively. Specifying 'jsonp' deactivates the cache. You can read about this on http://api.jquery.com/jQuery.ajax/ under *cache*. – T. Junghans Mar 20 '12 at 21:32

score 1 · Answer 2 · answered Mar 20 '12 at 21:16

It's about cross domain AJAX requests. The site you are trying to access correctly sets the access-control-allow-origin: * response header in order to allow AJAX requests for browsers that support CORS. And IE supports CORS, partially. In fact in IE in order to support CORS you have to use a different object called XDomainRequest as explained in the following blog post in order to achieve cross domain requests. Except that jQuery.ajax doesn't support it out of the box. And if you look more carefully in the bug ticket you will see that it is closed because there are plugins that allow to achieve that.

Why won't this script do anything in IE

2 Answers2