Google Chrome download progress bar

Question

I have a problem with Google Chrome or rather with the androids (2.1) webbrowser.

My webapp accesses services with every page change. This takes some time, and I need user feedback as a small “working ...” popup. Recovery services are invoked using an ajax synchronization request. Here is an example:

  $ .ajax ({
     url: some URI,
     async: false,
     beforeSend: function () {
         showIndicatorDialog ();
     },
     complete: function () {
         hideIndicatorDialog ();
     },
     success: function (response) {
         do something after success;
     },
     error: function (response) {
         do something after error;
     },
     type: 'GET'
 });

This works great on FF and Opera! But when I am in my webapp on Chrome oder with my Android device, the download indicator does not appear! It seems that the Google browser is not working with synchronous requests.

Does anyone know how I can make this work, or know another solution to get the download indicator in chrome?

Answer 1

The solution should not use synchronous queries. In general, synchronous requests should never be used because they tend to block the execution of anything else on the page (or even the entire browser user interface), which is not very good.

Answer 2

Do you think that the download indicator does not appear in Google Chrome (desktop) or just the Google Chrome Lite mobile browser for Android devices? If you are using the latest version of jQuery, it should work on all desktop browsers. Mobile browsers are poorly supported due to their very different interface designs and, without being full-featured browsers, many of them do not have fully functional JS support.

However, I have not heard of any problems with jQuery in Chrome Lite & mdash: one of the most impressive things in the Android platform is the inclusion of a fully functional browser on the mobile platform. But I think there is a mobile version of jQuery available or working. Therefore, if all else fails, you can try this.

For a brief description of JavaScript / jQuery support in mobile browsers, see this post on Google Groups: http://groups.google.com/group/jquery-dev/msg/262fa7d9f3cbe96e

Edit: Although the Chrome user interface seems to be blocked during the execution of the synchronous request, I was able to get past this by simply putting a slight delay between the display of the download indicator and the execution of XHR:

function callAjax() { showIndicatorDialog(); setTimeout("testAjax()",100); } function testAjax() { foo = $.ajax({ url: "index4.htm", global: false, type: "POST", data: { id: 3 }, dataType: "html", async:false, success: function(msg){ $('#response').text(msg); }, complete: hideIndicatorDialog }).responseText; } 

I used a POST request to prevent the browser from caching the response, but this should work the same with receive requests. I don’t have an Android phone to test it, but it works fine in Google Chrome.