Loading indicator with Google Chrome

Question

I have problem with Google Chrome or rather Androids (2.1) webbrowser.

My webapp calls restservices with each page shift. This takes some time and I need a feedback for the user like a little "working..." popup . The restservices are called with a sync ajax 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'
});

That works great on FF and Opera! But when I visit my webapp on Chrome oder with my Android device the loading indicator doesnt appears! It seems that the Google browser don't work with synchrchronous requests.

Does someone know how I can get this to work or knows another solution to get a loading indicator in chrome??

Cornet

Answer 1

The solution is not to use synchronous requests. 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 UI), which isn't good.

Mcalister

Ok, your right. But that's the architecture at the moment and I can't change it in the near future. :/ – Cornet

Saying that synchronous requests should "never" be used is a pretty bold statement. It requires a much better explanation than "they tend to block things". What do they block? How would users bookmark their location if everything in your app is asynchronous? – Sylviasylviculture

@benjamin: Well, your "architecture" sucks. The only thing I can think of is showing the indicator before the $.ajax call, but I doubt that is going to work either. Or using setTimeout and friends, but that's even more difficult to implement than just using an asynchronous request. – Mcalister

@Lèse majesté: I updated my post a little. What I mean by synchronous requests are synchronous XMLHttpRequests. Those have nothing to do with bookmarking or whatnot. – Mcalister

Ok, that's much more reasonable, but maybe you should include that in your answers (i.e. synchronous XMLHttpRequests should never be used). – Sylviasylviculture

@Lèse majesté: I think my wording is perfectly clear. After all, this post is about XMLHttpRequests. – Mcalister

@MattiVirkkunen you should have no business saying someone's architecture sucks. That's not benefitting anyone and I think your response should be removed permanently. You obviously have a lot to learn career wise. For an actual answer: There are some workarounds if the app really needs synchronous processing such as some ecommerce sites. I'm using setTimeout currently. This answer has some points but it's not 100% "hey don't do this you're an idiot" kind of thing... just know you could freeze the browser if the result failed or something went wrong. – Cauthen

@sonic720: What you're essentially saying is that no matter what people do it's the right choice and people shouldn't tell them not to do that. That's ridiculous and I don't agree with that. Also I don't get how "being an ecommerce site" requires synchronous processing, I think there's something obviously wrong with the architecture. And setTimeout works with the exactly same event queue as requests - I'm not sure if I even want to know what kind of horrible hack you've come up with. – Mcalister

Yep, this is definitely (still) correct. Even when you think you want to block the UI, synchronous XHR is bad. – Curtain

Answer 2

Are you saying that the loading indicator doesn't show up on Google Chrome (desktop) as well or just the mobile Google Chrome Lite browser for Android devices? If you are using the latest version of jQuery, then it should work on all desktop browsers. Mobile browsers are not well-supported due to their drastically different interface design and, not being full browsers, many do not have fully functional JS support.

That said, I have not heard of any problems with jQuery in Chrome Lite—one of the most impressive things about the Android platform is the inclusion of a fully functional browser on a mobile platform. But I think there is a mobile version of jQuery either available or in the works. So if all else fails, you could try that.

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

Edit: While Chrome's UI does seem to lock up while you're performing a synchronous request, I was able to get past this by simply putting a slight delay between showing the loading indicator and performing the 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 equally well with get requests. I don't have an Android phone to test it on, but it works fine in Google Chrome.

Adaptation

Yeah, the indicator doesn't show up on Google Chrome desktop and on the Android device. I use version 1.4.2 of jQuery. Maybe I play around with jQTouch... – Cornet

@benjamin: Try putting a delay between showing the loading indicator and launching the synchronous XHR. – Sylviasylviculture

Hi Lèse, it works with the timeout!! Thanks for your great effort!! I can't give you a vote up because I need 15 reputations first! :/ – Cornet