XDomainRequest onLoad not firing correctly in IE8

Question

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!

Answer 1

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'];