I have two nested UpdatePanel controls on apsx page. The outer one is for the whole page and displays "Loading Page..." img, while the purpose of inner one is to load a grid on dropdownlist selectedIndexChanged
I get this error while both have different names: JavaScript runtime error: Sys.InvalidOperationException: Two components with the same id 'cphMainContent_Updprog3' can't be added to the application.
Please guide. Here is the code structure:
<asp:content id="HeaderContent" runat="server" contentplaceholderid="head">
<script language="javascript" type="text/javascript">
function showProgress() {
var updateProgress = $get("<%=Updprog3.ClientID %>");
updateProgress.style.display = "block";
}
</script>
</asp:content>
<asp:content id="BodyContent" runat="server" contentplaceholderid="cphMainContent">
<div style="padding-left:36px; padding-top:10px;">
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<table align="left">
<tr>
<td style="border: none; width:120px">
Call Category Group:
</td>
<td>
<asp:DropDownList ID="ddlGroup" runat="server"
onChange="javascript:showProgress()"
OnSelectedIndexChanged="ddlGroup_SelectedIndexChanged" Width="400px">
<asp:ListItem Value="-1">--- Select Group ---</asp:ListItem>
<asp:ListItem Value="Group 1"> Group 1</asp:ListItem>
<asp:ListItem Value="Group 2">Group 2</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<!--2nd update panel-->
<asp:UpdatePanel ID="UpdPnl" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlCallCategoryGroup" EventName="SelectedIndexChanged"/>
</Triggers>
<ContentTemplate>
<asp:GridView ID="gridView1" runat="server">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel runat="server" ID="pnlgvSecondLevelLoading" CssClass="modalwindow">
<asp:UpdateProgress ID="Updprog3" runat="server" AssociatedUpdatePanelID="UpdPnl">
<ProgressTemplate>
<table>
<tr>
<td align="right" width="35%">
<asp:Image ID="imgSubCallCategory_Wait3" runat="server" ImageUrl="ProjectImages/Wait_Small.gif" />
</td>
<td width="2%">
</td>
<td align="center" width="73%">
Loading data . . .
</td>
</tr>
</table>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<asp:Panel runat="server" ID="pnlLoading" CssClass="modalwindow">
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="container2">
<div class="content">
<br />
<table>
<tr>
<td align="right" width="35%">
<asp:Image ID="imgSubCallCategory_Wait2" runat="server" ImageUrl="ProjectImages/30-1.gif" />
</td>
<td width="2%">
</td>
<td align="center" width="73%">
Loading Page . . .
</td>
</tr>
</table>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:content>
<asp:ScriptManager ID="WebApp" runat="server" AsyncPostBackTimeout="36000" ScriptMode="Release"></asp:ScriptManager>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.