Click here to Skip to main content
15,860,972 members
Articles / Web Development / XHTML
Article

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 77.8K   324   50   21
Having access to a page via JavaScript once the update panel's update on server gets over

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:

JavaScript
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:

JavaScript
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

  • 23rd September, 2008: Initial post

License

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


Written By
Architect Intuit India
India India


A software professional for more than 17+ years building solutions for Web and Desktop applications.

Currently working at Intuit India.

Website: Learn By Insight
Github: Sandeep Mewara
LinkedIn: Sandeep Mewara

Strongly believe in learning and sharing knowledge.



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
Ashish 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
Sherylee17-Oct-10 23:25 
Generalif you are using MasterPage Pin
garfitr5-Apr-10 2:42
garfitr5-Apr-10 2:42 
Generalvery nice Pin
mr_sawari23-Feb-10 1:12
mr_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
gaetanocv6-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
Prishalan12-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
johram23-Mar-09 0:23 
Actually, the sender._postBackSettings.panelID returns the ID of the control that caused the postback. Given your example code, if I press the button and examine the value of panelID in the EndRequestHandler, I get the value 'upTest|btnTest'.

So in order to distinguish between update panels, I guess you would have to parse the name somewhat. Nevertheless, finding the exact control that caused the postback can be valuable too.

Please remember though that if your control is placed within a naming container (such as a MasterPage), you will get the unique id of the control, e.g. 'RootPanel$upTest|RootPanel$btnTest'.
GeneralGood article Pin
achuki119-Oct-08 23:24
achuki119-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
chkumar14-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
Aki811-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.