Monday, March 26, 2012

UpdatePanel & update progress indication

Hi,

Say I have an UpdatePanel and TextBox & Button on it. What i need is: when i click on the button it (button) should show "Saving..." and when it's updated it should show "Saved!"

Are there any client side events of update panel i could use? Couldn't find much info elsewhere...

Thank you,

Andrey

You have to use Sys.WebForms.PageRequestManager Class

Use

Sys.WebForms.PageRequestManager.instance.add_beginRequest(beginRequestHandler)

Sys.WebForms.PageRequestManager.instance.add_endRequest(endRequestHandler)

http://asp.net/AJAX/Documentation/Live/ClientReference/Sys.WebForms/PageRequestManagerClass/default.aspx


If you wanted to just show the "Saving..." message, you could just use an updateprogress control (http://asp.net/AJAX/Documentation/Live/tutorials/UpdateProgressTutorials.aspx).

But since you want to display the "Saved" message when the process is complete, you need to do some custom programming. Place the following scriptafter the scriptmanager tag on the page:

 <script type="text/javascript"> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_beginRequest(beginRequestHandler); prm.add_endRequest(endRequestHandler); //var to store id of asynch postback triggering control: var postbackElementID; function beginRequestHandler(sender, args) { //necessary in case other controls may cause asynch postback on the page too: if (args.get_postBackElement().id == 'Button1') { $get('TextBox1').value = 'Saving...'; postbackElementID = args.get_postBackElement().id; } } function endRequestHandler(sender, args) { //again, because we want to make sure we're responding to the right asynch postback: if (postbackElementID == 'Button1') { $get('TextBox1').value = 'Saved'; postbackElementID = ''; } } </script>

Thanks guys, I'll give it a try!

No comments:

Post a Comment