Internet Explorer and jQuery issue

Question

I wonder if somebody can help please. The code belows allows me to use the google api to retrieve address details using UK potscodes.

Everything works fine in Firefox but does absolutely nothing in Internet Explorer. Any pointers will be gratefully received.

Thanks

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type='text/javascript'>

$(function(){

(function($) {
$.fn.searchPc = function(options) {
var settings = $.extend({
address1: 'address1',
address2: 'address2',
address3: 'address3',
address4: 'address4'
}, options);

return this.each(function() {
var $el = $(this);
var $form = $el.closest('form');

$form.on('click', '.HiddenBtn', function() {

$.post('http://maps.googleapis.com/maps/api/geocode/json?address='+$el.val()+'&sensor=false', function(r) {
var lat = r['results'][0]['geometry']['location']['lat'];
var lng = r['results'][0]['geometry']['location']['lng'];
$.post('http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lng+'&sensor=false', function(address) {
$('input[name='+settings.address2+']').val(address['results'][0]['address_components'][1]['long_name']);
$('input[name='+settings.address3+']').val(address['results'][0]['address_components'][2]['long_name']);
$('input[name='+settings.address4+']').val(address['results'][0]['address_components'][3]['long_name']);
});
});
});
});
};
})

(jQuery);
$('input[name=postcode]').searchPc({
address2: 'custom_field'
});

}); 
</script>

<form id="form" name="form">
<input name="postcode" id="postcode" /> 
<input name="HiddenBtn" type="button" class="HiddenBtn" value="Find address" id="HiddenBtn" /><br /><br />
<input name="address1" id="address1"/><br />
<input name="custom_field" id="custom_field" /><br />
<input name="address3"  id="address3" /><br />
<input name="address4"  id="address4" /><br />
</form>

Have you checked the browser console for errors or warnings? — Reinstate Monica Cellio, Mar 04 '14 at 10:46
Here is a list of common IE problems for the google maps API http://www.easypagez.com/maps/ieworking.html — BenM, Mar 04 '14 at 10:48
from this [page](http://stackoverflow.com/questions/5241088/jquery-call-to-webservice-returns-no-transport-error) adding this should work: jQuery.support.cors = true; It seems to be cross domain problem. — Bojan Kovacevic, Mar 04 '14 at 10:56

score 0 · Answer 1 · edited May 23 '17 at 12:10

0

Cross domain internet explorer is your issue, see Jquery $.ajax fails in IE on cross domain calls

edited May 23 '17 at 12:10

Community

1
1

answered Mar 04 '14 at 11:25

Ricky Odin Matthews

373
4
9

Internet Explorer and jQuery issue

1 Answers1