Sandeep Mewara">
Click here to Skip to main content
15,389,719 members
Articles / Web Development / XHTML
Posted 22 Sep 2008


50 bookmarked

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

Rate me:
Please Sign up or sign in to vote.
4.72/5 (52 votes)
22 Sep 2008CPOL2 min read
Having access to a page via JavaScript once the update panel's update on server gets over


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.


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

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
   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
      // 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? 


  • 23rd September, 2008: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sandeep Mewara
Software Developer (Senior) Intuit India
India India

Comments and Discussions

Generalabout sender._updatePanelIDs Pin
Ali Al Omairi(Abu AlHassan)4-Feb-11 8:01
professionalAli Al Omairi(Abu AlHassan)4-Feb-11 8:01 
GeneralMy vote of 5 Pin
Ali Al Omairi(Abu AlHassan)4-Feb-11 7:11
professionalAli Al Omairi(Abu AlHassan)4-Feb-11 7:11 
GeneralMy vote of 1 Pin
Ashish Tyagi 4015-Jan-11 9:25
MemberAshish Tyagi 4015-Jan-11 9:25 
GeneralRe: My vote of 1 Pin
Ankur\m/20-Jan-11 18:59
professionalAnkur\m/20-Jan-11 18:59 
GeneralRe: My vote of 1 Pin
Sandeep Mewara20-Jan-11 19:39
mveSandeep Mewara20-Jan-11 19:39 
GeneralRe: My vote of 1 Pin
Ankur\m/20-Jan-11 19:51
professionalAnkur\m/20-Jan-11 19:51 
GeneralMy vote of 5 Pin
Sherylee17-Oct-10 23:25
MemberSherylee17-Oct-10 23:25 
Generalif you are using MasterPage Pin
garfitr5-Apr-10 2:42
Membergarfitr5-Apr-10 2:42 
Generalvery nice Pin
mr_sawari23-Feb-10 1:12
Membermr_sawari23-Feb-10 1:12 
AnswerRe: very nice Pin
Sandeep Mewara23-Feb-10 2:08
mveSandeep Mewara23-Feb-10 2:08 
Generalthanks Pin
gaetanocv6-May-09 9:08
Membergaetanocv6-May-09 9:08 
AnswerRe: thanks Pin
Sandeep Mewara9-Jun-09 19:13
mveSandeep Mewara9-Jun-09 19:13 
QuestionNice article Pin
Prishalan12-Nov-08 10:55
MemberPrishalan12-Nov-08 10:55 
AnswerRe: Nice article [modified] Pin
Sandeep Mewara26-Nov-08 18:32
mveSandeep Mewara26-Nov-08 18:32 
GeneralRe: Nice article Pin
johram23-Mar-09 0:23
Memberjohram23-Mar-09 0:23 
GeneralGood article Pin
achuki119-Oct-08 23:24
Memberachuki119-Oct-08 23:24 
GeneralRe: Good article Pin
Sandeep Mewara20-Oct-08 1:20
mveSandeep Mewara20-Oct-08 1:20 
GeneralGood work! Pin
chkumar14-Oct-08 6:37
Memberchkumar14-Oct-08 6:37 
AnswerRe: Good work! Pin
Sandeep Mewara15-Oct-08 2:51
mveSandeep Mewara15-Oct-08 2:51 
GeneralNice! Pin
Aki811-Oct-08 8:27
MemberAki811-Oct-08 8:27 
AnswerRe: Nice! Pin
Sandeep Mewara11-Oct-08 20:27
mveSandeep Mewara11-Oct-08 20:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.