Duplicate Ids in RadAjaxPanel and AjaxUpdatedControl

[Joshua]

<rad:RadAjaxPanel ID="AjaxDetails" runat="server" ClientEvents-OnResponseEnd="afterAjax" LoadingPanelID="LoadingPanel1"><br>    <asp:Label ID="lblError" runat="server" Visible="false" ForeColor="Red" Font-Bold="true" style="margin-left:8px;" /><br>    <table width="908px" cellpadding="0"  cellspacing="0" border="0" style="margin-left:8px;"><br>    <tr><br>        <td class="fieldNameBefore formcol_3"><dash:LocResource ID="LocResource5" ResourceName="FlyingTitle" runat="server" />:</td><br>        <td class="fieldNameInsider formcol_2" colspan="3"><asp:TextBox ID="txtTitle" runat="server" Text="" style="width:740px"/></td><br>    </tr><br>    <tr><br>        <td class="fieldNameBefore formcol_4"><dash:LocResource ID="LocResource111" ResourceName="Product" runat="server" />:</td><br>        <td class="fieldNameInsider formcol_5"><br>            <rad:RadComboBox ID="selProduct" runat="server" Skin="Vista" Width="250px" <br>                Height="200" ExpandAnimation-Type="None" CollapseAnimation-Type="None"<br>                AllowCustomText="false" <br>                DataTextField="ProductName"<br>                DataValueField="ProductId"<br>                OnClientSelectedIndexChanged="productSelect"<br>                AppendDataBoundItems="true"><br>                    <Items><br>                    </Items><br>                </rad:RadComboBox><br>                <asp:TextBox ID="txtProductName" runat="server" Text="" style="width:250px" Visible="false" ReadOnly="true"/><br>        </td><br>        <td class="fieldNameBefore formcol_4444"><dash:LocResource ID="LocResource77" ResourceName="Active" runat="server" />:</td><br>        <td class="fieldNameInsider formcol_45555"><br>            <asp:CheckBox ID="chkActive" runat="server" /><asp:TextBox runat="server" ID="txtActive" ReadOnly="true" Visible="false" CssClass="readOnlyText"></asp:TextBox><br>        </td><br>    </tr><br>    <tr><br>        <td class="fieldNameBefore formcol_3"><dash:LocResource ID="LocResource99" ResourceName="TemplatePreview" runat="server" />:</td><br>        <td class="fieldNameInsider formcol_2" colspan="3"><br>            <div id="divTemplatePreview" class="previewTextArea" runat="server" style="width:735px;margin-bottom:5px;height:230px;overflow:scroll;"></div><br>        </td><br>    </tr><br></rad:RadAjaxPanel><br><div id="divCommunicationOuter" runat="server" visible="false"><br>    <div class="formSubSectionName"><dash:LocResource ID="LocResource111111" ResourceName="FlyingCommunications" runat="server" /></div><br>    <div id="divCommunicationList" style="margin-right:8px;width:400px;height:300px;overflow:hidden;float:left;"><br>        <rad:RadAjaxPanel runat="server" ID="ActivityListPanel" LoadingPanelID="LoadingPanel2" ClientEvents-OnResponseEnd="selectFirstCommunication"><br>            <rad:RadGrid ID="GridCommunication" Skin="Vista"<br>                EnableEmbeddedSkins="false"<br>                AllowSorting="False"<br>                ShowFooter="False" <br>                EnableAJAX ="true"<br>                ShowHeader="False"<br>                AllowPaging="False" <br>                AutoGenerateColumns="false"<br>                runat="server"<br>                GridLines="Both"<br>                Width="400px"<br>                ><br>                <MasterTableView ClientDataKeyNames="FlyingCommunicationId" Width="400px"><br>                    <Columns><br>                        <rad:GridTemplateColumn UniqueName="TemplateColumn" ItemStyle-CssClass="activityRow"><br>                            <ItemStyle Width="350" /><br>                            <ItemTemplate><br>                                <span style="font-weight:bold;">1</span><br /><br>                                <span style="width:350px; overflow:hidden">2</span><br>                             </ItemTemplate><br>                         </rad:GridTemplateColumn><br>                    </Columns><br>                </MasterTableView><br>                <ClientSettings><br>                    <Scrolling AllowScroll="true" ScrollHeight="300px"></Scrolling><br>                    <Selecting AllowRowSelect="true"></Selecting><br>                    <ClientEvents OnRowSelected="communicationSelected" OnGridCreated="communicationLoaded" /><br>                </ClientSettings><br>            </rad:RadGrid><br>            <div style="display:none;"><br>                <asp:Button ID="btnRefreshCommunicationList" runat="server" OnClick="LoadCommunicationList" /><br>                <asp:TextBox ID="txtFlyingIDComm" runat="server" style="display:none"/><br>            </div><br>        </rad:RadAjaxPanel><br>    </div><br>    <rad:RadToolBar Skin="Vista" runat="server" ID="ToolbarCommunication" OnClientButtonClicked="toolbar_handler" style="width:526px;" EnableEmbeddedSkins="false"><br>        <Items><br>            <rad:radtoolbarbutton Tooltip="Add Communication" Value="newcommunication" CommandName="newcommunication" Text="Add Communication" ImageUrl="~/images/toolbar/2.png"  /><br>            <rad:radtoolbarbutton Enabled="false" Tooltip="Edit Communication" Value="editcommunication" CommandName="editcommunication" Text="Edit Communication" ImageUrl="~/images/toolbar/3.png"  /><br>        </Items><br>    </rad:RadToolBar><br>    <div id="divCommunicationDetail" style="width:526px;height:300px;overflow:scroll;float:left;"><br>        <rad:RadXmlHttpPanel runat="server" ID="CommunicationDetailPanel" OnServiceRequest="LoadCommunication" LoadingPanelID="LoadingPanel2" Value="" ><br>                <div id="divCommunicationDetailInner" runat="server" style="padding:5px;"><br>                </div><br>                <asp:TextBox ID="txtFlyingCommunicationID" runat="server" style="display:none;" /><br>        </rad:RadXmlHttpPanel><br>    </div><br>    <div style="clear:both"></div><br></div><br><br><rad:RadAjaxManager ID="RadAjaxManager1" runat="server"><br>    <AjaxSettings><br>    <rad:AjaxSetting AjaxControlID="btnUpdateList"><br>        <UpdatedControls><br>            <rad:AjaxUpdatedControl ControlID="gridFlyings" LoadingPanelID="LoadingPanel1" /><br>        </UpdatedControls><br>    </rad:AjaxSetting><br>        <rad:AjaxSetting AjaxControlID="btnLoadPreview"><br>            <UpdatedControls><br>                <rad:AjaxUpdatedControl ControlID="divTemplatePreview" LoadingPanelID="LoadingPanel2" /><br>            </UpdatedControls><br>        </rad:AjaxSetting><br>    </AjaxSettings><br></rad:RadAjaxManager>

 

 

I use AjaxUpdatedControl to update divTemplatePreview with LoadingPanel2. But the resulting HTML codes contain duplicate <div> for id = ctl00_ContentArea_ctl00_ContentArea_divTemplatePreviewPanel as follows.

 

 

<p><div class="RadAjaxPanel" id="ctl00_ContentArea_ctl00_ContentArea_divTemplatePreviewPanel" style="display: block;"><br>                <div id="ctl00_ContentArea_divTemplatePreview" class="previewTextArea" style="width:735px;margin-bottom:5px;height:230px;overflow:scroll;"></div><br>           </div></p><p></p><p><div class="RadAjaxPanel" id="ctl00_ContentArea_ctl00_ContentArea_divTemplatePreviewPanel"></div></p>

[Joshua]

Formatted codes are shown as follows.

[Joshua]

The resulting code is shown as follows, which contains duplicate ids.

[Attila Antal]

Hi Joshua,

The issue is likely coming from the Nested AJAX panels because both AjaxManager and AjaxPanel are used to enable AJAX which is not supported, see Controls Wrapped in AjaxPanel and Added to AjaxManager Settings

Choose one of the Two and use only that to enable AJAX for the Controls. For an in-depth explanation of how the RadAjax controls work, check out the Understanding AJAX Controls Knowledge-Base article.

Regards,
Attila Antal
Progress Telerik

[Joshua]

Thanks