Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery .get not working in ie9 against google api

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);
    }
});
like image 617
half-a-nerd Avatar asked Mar 15 '13 10:03

half-a-nerd


2 Answers

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).

like image 111
robertklep Avatar answered Nov 15 '22 21:11

robertklep


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.

like image 27
Mathieu Amiot Avatar answered Nov 15 '22 23:11

Mathieu Amiot