Monday, March 26, 2012

Programmatically Show UpdateProgress on Content Page

Hi, this question has arisen from another thread I posted but seemed worth having its own thread. I have followed the tutorial explaining how to programmatically show an UpdateProgress control using javascript found here:

http://www.asp.net/AJAX/Documentation/Live/tutorials/ProgrammingUpdateProgress.aspx

The example works fine if I copy it on a stand alone web form, but will not work when I use it as a content page for my project's master page. My master page does not use any ajax components. What is the difference that's disabling this code?

Try replacing any instance of

$get('UpdateProgress1')

with

$get('<%= UpdateProgress1.ClientID %>')


DisturbedBuddha's post should fix your issue.

TheContentPlaceHolder control implements INamingContainer which basically appends a string to make your controls unique. By using the ClientID, you are returning the actualy ID that will be rendered.

-Damien


Thanks, I didn't realize that the control name wasn't changed otherwise. Surprisingly, it still doesn't work...until I looked at my javascript. Here's microsoft's example:

...function InitializeRequest(sender, args) { if (prm.get_isInAsyncPostBack()) { args.set_cancel(true); } postBackElement = args.get_postBackElement(); if (postBackElement.id =='Panel1Trigger') { $get('UpdateProgress1').style.display = 'block'; } }function EndRequest(sender, args) { if (postBackElement.id =='Panel1Trigger') { $get('UpdateProgress1').style.display = 'none'; } }...
As you can see 'Panel1Trigger' is also referenced by its server ID, not the ID given by the INaming container. So here is the code that works:
...function InitializeRequest(sender, args) { if (prm.get_isInAsyncPostBack()) { args.set_cancel(true); } postBackElement = args.get_postBackElement(); if (postBackElement.id =='<%= Panel1Trigger.ClientID %>') { $get('<%= UpdateProgress1.ClientID %>').style.display = 'block'; } } function EndRequest(sender, args) { if (postBackElement.id =='<%= Panel1Trigger.ClientID %>') { $get('<%= UpdateProgress1.ClientID %>').style.display = 'none'; } }...
What a pain! Thanks for your help!

No comments:

Post a Comment