Showing posts with label updateprogress. Show all posts
Showing posts with label updateprogress. 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!

Progress template not showing

I got an updatepanle, an updateprogress , a label inside the update panel, and a button outside the updatepanel, what i wanna do is just simple, delay 5 sec before showing the label and at the same time showing the "loading..." before it complete. Problem occured when i put the button outiside of the updatepanel and it did not show the "loading.." and after 5 sec the label will shown , but everything works fine when i put the button in the updatepanel...I did set the button as trigger.

so may i know where is the problem ?

Thanx~

Hi giox,

Posting the code of your page would help us in locating the eventual problem.

Would you be so kind to use the Source Code button of the rich editor to insert code? TNX!

Kind regards,
Wim


i dont believe you need to set the button as a trigger if its in the update panel, also, have you tried setting the update progress "DisplayAfter" property to "0"?


Wim,

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lbl1" runat="server" Style="left: 48px; top: 0px" Text="Label" Width="352px"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
</div>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
<ProgressTemplate>
loading..
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</form>

VB code :

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
System.Threading.Thread.Sleep(3000)
Me.lbl1.Text = "abc"
End Sub

Thanx~


Lee Brennan:

i dont believe you need to set the button as a trigger if its in the update panel, also, have you tried setting the update progress "DisplayAfter" property to "0"?

The problem occured when the button is outside the update panel..

I tried to set "DisplayAfter" property to "0", but it still not working. thanx anyway.


The documentation is the problem on this one. If you look at the AssocitatedUpdatePanelID attribute, it states "You can set theAssociatedUpdatePanelID property to controls in the same naming container, a parent naming container, or the page."

What exactly that means is certainly not clear, because it does not work if it is used as a sibling of the UpdatePanel. (and you would think that that's what "in the same naming container" means)

If you delete the AssociatedUpdatePanelID completely, your example will work.

Of if you move the UpdateProgress "as is" inside the UpdatePanel, it will also work.


If want to show the UpdateProgress for a control which is outside the UpdatePanel you have to manually hook the initializeRequest and endRequest of PageRequestManager to show the UpdateProgress, like the following:

<script type="text/javascript"> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(initializeRequest); prm.add_endRequest(endRequest); var _postBackElement; function initializeRequest(sender, e) { if (prm.get_isInAsyncPostBack()) { e.set_cancel(true); } _postBackElement = e.get_postBackElement(); if (_postBackElement.id.indexOf('Button1') > -1) { $get('UpdateProgress1').style.display = 'block'; } } function endRequest(sender, e) { if (_postBackElement.id.indexOf('Button1') > -1) { $get('UpdateProgress1').style.display = 'none'; } }</script>

While I use the technique above as well for most projects, it is not necessary in this example. Simply eliminating the AssociatedUpdatePanelID attribute on the ProgressPanel will allow the example to work. That occurs because Button1 is also defined as a trigger for the panel. What was confusing is why it doesn't work with the attribute set because that is not clear from the documentation for the AssociatedUpdatePanelID attribute.

When reading the documentation for the UpdateProgress, none the scenarios described include the way the example was initially written. Only when the attribute is deleted does the following statement (bold type) apply:

"If you do not set theAssociatedUpdatePanelID property, theUpdateProgress control displays progress for any asynchronous postback that originates from inside anyUpdatePanelor for controls that are triggers for panels."


wrayx1:

While I use the technique above as well for most projects, it is not necessary in this example. Simply eliminating the AssociatedUpdatePanelID attribute on the ProgressPanel will allow the example to work. That occurs because Button1 is also defined as a trigger for the panel. What was confusing is why it doesn't work with the attribute set because that is not clear from the documentation for the AssociatedUpdatePanelID attribute.

It works when eliminating the AssociatedUpdatePanelID ...Thanx..the problem has solved, thanx to those who helping to solve this problem as well.

Progress/ Upload / Activity Indicator - UpdateProgress Missing?

Hello all,

I am completely new to this forum altogether and hope that someone can help me out as I am trying to get into the Atlas/AJAX world. I am inexperienced in using the tools so far, however I have followed the instructions by installing the latest extensions and then the CTP in the hopes of getting an UpdateProgress control that I could use on my users site.

I am using a page that implements a fileupload control so that a user may upload pictures to out site. When the user triggers the upload of the picture I was hoping to have an UploadProgress show a simple animated gif until the process was complete. My issue is that I cannot seem to find any reference to the UpdateProgress control using this version of AJAX. Has this control been eliminated in the current version, or should I be looking for another method to implement what I am trying to accomplish?

Please, any help is GREATLY appreciated.

Hello

The UpdateProgress control is under development and will be placed in the first Release Candidate of AJAX.
However, you can still use the new one if you first install the normal version of AJAX (the one you already have normally) and secondly the CTP version of AJAX (which is under development)

This will create another template into your visual studio AJAX CTP enabled Website, which makes the link between a specific dll (Microsoft.Web.Preview.dll) and the controls (like UpdateProgress).

You can also add the links manually into your existing web.config:

The first 2 lines are for the "normal" AJAX functionally (like UpdatePanel etc). You only have to add lines 3 and 4 to your web.config. Afterwards you have to copy the dll Microsoft.Web.Preview.dll to your bin directory of your web application, and tada, there's your UpdateProgress control again! :-)

Gerrie

<pages>
<controls>
<addtagPrefix="asp"namespace="Microsoft.Web.UI"assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<addtagPrefix="asp"namespace="Microsoft.Web.UI.Controls"assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<addtagPrefix="asp"namespace="Microsoft.Web.Preview.UI"assembly="Microsoft.Web.Preview"/>
<addtagPrefix="asp"namespace="Microsoft.Web.Preview.UI.Controls"assembly="Microsoft.Web.Preview"/>
</controls>


sweetCoffee,

Thanks so much for the reply! :) I am still a little confused as to which versions I should be installing. I uninstalled everything to start from scratch, then, found the April Atlas release and installed it, just to get the UpdateProgress working. It did. (Whoohoo!) I am still, however more interested in getting the latest release as you suggest, so I am assuming that I do the following:

1) Uninstall the April CTP

2) Reinstall the ASP.NET 2.0 AJAX v1.0 Beta

3) Reinstall the ASP.NET 2.0 AJAX CTP

4) Reinstall the AJAX Control Toolkit

Is this correct? Sorry to be sure a pain, but I have a short time in which to ramp up the ol’ knowledge base. As usual! ;)

Again, thank you.


Well, that procress seemed to work beautifully! Thank you again. Now on to more and more frustration ;)...but thats the fun stuff!

that was correct indeed :-)

have fun ! I'm also very frustrated now they have changed a lot of things.... it's for our good, but it needs a little adaption :-)

Saturday, March 24, 2012

Put the UpdateProgress into an AlwaysVisibleControl?

I already have an updateProgress in a master page as per below code..

Is it possible to somehow wrap this in another control and have this control referenced by an AlwaysVisibleControl. Therefore when a user needs to scroll down a page the update progress will always be visible.

Thanks

N

<

atlas:UpdateProgressid="loadingProgress"runat="server"><ProgressTemplate><divstyle="text-align: right;"id="loadingAnimation"><imgid="img9"src="images/indicator3.gif"title="Loading"alt=" Loading"border="0"><asp:LabelID="Label1"runat="server"Font-Names="verdana"Font-Size=8ForeColor=silverText="Working..."></asp:Label></div></ProgressTemplate></atlas:UpdateProgress>Hi niallhannon,

There shouldn't be any reason you can't do this to my knowledge... are you having a problem trying to?

Thanks,
Ted

You are right, it does work, I must have been doing something wrong.

Thanks for the reply.

N


Please share what you did. I'm trying to do the same!

Never mind. I figured it out myself. The AlwaysVisibleControlExtender needs to be inside the <ProgressTemplate> tags. For example:

<%@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="cc2" %>

<atlas:UpdateProgressID="ProgressIndicator"runat="server">
<ProgressTemplate>
<asp:Panelid="progressArea"runat="server">
<br/>Loading, please wait...
<asp:ImageID="LoadingImage"runat="server"ImageUrl="~/Images/spinner.gif"/>
</asp:Panel>
<cc2:AlwaysVisibleControlExtenderID="AlwaysVisible1"runat="server">
<cc2:AlwaysVisibleControlPropertiesTargetControlID="progressArea"/>
</cc2:AlwaysVisibleControlExtender>
</ProgressTemplate>
</atlas:UpdateProgress>

That works great then.


Hi Jason,

I hadto the same problem as you when I tried this last week, and ended up putting the AlwaysVisibleExtender in the ProgressTemplate.

However I found that every few updates on the same page (4 or 5?) would pop a javascript message box saying "Unspecified Error". Everything else seems to work ok.

I was wondering if you have the same problem?

~Brett


No, I've not seen any issues like that. I'm using the June CTP if that helps. I'll keep an eye on it though as its an app I'm actively developing at the moment.

Are you sure the javascript error is related to the location of the AlwaysVisibleControlExtender?


I'm Using April, perhaps it was fixed. The Javascript error was definately related to AlwaysVisibleControlExtender - once I removed that from my form the error message stops. Add it back = message returns

~Brett


Try using the June CTP. I believe there are no breaking changes (at least there wasn't for me!).

Also, could you post your AlwaysVisibleControlExtender markup? Unless its simple, maybe there's an issue within it. Just a thought.


I tried this with the June CTP and it seems it works fine.

~Brett

Wednesday, March 21, 2012

question about updateprogress control

Hi Everyone,

I'm building my first pages with AJAX. I have added a two updatepanels. One has the selections for my users searches, the other the viewgrids with the information they get back. It all works great. One option in for the viewgrids is to have the first column show as a link, and that brings back another smaller grid with the detail list for that selection they've clicked on. Works great -- brings back the info. I've added a updateprogress control to let them know the page is working when the click and it works great. Only problem I am having is that the updateprogress control is up above my main grid. If they are near the top, they see it, but if they are further down the page, they won't see it, plus they won't see the details grid when it is done building. Is there any way I can bounce them to the top of the report? Some sort of repositioning? How is this normally done?

thanks!

jekerry

You can try to use AlwaysVisibleControl, I think it will help you.

http://ajax.asp.net/ajaxtoolkit/AlwaysVisibleControl/AlwaysVisibleControl.aspx


That looks really good, only problem is that I am not sure how to get it added to my project! I have downloaded the toolkit to a folder on my harddrive, but have to admit I am not sure what do past that step.

thanks,

jekerry


Hello, please take a look athttp://ajax.asp.net/ajaxtoolkit/Walkthrough/Setup.aspx

Thank you! Just what I was looking for but somehow hadn't stumbled across.

jekerry