2 asp:updatepanel and 2 asp:updateprogress controls - asp.net

I'm using two asp:updatepanel and 2 asp:updateprogress for them. Update progress shows correctly when I never use AssociatedUpdatePanelID with them, but if I use AssociatedUpdatePanelID the Progress bar never shows.
<asp:UpdateProgress AssociatedUpdatePanelID="upMainPracticeCountry" runat="server" ID="UpdateProgress1">
<ProgressTemplate>
<img src="images/loading.gif" alt="loading..." /></ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="upMainPracticeCountry" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlMainPracticeCountry" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:DropDownList ID="ddlMainPracticeState" runat="server">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
and the other update panel is
<asp:UpdateProgress runat="server" ID="up2" AssociatedUpdatePanelID="upPostalCountry">
<ProgressTemplate>
<img src="images/loading.gif" alt="loading..." /></ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="upPostalCountry" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlPostalCountry" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:DropDownList ID="ddlPostalState" runat="server">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>


Not exactly sure what's going in but can you try setting AutoPostback="true" for the dropdown lists in the update panels?


http://www.codeproject.com/KB/ajax/UpdateProgress.aspx

Related

Update Panel and Script Manager not working in Cascading Dropdownlist in ASP.NET

I tried to populate dropdown city and area without page refresing. So i used in Updatepanel and Script Manager.The code is below
<asp:ScriptManager ID="script1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
<div class="form-list wow fadeInRight" data-wow-delay="0.5s">
<ul class="navmain">
<li>
<asp:UpdatePanel ID="upd1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<!--<asp:DropDownList ID="drp_city" runat="server" CssClass="drp" OnSelectedIndexChanged="drp_city_SelectedIndexChanged" AutoPostBack="true" ></asp:DropDownList>-->
<asp:DropDownList ID="drp_city1" runat="server" CssClass="drp" OnSelectedIndexChanged="drp_city_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
<asp:HiddenField ID="hfCustomerId" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</li>
<li>
<asp:UpdatePanel ID="upd2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="drp_area" runat="server" CssClass="drp" AutoPostBack="true"></asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drp_city1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</li>
<li>
<asp:UpdatePanel ID="upd3" runat="server">
<ContentTemplate>
<asp:DropDownList ID="drp_cuisine" runat="server" CssClass="drp"></asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</li>
</ul>
<asp:Button OnClick="btn_search1" runat="server" CssClass="btn_search" />
</div>
I can't find the error. Page is not refreshing but area dropdown is not populating.

Trigger's updatepanel in a another updatepanel

I've two updatePanel :
the first :
<asp:Panel ID="pnlConso" runat="server" Height="500px" ScrollBars="Auto">
<asp:UpdatePanel ID="upConsommateur" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tbLogin" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="btnValiderAjout" EventName="Click" />
</Triggers>
<ContentTemplate>
...
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
and the second :
<asp:UpdatePanel ID="upAjoutConso" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlAjoutConsommateur" runat="server" CssClass="invisible">
<table>
...
<tr>
<td>
<asp:Button ID="btnValiderAjout" runat="server" Text="Valider" CssClass="invisible" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
then my problem is when I click on the btnValiderAjout the first panel don't update.
I make this button such as a trigger for the first but it don't update ... What I'm doing wrong ?

Confusion about UpdatePanel Loading image

I am trying to learn how to use UpdatePanel And this is my code.The problem is everything is ok but I cant see Loading.gif image .when code excatues Its wisible aspx page .What am i missing out here
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="load.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>

You should have trigger in UpdatePanel like this:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>

Try to use asp:Image:
<ProgressTemplate>
<asp:Image ID="loader" runat="server" ImageUrl="~/img/loader.gif" />
</ProgressTemplate>

modal popup extender not showing panel on button click

I'm trying to use a modal popup extender on my page so when I click a button, it must show a panel. Here is what I have:
<asp:UpdatePanel runat="server" ID="updPanel">
<ContentTemplate>
<ajaxToolkit:ModalPopupExtender ID="mpeEmailComplete" runat="server" TargetControlID="btnTesting"
PopupControlID="pnl" OkControlID="btnOk"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnl" runat="server" style="display:none;">
<asp:UpdatePanel ID="udp" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="pnlEmailComplete" Visible="false">
<asp:Label runat="server" ID="lblTest" Text="Testing testing testing"></asp:Label>
<asp:Button runat="server" ID="btnOk" Text="OK" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Button runat="server" ID="btnTesting" Text="Testing"/>
</ContentTemplate>
</asp:UpdatePanel>
but i can't get the panel to popup when the button is clicked. Anybody know why?

Your innermost panel has Visible=false.
<asp:Panel runat="server" ID="pnlEmailComplete" Visible="false"> *(change here)*
So, when you press the TESTING button, the ModalPopupExtender correctly causes the outer panel to display, but it's displaying an invisible inner panel, hence you see nothing on screen.
<asp:Panel ID="pnl" runat="server" style="display:none;"> *(this is ok)*
To fix, just yank the Visible=false from the outer panel (pnlEmailComplete)
Hope that helps!

Do you have any JavaScript errors and is pnl.Visible=False; set on the server-side anywhere?
Make sure you have the AjaxControlToolkit referenced properly, NuGet is the easiest way to add the reference.
http://nuget.org/packages/ajaxcontroltoolkit

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Btnshow" runat="server" Text="Show" OnClick="Btnshow_Click" />
<asp:Button ID="BtnTarget" runat="server" Text="Target" Style="display: none" />
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
<input type="button" value="Get" onclick="abc()" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="BtnTarget"
PopupControlID="Panel1">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" BackColor="Black" Width="300px" Height="300px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="BtnHide" runat="server" Text="Hide Button" OnClick="BtnHide_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnHide" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Btnshow" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

Update panel problem

Here is my code:
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" ChildrenAsTriggers="false" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Click1" OnClick="Button1_Click" />
<br />
<br />
Last refresh
<%=DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<asp:Button ID="Button2" runat="server" Text="Click2" OnClick="Button2_Click" />
<br />
<br />
Last refresh
<%=DateTime.Now.ToString() %>
<br />
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
Im using two update panels here, when i click "Button2" then "UpdatePanel2" was refreshed, if i click "Button1" then both update panel were refreshed, but my need is if i click "Button1" then "UpdatePanel1" have to be refreshed.
Thanks.

This behavior is by design. Because your UpdatePanel2 is nested inside of UpdatePanel1, when you refresh the contents of UpdatePanel1, this includes the child UpdatePanel.
If you want UpdatePanel2 to act separately from UpdatePanel1, you're going to have to take it out of UpdatePanel1 and make it a sibling, rather than a child.

Resources