Click here to Skip to main content
11,715,160 members (75,058 online)
Click here to Skip to main content

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

, 22 Sep 2008 CPOL 55.6K 272 52
Rate this:
Please Sign up or sign in to vote.
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:

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

  • 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)

Share

About the Author

Sandeep Mewara
Software Developer (Senior)
India India
Current location: Bangalore, India.

You may also be interested in...

Comments and Discussions

 
Generalabout sender._updatePanelIDs Pin
Ali Al Omairi(Abu AlHassan)4-Feb-11 8:01
memberAli Al Omairi(Abu AlHassan)4-Feb-11 8:01 
GeneralMy vote of 5 Pin
Ali Al Omairi(Abu AlHassan)4-Feb-11 7:11
memberAli 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
memberAnkur\m/20-Jan-11 18:59 
GeneralRe: My vote of 1 Pin
Sandeep Mewara20-Jan-11 19:39
mvpSandeep Mewara20-Jan-11 19:39 
I guess he didn't like one of my comments to his answer in Q&A and downvoted all my articles and tip/tricks. (surely, he didnt knew that when downvoting these he has to put comments and that will be published and thus he will get caught! Laugh | :laugh: )

Answering it would keep the thread here. So better to use vote to remove 'Report' flag.

GeneralRe: My vote of 1 Pin
Ankur\m/20-Jan-11 19:51
memberAnkur\m/20-Jan-11 19:51 
GeneralMy vote of 5 Pin
JFergulbops17-Oct-10 23:25
memberJFergulbops17-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
memberSandeep 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
memberSandeep Mewara9-Jun-09 19:13 
QuestionNice article Pin
shalan9912-Nov-08 10:55
membershalan9912-Nov-08 10:55 
AnswerRe: Nice article [modified] Pin
Sandeep Mewara26-Nov-08 18:32
memberSandeep 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
memberSandeep 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
memberSandeep Mewara15-Oct-08 2:51 
GeneralNice! Pin
Aki8211-Oct-08 8:27
memberAki8211-Oct-08 8:27 
AnswerRe: Nice! Pin
Sandeep Mewara11-Oct-08 20:27
memberSandeep Mewara11-Oct-08 20:27 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150901.1 | Last Updated 23 Sep 2008
Article Copyright 2008 by Sandeep Mewara
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid