HTTP Get JSON issue in IE, works in Chrome FF

Question

I am trying to use a simple weather plugin and make it smart so it figures out what location a user belongs to by calling a geolocation service based on IP. Works in Chrome, FF. Not IE though. What is wrong or why is IE having issues with the following?? I seem to be having this cross-domain call issue here.. Full Fiddle: http://jsfiddle.net/XfhQK/1/

 jQuery.getJSON('http://freegeoip.net/json/', function(data) {
     jQuery.simpleWeather({
        zipcode: data["zipcode"],
        woeid: '',
        location: '',
        unit: 'f',
        success: function(weather) {
          html = '<h2>'+weather.temp+'&deg;'+weather.units.temp+'</h2>';
          html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
          html += '<li class="currently">'+weather.currently+'</li>';
          html += '<li>'+weather.tempAlt+'&deg;C</li></ul>';

          jQuery("#weather").html(html);
        },
        error: function(error) {
          jQuery("#weather").html('<p>'+error+'</p>');
        }
     });

});

data["zipcode"] should grab the zipcode property from the JSON object, but it looks like data["zipcode"] was empty or something so the weather plugin shows no weather result. Works in Chrome: http://jsfiddle.net/XfhQK/1/ — Athapali, Jun 24 '13 at 21:30
Put `console.log(data)` before the simpleWeather call, and include the output in your question (press F12 to open the IE dev tools, where the console is). — bfavaretto, Jun 24 '13 at 21:32
Also, I believe you're having a cross-domain request issue. Maybe the remote domain allows CORS and the other browsers are sending the proper headings, but not IE? — bfavaretto, Jun 24 '13 at 21:35
This is using a CORS request (Access-Control-Allow-Origin). IE 8 and 9 need special treatment to make it work. Should work in IE 10. — gen_Eric, Jun 24 '13 at 21:37
See this answer: http://stackoverflow.com/questions/8448934/getjson-not-working-in-ie — Castrohenge, Jun 24 '13 at 21:39
@SarikaThapaliya: You need to use a thing called `XDomainRequest`, which jQuery doesn't seem to use. — gen_Eric, Jun 24 '13 at 21:45

score 3 · Answer 1 · edited May 23 '17 at 10:32

3

For anyone with similar issue, passing the URL in this format:

http://freegeoip.net/json/?callback=?

instead of just:

http://freegeoip.net/json

worked for me.

More explained here: http://e-mats.org/2010/01/jquery-getjson-and-the-same-origin-policy/ and here $.getJson not working in IE

Thanks everyone who helped me get to the solution.

edited May 23 '17 at 10:32

Community

1
1

answered Jun 24 '13 at 21:50

Athapali

1,091
4
25
48

score 3 · Accepted Answer · answered Jun 24 '13 at 21:52

The URL you are accessing uses Access-Control-Allow-Origin (aka CORS). This is not supported in IE 8 or 9. IE 10 supports it, however.

Anyway, the easiest way to fix it is to include this plugin that adds XDomainRequest support to jQuery.

You also need to change to using $.ajax.

$.ajax({
    url: 'http://freegeoip.net/json/',
    dataType: 'json',
    type: 'GET',
    crossDomain: true
    success: function(data){
        // ...
    }

});

DEMO: http://jsfiddle.net/XfhQK/4/

_{Plugin Homepage: https://github.com/jaubourg/ajaxHooks

Found at: http://bugs.jquery.com/ticket/8283}

HTTP Get JSON issue in IE, works in Chrome FF

2 Answers2