[GIS] Openlayers ajax loading works on FF but doesn’t work on Chrome. Any idea why

ajaxopenlayers-2

I'm using this ajax loading panel
http://thisiscontext.com/tools/jQuery-showLoading

And I have the following code :

jQuery('#map').showLoading(); 
var request = OpenLayers.Request.POST({
        url: "service.asmx/DeleteStopPoint",
        data: "{'TripId':'" + currentTrip + "','PointId':'" + feature.attributes.PointId + "'}",
        async: false,
        headers: { "Content-Type": "application/json; charset=utf-8" },
        callback: refreshMap
    }); 
jQuery('#map').hideLoading();

what happens is that in FF I do see the loading panel appearing before the request is made and hidden once its over… but in chrome it doesn't happen. it looks like the panel appears and immiedtly disappear (because if I comment out the hideLoading function , it appears AFTER the POST)

any idea why ?

Best Answer

The first "A" in "AJAX" stands for "asynchronous", which means that the application flow continues before the server sends back the response (I think "fire and forget" is a useful analogy). In your example, hiding the mask happens immediately after the request is made (not after it completes). The code you want to execute after the request completes must be included in the callback:

jQuery('#map').showLoading(); 
var request = OpenLayers.Request.POST({
    // (...)
    callback: function() {
        jQuery('#map').hideLoading();
        refreshMap();
    }
});
Related Question