Rank: Member
Groups: Member
Joined: 8/29/2007
Posts: 20
|
Here is the scenario,
I have a UserControl with a ModalPopupExtender, and in that extender panel is an UpdatePanel with an AJAXUploader on it. My UpdatePanel has an UpdateProgress control on it that displays a loading animated gif when the page is asynchronous postback.
Since AJAXUploader is asynchronous all on its own, when I upload a file, the ASP.NET AJAX PageRequestManager never initiates an async request until after the file is finished, so my loading animated gif doesn't display until the AJAXUploader is done and it posts back the file to the page.
This is expected behaviour, but how can I get the loading animated gif to appear while AJAXUploader is uploading, and then when the page is doing a partial page refresh via ASP.NET AJAX?
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,090
|
You can handle ClientSideOnProgress event to show/hide your animated gif.
|
Rank: Member
Groups: Member
Joined: 8/29/2007
Posts: 20
|
Works like a charm, thanks! For posterity, I did away with the UpdateProgress and used a simple div with display:none; then I rigged it up to both the PageRequestManager and the ClientSideOnProgress, so it sticks around for AJAXUpload as well as the postback at the end. Quote:
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(s, e)
{
var div = $get('<%= divLoading.ClientID %>');
div.style.display = '';
}
function EndRequest(s, e)
{
var div = $get('<%= divLoading.ClientID %>');
div.style.display = 'none';
}
function ClientSideOnProgress(u, t, r)
{
var div = $get('<%= divLoading.ClientID %>');
div.style.display = t != r ? '' : 'none';
}
</script>
|