[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3226
  • Last Modified:

AJAX UpdateProgress not working when trigger control is outside of UpdatePanel

I basically have the senario outlined at the bottom of this article:
http://www.codeproject.com/KB/ajax/UpdateProgress.aspx

I have an UpdatePanel with triggers monitoring a DropDownList elsewhere in the page.  Apparently such a configuration causes the UpdateProgress not to work.  Is there a better option than the manual javascript suggested in the above article?  Below is a snip of code:
<asp:DropDownList ID="ShippingCountryDropDown" AutoPostBack="true" CssClass="InputDropDown" runat="server" onselectedindexchanged="CountryDropDown_SelectedIndexChanged">
                  </asp:DropDownList>
 
				<asp:UpdatePanel ID="ShippingOptionsUpdatePanel" UpdateMode="Conditional" runat="server">
					<Triggers>
						<asp:AsyncPostBackTrigger ControlID="ShippingCountryDropDown" />
						<asp:AsyncPostBackTrigger ControlID="CountryDropDown" />
					</Triggers>
					<ContentTemplate>
						
						<asp:Label ID="ShippingMethodLabel" CssClass="FieldLabel" runat="server">Shipping Method</asp:Label>
						<asp:RequiredFieldValidator ID="ShippingMethodValidator" runat="server" ControlToValidate="ShippingMethodDropDown"
							CssClass="ValidationIndicator" ErrorMessage="Please select a Shipping method" ValidationGroup="OrderGroup">*</asp:RequiredFieldValidator>
						<br />
						<asp:DropDownList ID="ShippingMethodDropDown" CssClass="InputDropDown" runat="server">
							<asp:ListItem Value="" Selected="true">Select a shipping method...</asp:ListItem>
						</asp:DropDownList>
					</ContentTemplate>
				</asp:UpdatePanel>
		    <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="ShippingOptionsUpdatePanel">
			    <ProgressTemplate>
				    <img id="Img2" src="~/Images/ajax_update.gif" alt="Updating..." runat="server"/>
			    </ProgressTemplate>
		    </asp:UpdateProgress>

Open in new window

0
b_levitt
Asked:
b_levitt
2 Solutions
 
GiftsonDJohnCommented:
Hi

Try this.
 <Triggers>
                                                <asp:AsyncPostBackTrigger ControlID="ShippingCountryDropDown"  EventName="SelectedIndexChanged"/>
                                                <asp:AsyncPostBackTrigger ControlID="CountryDropDown" EventName="SelectedIndexChanged />
                                        </Triggers>

Open in new window

0
 
David RobitailleAnalyst ProgrammerCommented:
personaly, i use this one.(sample 3), you dont have to use a AssociatedUpdatePanelID
 http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html
0
 
b_levittAuthor Commented:
Specifying the event name didn't work.  

Modals are a little overkill for what I'm doing here but I appreciate the link.  In the end I found a little more info on the example in the bottom of the article I posted:
http://www.asp.net/Ajax/Documentation/Live/overview/UpdateProgressOverview.aspx
http://www.asp.net/AJAX/Documentation/Live/tutorials/ProgrammingUpdateProgress.aspx
I needed this to understand the "$get" shortcut functions exposed by the "ASP.net Client Side Library"
http://mattberseth.com/blog/2007/08/the_everuseful_get_and_find_as.html

In the end my code ended up being:

<script language="javascript" type="text/javascript">
<!--
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    function CancelAsyncPostBack() {
      if (prm.get_isInAsyncPostBack()) {
        prm.abortPostBack();
      }
    }
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var postBackElement;
    function InitializeRequest(sender, args) {
      if (prm.get_isInAsyncPostBack()) {
        args.set_cancel(true);
      }
      postBackElement = args.get_postBackElement();
      if (postBackElement.id == '<%=CountryDropDown.ClientID %>') {
        $get('<%=ShippingOptionsUpdateProgress.ClientID %>').style.display = 'block';
        $get('<%=ShippingOptionsUpdatePanel.ClientID %>').style.display = 'none';
      }
    }
    function EndRequest(sender, args) {
      if (postBackElement.id == '<%=CountryDropDown.ClientID %>') {
        $get('<%=ShippingOptionsUpdateProgress.ClientID %>').style.display = 'none';
        $get('<%=ShippingOptionsUpdatePanel.ClientID %>').style.display = 'block';
      }
    }
 
// -->
</script>

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
johnaryanCommented:
The easy solution to this one... looks like you were missing the AutoPostBack=True on the dropdownlist.
0
 
b_levittAuthor Commented:
No it's on there - see the code block in my first post...
<asp:DropDownList ID="ShippingCountryDropDown" AutoPostBack="true"
0
 
johnaryanCommented:
My apologies, I was looking at the wrong dropdownlist... ShippingMethodDropDown

I was having trouble very similar to yours and it turned out that i was just missing the postback...

John
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now