I am working on an app that loads modules (which are just user controls) into a single update panel. UpdateMode="Always". There is an UpdateProgress control with a gif that should display on postback.
For a few modules, the UpdateProgress doesn't show until the second postback from the module. So for example, the one module has a dropdown that posts back on change. If the user changes the dropdown before doing anything else, there will be no indication (no progress gif) that it is posting back. If the user then changes the drop down again (or any other postback), the UpdateProgress shows. Any ideas?
I've verified that it isn't just the drop down control and the initial postback takes long enough that the progress gif should show. UpdatePanel code below, module user controls are loaded in cphMain.
I am currently working around this by doing a __doPostBack in JavaScript when the module loads, but this is ugly.
<asp:UpdatePanel ID="upMain" runat="Server" UpdateMode="Always">
<ContentTemplate>
<asp:UpdateProgress ID="uPrgMain" runat="server" AssociatedUpdatePanelID="upMain">
<ProgressTemplate>
<h4>
<asp:Image ID="imgLoading" runat="server" ImageUrl="~/images/loading.gif" AlternateText="Loading" />
Loading...</h4>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:ContentPlaceHolder ID="cphMain" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
Related
I have an async page load that fetches data from an API and binds it to a repeater inside an update panel, separate to local search results.
There is a script manager in the master page.
<div class="searchResultContainer" runat="server" id="divApiResults">
<div class="searchResult">
<asp:UpdatePanel ID="udpApiResults" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:UpdateProgress ID="updateProgress" DisplayAfter="1000" runat="server">
<ProgressTemplate>
<div id="lblLoadingApi" runat="server">
Loading...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Label runat="server" CssClass="label searchResultLabel" Text="EXTERNAL SEARCH RESULTS" />
<asp:Repeater ID="rptApiResults" runat="server">
<!-- template in here -->
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
However, the update progress control is never shown on page load or when the repeater is sorted or the page changes. How do I get it to show "loading" until all data is loaded in the repeater?
I was doing things wrong. The update progress modal will never appear on an asynchronous page load, due to it being already loaded before the page has rendered. As it was posting back when it was paging and sorting that's when the UpdateProgress appeared.
My solution was load it asynchronously after the page load (as it's in an update panel it doesn't affect the rest of the page), by using a piece of jQuery to click a "trigger" button on $(document).ready(...), which then went off to fetch the API results. This also set the UpdateProgress to visible which disappeared after the results had finished loading.
I am using update panel and update progress control. In update panel I have textbox with TextChange event. This event is automatically called from javascript when user enters 10 digits into textbox. The call is :
__doPostBack("LabelTextBoxCode", "TextChanged");
This is my html code :
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress runat="server" ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel">
<ProgressTemplate>
...processing
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="LabelTextBoxCode" runat="server" OnTextChanged="TextChanged_TextBoxCode">
</asp:TextBox>
...
</ContentTemplate>
</asp:UpdatePanel>
So far what I found is this thread UpdateProgress Not working when called thru javascript but it does not help me (I do not know how to use it right in my case).
When I press any button in update panel, progress bar is showing, problem is just with this manually called __doPostBack from javascript.
How to fix it and make updateProgress works ?
Directly calling __doPostback bypasses all the triggers that set the update panel in action. So to avoid that you can either call the OnBeginRequest handler or you can trigger the same button click instead of calling the __dopostback. To trigger button click you can make use of jquery trigger function. You can get an example here.
Hope this helps.
I have a page associated with master page. I need to implement the Ajax(basically wanted to to do partial page refresh).
In this page I have grid and paging buttons(first/previous/last/next), dropdowns and also search.
So all these updates the grid.
Right now I have below code
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
under
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Here is the html like grid/buttons/search after ContentTemplate tag starts
So finally the page has left menu/footer/header and contents
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
But this is still refreshing the page.
I am a little confused as to you have and what you want.
It sounds like you have a Content control with an UpdatePanel in it. Within the UpdatePanel ContentTemplate you have all your grid, buttons etc along with your menu.
You only need to have the controls that you want to do the refresh in your UpdatePanel ContentTemplate. All the other stuff you should have outside of the UpdatePanel. If you have any controls outside of the UpdatePanel that you need to trigger a refresh with setup a Trigger for each control in the UpdatePanel and tell it which event to trigger off of.
Example:
<asp:Button ID="btnTest" runat="server" Text="Test" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- only your content that needs refreshing goes here -->
<ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnTest" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
In the above example the btnTest click event will cause the content of the UpdatePanel to refresh but the Button or anything outside of the UpdatePanel will not refresh. If the Trigger was not setup, the whole page would refresh. You don't need Trigger setup for controls within an UpdatePanel as all control events will be captured by the UpdatePanel for a refresh.
You can read up more on MSDN.
Well, i have this in my master page
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release" />
And this in a usercontrol
<asp:UpdateProgress ID="updateProgress1" runat="server" AssociatedUpdatePanelID="CustomerListUpdatePanel" DisplayAfter="0" DynamicLayout="false">
<ProgressTemplate>
<asp:Literal ID="loadingLiteral" runat="server" Text="<%$resources:Label,Loading %>" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel id="CustomerListUpdatePanel" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SearchButton" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:repeater id="CustomerListRepeater" runat="server">
Problem here is that when i press the SearchButton the update panel updates but the UpdateProgress does not show it self, even if it takes a few seconds.. [somewhat solved by Yuriy Rozhovetskiy].
Problem is that the child buttons inside the updatepanel do not cause a total postback, instead they only reload the update panel, so it seems ChildrenAsTriggers="false" does not work or im miss understanding it.
Im using AjaxControlToolkit 4.1.50731.0.
Edit: also the UpdateProgress seems to display it self if a button is pressed inside the update panel...
Associating an UpdateProgress with an UpdatePanel Control:
The AssociatedUpdatePanelID property has the following effect on
UpdateProgress control behavior:
When the AssociatedUpdatePanelID property is not set, the
UpdateProgress control is displayed for the following postbacks:
Postbacks that originate from inside any UpdatePanel control.
Postbacks that originate from controls that are asynchronous
triggers for any UpdatePanel control.
When the AssociatedUpdatePanelID property is set to an UpdatePanel
control ID, the UpdateProgress control is displayed for postbacks
that originate from inside the associated UpdatePanel control.
Not sure about #Problem 1.
Regarding #Problem 2... I think your understanding might not be correct.
http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.childrenastriggers.aspx
I have an updatepanel on my masterpage. Within the contentplace holder I have my update progress control. When a user clicks on the button I load some data into a gridview. This works perfectly in FireFox. User clicks the button, the loading image in my updateprogress fires and loads the gridview. When I test this in IE 6 or 7 or in Chrome. It does a full postback and the updateprogress is never shown. So the updatepanel doesnt seem to be working in these two browsers. Code is below. Again...it works perfect in FireFox.
***From Masterpage ***
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<contenttemplate>
<asp:contentplaceholder id="holder" runat="server" />
</contenttemplate>
</asp:UpdatePanel>
**From aspx page ****
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<img src="ajax-loader.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
We had some namespace and dll issues with this.