title: Two nested update panels on same aspx page
body: <p>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</p>
  
  <p>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. </p>
  
  <p>Please guide. Here is the code structure:</p>
  
  <pre><code>     &lt;asp:content id="HeaderContent" runat="server" contentplaceholderid="head"&gt;
  
      &lt;script language="javascript" type="text/javascript"&gt;
              function showProgress() {
                  var updateProgress = $get("&lt;%=Updprog3.ClientID %&gt;");
                  updateProgress.style.display = "block";
              }
  
          &lt;/script&gt;
      &lt;/asp:content&gt;
  
      &lt;asp:content id="BodyContent" runat="server" contentplaceholderid="cphMainContent"&gt;
          &lt;div style="padding-left:36px; padding-top:10px;"&gt;
              &lt;asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server"&gt;
                  &lt;ContentTemplate&gt;
      &lt;table align="left"&gt;
  
             &lt;tr&gt;
                  &lt;td style="border: none; width:120px"&gt;
                      Call Category Group:
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:DropDownList ID="ddlGroup" runat="server" 
                          onChange="javascript:showProgress()"
                          OnSelectedIndexChanged="ddlGroup_SelectedIndexChanged" Width="400px"&gt;
                          &lt;asp:ListItem Value="-1"&gt;--- Select Group ---&lt;/asp:ListItem&gt;
                          &lt;asp:ListItem Value="Group 1"&gt; Group 1&lt;/asp:ListItem&gt;
                          &lt;asp:ListItem Value="Group 2"&gt;Group 2&lt;/asp:ListItem&gt;
                      &lt;/asp:DropDownList&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
        &lt;!--2nd update panel--&gt;
      &lt;asp:UpdatePanel ID="UpdPnl" runat="server" UpdateMode="Conditional"&gt;
         &lt;Triggers&gt;
              &lt;asp:AsyncPostBackTrigger ControlID="ddlCallCategoryGroup" EventName="SelectedIndexChanged"/&gt;
          &lt;/Triggers&gt;
      &lt;ContentTemplate&gt;
  
      &lt;asp:GridView ID="gridView1" runat="server"&gt;
      &lt;/asp:GridView&gt;
      &lt;/ContentTemplate&gt;
      &lt;/asp:UpdatePanel&gt;
  
      &lt;asp:Panel runat="server" ID="pnlgvSecondLevelLoading" CssClass="modalwindow"&gt;
      &lt;asp:UpdateProgress ID="Updprog3" runat="server" AssociatedUpdatePanelID="UpdPnl"&gt;
          &lt;ProgressTemplate&gt;
                          &lt;table&gt;
                          &lt;tr&gt;
                              &lt;td align="right" width="35%"&gt;
                                  &lt;asp:Image ID="imgSubCallCategory_Wait3" runat="server" ImageUrl="ProjectImages/Wait_Small.gif" /&gt;
                              &lt;/td&gt;
                              &lt;td width="2%"&gt;
                              &lt;/td&gt;
                              &lt;td align="center" width="73%"&gt;
                                  Loading data . . .
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
  
          &lt;/ProgressTemplate&gt;
      &lt;/asp:UpdateProgress&gt;
      &lt;/asp:Panel&gt;
  
      &lt;asp:Panel runat="server" ID="pnlLoading" CssClass="modalwindow"&gt;
          &lt;asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel1"&gt;
              &lt;ProgressTemplate&gt;
                  &lt;div class="container2"&gt;
                      &lt;div class="content"&gt;
                          &lt;br /&gt;
                          &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;td align="right" width="35%"&gt;
                                      &lt;asp:Image ID="imgSubCallCategory_Wait2" runat="server" ImageUrl="ProjectImages/30-1.gif" /&gt;
                                  &lt;/td&gt;
                                  &lt;td width="2%"&gt;
                                  &lt;/td&gt;
                                  &lt;td align="center" width="73%"&gt;
                                      Loading Page . . .
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/ProgressTemplate&gt;
          &lt;/asp:UpdateProgress&gt;
      &lt;/asp:Panel&gt;
           &lt;/ContentTemplate&gt;
          &lt;/asp:UpdatePanel&gt; 
      &lt;/div&gt;
  &lt;/asp:content&gt;
  </code></pre>