JavaScript Access to Page Controls after Ajax Update (via Update Panel)

• Download source - 5.32 KB

Introduction

Several times, we are in a situation where we need to do some work the moment the update panel finishes its update (ASP.NET 2.0 AJAX). There are situations like showing an error if any during the update, showing a success message after a proper update, setting up scroll bars, changing some UI component, updating some other part of UI, etc. The list can get longer as per the developer's requirement. I had tried to show how we can get control to the page once the update is finished. We can tweak things via JavaScript the way we need to out there in the handler.

Background  

Earlier I too faced lots of problem and was unable to work out of how to handle anything JUST after an update of update panel. I found lots of my colleagues facing the same issue. They wanted to have a certain UI work like scroll or to trap an error after the update. I found there was no article on The Code Project for the same. It was a real difficult time for my friends to find out the way to handle it. So I planned to write up a demo as soon I had some time. 

Using the Code 

The thing that we are going to use is "adding an end-request handler to the request-manager".

We add the handler to the request manager during page load via JavaScript.

Code example:

function LoadAfterAjaxHandler() 
{
    //Handler attached to the request
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}

Now, after having this piece of code in place, whenever the update panel finishes its update, the request would go through the EndRequestHandler.

EndRequestHandler needs to be placed now.  In the handler, one can write whatever requirement one asks for. Errors can be trapped, scrolls can be set, any UI component can be updated.

Code example:

function EndRequestHandler(sender, eArgs) 
{            
   /*
   1. Alert/Message if any after update
   2. Error handling if any
   3. Scroll position set again
   4. Focus/UI update if any
   */
   //Example
   if (eArgs.get_error() == null)
   {
      // Do all the stuffs needed after update through JavaScript here. 
      //1. Alert / Show window / Show Dialog
      //alert("Update was successful");
      //2. Page Controls accessed via JavaScript
      document.getElementById("lblTest").innerText = "Update Successful";
      //3. Page scrolls can be set if needed
      //Set Scroll Position
   }
   else
   {
      // There was an error in the update panels update 
      // caught here and message displayed via JavaScript               
      document.getElementById("lblTest").innerText = 
              "There was an error in update:"+eArgs.get_error().message;
   }
} 

As it can be seen, in the handler one can do all the possible things to a page via JavaScript. I have attached a sample codebase for the same.

Points of Interest

Working with AJAX is fun and it gets more interesting when we can have solutions to all possible scenarios while using it. For example, having a page history while using AJAX was earlier a problem, but lately I came to know that in .NET 3.5, Microsoft has provided AJAX calls history too! That's interesting, isn't it? 

History

• 23^rd September, 2008: Initial post