Question

I have a web-application written on ASP.NET MVC 3. On client side I used JQuery. The main part of this application is grid of items. Each item has its own progress bar and I need to show a realtime progress. Unfortunately, I need 10 to 20 seconds to fetch data (this is pretty difficult process of data aggregation from few web-services), so I need to hide this process from user. Thus, I have two types of operations. The first type is Update operation which can be called asyncronously (we can inherit from AsyncController and use JQuery to call this operation – some sort of long-polling) and the second type is first load of page. As far as I see, it should be performed syncroniously, so I need to show some loading message.

My question is really simple – how can I show such message using JQuery while sync data fetching is running?

Thanks!

Answer 1

If you want to roll your own, you can use the following:

$('#loadingDiv')
    .show()  // hide it initially
    .ajaxStop(function() {
        $(this).remove();
    });

There are also several plugins for jquery that support modal popups. You could use one of these to accomplish the same, but they may be overkill.