Showing posts with label explaining. Show all posts
Showing posts with label explaining. Show all posts

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!