Paresh

Sometime with Ajax History control on page, when user presses back or forward button it takes time to load page content. because History’s ajax request is still in progress. user gets effect after few seconds. and this ajax request does not display update progress. sometime it is needed ajax progress for History control. so user comes to know that he will get actual content after ‘Loading…’ message gets hidden.

To display update progress first we have to identify that ajax request being started and it is going to be started by History control. and on completion of request stop displaying ajax progress.

first we add beginRequest and endRequest handler function.

function pageLoad(sender, args)
{
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}

‘pageLoad’ function will be fired automatically when client side page is loaded. so it will set handler function for beginRequest and endRequest.

the handler functions:

function BeginRequestHandler(sender, args)
{
 var elem = args.get_postBackElement();
 if(elem.id=='<%= History1.ClientID %>')  //-- To identify event sender is History Control.
 {
  //-- get update panel object and make it visible.
  var uPanel = obj=document.getElementById('<%=Updateprogress1.ClientID%>');
  if(uPanel)
   uPanel.style.display="block";
 }
}    
function EndRequestHandler(sender, args)
{
 //-- get update panel object and hide it.
 var uPanel = obj=document.getElementById('<%=Updateprogress1.ClientID%>');
 if(uPanel)
   uPanel.style.display="none";
}

Now its done.

it will show you 'Loading..'(whatever you have put in update progress) while you will press browser's back button it it takes logn time to load content.

if you are using any third party controls, like Telerik, they provides you javascript API to show/hide update/ajax panel. you can use that API in these handler functions.