views:

648

answers:

1

So I'm new to Ajax. I have an ASP.NET wizard panel wrapped in an ASP Ajax UpdatePanel. The Ajax is working well, with the page doing partial updates as you step through the wizard. I'm even firing an animated gif images using the unblockUI.js jQuery library to prevent multiple page submits. What I can't figure out is when the page first loads, the wizard panel takes nearly a minute to load initially because of a longish database call. This isn't an async postback, so my animated gif doesn't fire. In fact, I just get an hour glass while the page loads. Is there a way to go ahead and load the rest of the page content and display that gif while the minute long database call is in effect? I've tried moving the DB call to after the page load, but it's still doing it on the initial page load and I don't get to do it asynchronously.
Again, I'm new to the asynchronous stuff. This seems like it should be simple, but I'm stuck.

Update: Ok, the tricky part for me was figuring out how to do the data load with the Ajax call. I have virtually no experience with that. This may be a kludge, but it's actually working pretty well without too much new code: I moved the data load from the Page Load to the Load event of my UpdatePanel, but put it in an If IsPostBack. It's the same code behind that was running before, but now only runs on a postback. Then in my markup, I put this (thanks to the answer below):

$(document).ready(function() 
{
    __doPostBack('<%= Me.UpdatePanel1.ClientID %>', '');
});

I just unhide the waiting div by default and hide it in the If IsPostback piece after the data loads. I had to mess with some control hiding logic (back and proceed buttons for the wizard, the loading.gif div, etc.), but the only new code was above.

+2  A: 

Generally, I would present a spinner or reasonably indicative loading animation before the ajax call commences. If the initial page load takes forever, you could instead kick-off the long running process with an ajax call in your $(document).ready(... function:

$(document).ready(function() {
    $('#someId').html('<img src="loading.gif"/>').load('complex.aspx');
});
karim79
Yeah, but it's the first full page load that is taking so long. So I don't have any elements of the page displaying until it's done. I'd like to have the loading.gif display on the initial page load, then fire the DB call asynchronously once everything is done loading. Then disable the loading.gif once the DB call is done. I just don't know how to place the DB call to fire after the page is loaded and displayed.
fr0man
So instead, load up the page *without* the result from the DB call that takes ages. When the DOM is ready, have an ajax call immediately fire which kicks off the execution, please see my edit.
karim79
In other words, you load the 'simple' page without the data. Once the page has loaded, the ajax call is fired to get the data, giving you full control of a suitable feedback mechanism such as a spinner.
karim79
Yes, fr0man's initial thought was page_load_fully(including db fetching) -> display_spinner -> page_loaded -> stop_spinner. This doesn't really work if the pageload includes data fetching. Karim's was page_load(no db fetching) -> display_spinner- > ajax_call(fetch data) -> data_fetched -> stop_spinner -> display_data.
o.k.w