CODEWITHSUNDEEP
javascriptjqueryinternet-explorer-7
ajwaka
ajwaka

Reputation: 608

IE7 Bug fixed w/ alert - Jquery.ajax

I have an error only in IE7 where when I put an alert in the code - the problem is fixed. As stated here:http://stackoverflow.com/questions/7220603/weird-problem-with-javascript-jquery-which-get-fixed-using-alert it's likely to to timing in an asynchronous call.

Thing is I'm using the jQuery.ajax call and calling a function in success - which I thought is called after the data is returned...

$.ajax({
    type: "POST",
    url: 'myurl.aspx/myMethod',
    data: "{ id: 3 }",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        DisplayMap(msg.d);
    }
});

and in my display Map function I'm setting up coordinates on a google map to outline a property like so:

function DisplayMap(data) {
    var defaultMapZoom = data.Outline.ZoomLevel;
    var centerCoordinate = new google.maps.LatLng(data.Outline.Latitude, data.Outline.Longitude);
    var myOptions = {
        zoom: defaultMapZoom,
        center: centerCoordinate,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        scrollwheel: false
    };
    map = new google.maps.Map(document.getElementById('googleMap'), myOptions);
    var mylistener = google.maps.event.addListener(map, 'tilesloaded', function() {
        google.maps.event.removeListener(mylistener);
        setTimeout(EnableSearch, 500);
    }); 
    setUpProertyBorder(data.Outline.Coordinates);        
}
function setUpProertyBorder(coordinates) {
    var coordsLatLon = createGoogleMapCoordinateArray(coordinates);
    var coordOutline = new google.maps.Polygon({
        path: coordsLatLon,
        strokeColor: '#ff0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        fillOpacity: 0
    });
    coordOutline.setMap(map);
}

function createGoogleMapCoordinateArray(c) {
    var coords = [];
    for (var x = 0; x < c.length; x++) {
        coords.push(new google.maps.LatLng(c[x].Latitude, c[x].Longitude));
    }
    return coords;
}

The EnableSearch function simply removes an overlay I have over the google map. This works great in IE 8 & 9, FF & Chrome - but in IE7 I don't get the outline setup from the call to setUpProertyBorder.

I "thought" the "success" function in jQuery.ajax is called only AFTER the data is returned - thus my thinking is that my data is there - but it's not in IE7.

Now if I put an alert in setUpProertyBorder - it suddenly works in IE7 (???) Suggestions? What am I blinded to?

Upvotes: 1

Views: 591

Answers (2)

Dmitry
Dmitry

Reputation: 902

i've had a similar problem, assumed that instantiating the map is too slow process and DOM not ready for new updates till this moment (read only):

coordOutline.setMap(map);

so if you try to update DOM it will cause fail. solved by setting timeout before using map functions, smth like this in your case

setTimeout(function(){setUpProertyBorder(data.Outline.Coordinates);}, 200);

possibly it is not the best way but it worked

Upvotes: 1

Adam Stacey
Adam Stacey

Reputation: 2831

Even though the success statement is only run when the data from the Ajax request is fetched it depends when the actual Ajax call is requested.

The Javascript that executes the Ajax call, does it wait for the document to load before it is run, ie:

<script type="text/javascript">
    $(document).ready(function() {
        // Your code here...
    });
</script>

You can also make sure the JavaScript is loaded once the page is loaded by using the defer command:

<script type="text/javascript" defer="defer">
    $(document).ready(function() {
        // Your code here...
    });
</script>

Try that and see if that fixes it. Let me know if not and I will take a further look.

Upvotes: 0

Related Questions