Jquery.get not working in ie9 vs google api

Question

I cannot understand why the next bit of code works fine in FF, but not in IE9.

What the script does is that when the button is clicked, it selects some values, such as street, zip code and city from the form, builds a line, sends it to google and returns the lat and long of this address (and puts it in two fields in form)

$("#google_coordinates").live("click", function(){ var string = encodeURIComponent($('#sAddressStreet1').val())+","; if($('#sAddressStreet2').val() != ""){ string += encodeURIComponent($('#sAddressStreet2').val())+","; } string += encodeURIComponent($('#sAddressPostalcode').val())+","; string += encodeURIComponent($('#sAddressTown').val())+","; string += encodeURIComponent($('#sAddressCountryCode option:selected').text()); /* test with an alert - string shows fine in both FF and IE */ alert(string); $.get("http://maps.googleapis.com/maps/api/geocode/xml?address="+string+"&sensor=false", function(xml){ $(xml).find('location').each(function() { lat = $(this).find('lat').text(); lng = $(this).find('lng').text(); /* test with an alert - fine in FF not in IE */ alert(lat + ',' + lng); $("#sAddressLatitude").val(lat); $("#sAddressLongitude").val(lng); }); }); return false; }); 

The URL that this script sends in this case: = 1363342459585 "> http://maps.googleapis.com/maps/api/geocode/xml?address=Servicev%C3%A4gen%207,311%2033, Falkenberg, Sweden & sensor = false & = 1363342459585

I tried changing the cache to false, using $ .ajax instead of $ .get, testing, adding some warnings, but I just can't get into the $ .get function

I tried changing the MIME type, as suggested here http://docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests , but that did not help.

Any ideas anybody?

EDIT: Even tried with json google result to see if there is a problem in XML, but this also does not work.

 $.ajax({ type: "GET", url: "http://maps.googleapis.com/maps/api/geocode/json?address="+string+"&sensor=false", dataType: "json", cache: false, success: function(json){ alert("hiero"); lat = json.results[0].geometry.location.lat; lng = json.results[0].geometry.location.lng; $("#sAddressLatitude").val(lat); $("#sAddressLongitude").val(lng); } }); 

Answer 1

Since you are doing a cross-domain request , the browser must support this. Most modern browsers (like FF and Chrome) support it, but IE9 only supports it if certain requirements are met.

Here's what Microsoft can say about this , including some tips on how to make it work (subject to all the requirements mentioned on the Microsoft page).

Answer 2

Have you tried setting crossDomain to true in the $ .ajax options?

Check out the link here for crossDomain: bool param: http://api.jquery.com/jQuery.ajax/

It should work seamlessly between browsers.

Edit

After checking the jQuery source, there seems to be no mention of XDomainRequest (way to support ie8 / 9 CORS), so I'm not sure if it works. Otherwise, if you really want to support them, create a wrapper around $ .ajax using XDomainRequest if the browser == ie9 or ie8.