Object doesn't support this property or method jquery ie8

Question

I have two variables in my script view page, one called products and the other sites. I have declared them like that.

Add.cshtml View:

    $(function () {

         products;
         sites;
        GetProductsAndSites(productsURL, sitesURL, '@Model.Key', false);
     });

I call an ajax function, in another .js file.

People.js

   function GetProductsAndSites(productsURL, sitesURL, secondLevelSiteKey, flag) {
$.ajax({
    type: "POST",
    url: productsURL,
    async: false,
    success: function (returndata) {
        if (returndata.ok) {

            **products = returndata.dataNames;**
            //var tempProducts = returndata.dataNames;

            $('#select-product').autocomplete({
                delay: 0,
                minLength: 1,
                source: returndata.dataNames,
                select: function (event, ui) 
                {

                    $.ajax({
                        type: "POST",
                        url: sitesURL,
                        data: { "productID": selectedProductID, "siteID": secondLevelSiteKey },
                        async: false,
                        success: function (returndata) {
                            if (returndata.ok) {

                                  //products = tempProducts ;
                                **sites = returndata.dataNames;**


                                $('#select-site').autocomplete({
                                    delay: 0,
                                    minLength: 1,
                                    source: returndata.dataNames,
                                    select: function (event, ui) {
                                        $("#select-site").val(ui.item.label);


                    });
                }
            });
        }

    }
});

}

it throws "Object doesn't support this property or method" exception at (products = returndata.dataNames;) line...at first I thought it can not see the products vairalble, but then I realized that it can see the "sites" variable, so I commented the products line and expected that it would throw the same exception at the sites line, but it works just fine.

I have tried creating a local variable and store the returndata.dataNames in it instead of products vairalbe and then set products value before the sites line, but still it throws an exception. I tried to put the products line after the sites lines it threw the same exception at the products line also.

Help!

Answer 1

After searching and searching, I finally found my solution. Tested with IE8.

Override

if ('XDomainRequest' in window && window.XDomainRequest !== null) {
    jQuery.ajaxSettings.xhr = function() {
        try { 
            return new ActiveXObject("Microsoft.XMLHTTP"); 
        }
        catch(e) { }

        jQuery.support.cors = true;
    }
}

Make the ajax request

  $.ajax({
      type: 'GET',
      url: "your-url",
      async: true,
      cache: false,
      crossDomain: true,
      contentType: 'application/json; charset=utf-8',
      dataType: 'json'
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      console.log('ERROR: ' + errorThrown);
    })
    .always(function() {
      // Do stuff
    });

Answer 2

For me this answer helped, where I detect the IE browser and if its lower than 7 or so then set ActiveXObject else XMLHttpRequest.

jQuery.ajaxSettings.xhr: function() {
    // detect if IE and older versions of IE
    if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) <= 7)
        return new ActiveXObject("Microsoft.XMLHTTP");
    else
        return new XMLHttpRequest();
}

Reference:

Detect IE 7 or lower.

Difference between ActiveXObject and XMLHttpRequest.