I can't figure out why the following bit of code is working perfectly in FF but not in IE9.
What the script does is that on click of a button, it picks some values like street, postcode and town from a form, builds a string, submits it to google, and returns the lat and long of that address (and puts that into two fields in the 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 this script is submitting in this case is: =1363342459585">http://maps.googleapis.com/maps/api/geocode/xml?address=Servicev%C3%A4gen%207,311%2033,Falkenberg,Sweden&sensor=false&=1363342459585
I've tried changing the cache to false, used $.ajax in stead of $.get tested by putting in some alerts, but i just can't seem to get inside the $.get function
I've tried changing the MIME type as is suggested here http://docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests, but that didn't help eather.
Any ideas anyone?
EDIT: Even tried with json result from google, to see if the problem lies in the XML, but that does not work either.
$.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);
}
});
Because you're performing a cross-domain request, the browser needs to support this. Most modern browsers (like FF and Chrome) support it, but IE9 only supports it when specific requirements are met.
Here's what Microsoft has to say about it, including some pointers on how to get it working (provided all the requirements as mentioned on the Microsoft page can be met).
Did you try setting crossDomain to true in your $.ajax params?
Check the reference here for the crossDomain:bool param: http://api.jquery.com/jQuery.ajax/
It should work seamlessly between browsers.
Edit
After checking jQuery's source, seems there's no mention of XDomainRequest (the way ie8/9 support CORS), so I'm not sure it works. Otherwise, if you really want to support those, make a wrapper around $.ajax with XDomainRequest if browser == ie9 or ie8.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With