1

I'm firing off a request to the google geocode api to get the latitude and longitude of a given postcode. This works fine in all browsers bar IE8 (shock!).

To get around this i've implemented XDomainRequest for IE.

  /*
      Convert postcode to lat/lng.
  */

  var convertPostcodeToLatLng = function(postcode) {
    var isPostcodeValid = false,
      postcodeRegex = /[A-Z]{1,2}[0-9][0-9A-Z]?\s?[0-9][A-Z]{2}/gi,
      lat,
      lng;

    if (window.XDomainRequest) {
      // Use Microsoft XDR
      var xdr = new XDomainRequest();

      xdr.onload = function() {

        response = JSON.parse(xdr.responseText);

        if (postcode.match(postcodeRegex) && response.status === 'OK') {
          lat = response.results[0].geometry.location.lat;
          lng = response.results[0].geometry.location.lng;

          isPostcodeValid = true;
        }
      }

    } else {

      $.ajax({
        url: '//maps.googleapis.com/maps/api/geocode/json?address=' + postcode + ',+UK&sensor=false',
        type: 'get',
        dataType: 'json',
        cache: false,
        async: false,
        success: function(response) {

          window.console && console.log(response);

          if (postcode.match(postcodeRegex) && response.status === 'OK') {
            lat = response.results[0].geometry.location.lat;
            lng = response.results[0].geometry.location.lng;

            isPostcodeValid = true;
          }

        },
        error: function(response) {
          // error
        }
      });

    }

    if (!isPostcodeValid) return ['error', 'Please enter a valid postcode'];

    return [lat, lng];
  }

and here's how I'm calling it 

applicantPostcode = fm.find('input[name=postcode]').val(),
applicantPostcodeCoords = convertPostcodeToLatLng(applicantPostcode);

I also check for errors before proceeding

if (applicantPostcodeCoords[0] === 'error') {
      $('#sb-player #postcode').after('<label class="invalid-postcode">' + applicantPostcodeCoords[1] + '</label>');

  return;
}

Now I say it doesn't work, that's a lie, it does work it just doesn't work straight away so the error is getting fired when it shoudn't be.

I've tried debugging in IE8 and this is what it seems to do

  • get postcode from form element
  • jump to function with postcode
  • create new XDomainRequuest
  • jump over xdr.onload
  • create new XDomainRequest
  • jump out of conditional and down to isPostcodeValid and return the error

Now the request does work, i've tested it, problem is its not working straight away and therefore jumps into the errror.

Anyone got any insight as to why it jumps over the onload rather than into it?

Thanks!

woolm110
  • 1,194
  • 17
  • 27
  • Is your issue a listed workaround listed here? http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx – Kal Nov 13 '14 at 13:20

1 Answers1

0

As soon as your function loads it's going into the first condition and failing this

   if (postcode.match(postcodeRegex) && response.status === 'OK') {
        lat = response.results[0].geometry.location.lat;
        lng = response.results[0].geometry.location.lng;

        isPostcodeValid = true;
      }

as there is no response yet as you haven't sent a request at this point?

So when you hit this on the first run of the function the if (!isPostcodeValid) return ['error', 'Please enter a valid postcode'];

Kal
  • 2,239
  • 6
  • 36
  • 74
  • The weird thing is it jumps over first time but then goes back into it and returns a response, isPostcodeValid returns true but it never jumps back out of the conditional to check it here f (!isPostcodeValid) return ['error', 'Please enter a valid postcode']; – woolm110 Nov 13 '14 at 13:30
  • With the second pass it's hitting the else? Does logging `window.XDomainRequest` return true at any point? – Kal Nov 13 '14 at 13:32