Postback javascript error: Two components with the same id...

4 posts, 1 answers
  1. KAB
    KAB avatar
    14 posts
    Member since:
    Aug 2010

    Posted 28 Nov 2011 Link to this post

    Since release of Q3 2011 (2011.3.1115) javascript error occurred after postback in aspx page with TagCloud component (no matter ajax request or not).

    Error: Sys.InvalidOperationException: Two components with the same id 'ctl00_ContentPlaceHolder1_MessageBoard_Cloud_Cloud_0_8' can't be added to the application.

    Where control id is actually id of RadTagCloudItem() added during Page_Load and not modified on postback.

    In previous releases (Q2 2011) everything was Ok.
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 01 Dec 2011 Link to this post

    Hello Kab,

    Could you please provide more details about the error you are getting? Sample runnable project demonstrating the issue will help us a lot in tracing the reason for this problem.

    I tried to reproduce the error locally with the following code, but didn't get any exceptions:
    .aspx
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Button ID="Button1" Text="Postback" runat="server" />
        <telerik:RadTagCloud ID="TagCloud1" runat="server" Width="400px" AutoPostBack="true">
            <Items>
                <telerik:RadTagCloudItem Text="ASP.NET" Weight="12" />
                <telerik:RadTagCloudItem Text="AJAX" Weight="134" />
                <telerik:RadTagCloudItem Text="VB" Weight="56" />
                <telerik:RadTagCloudItem Text="C#" Weight="38" />
            </Items>
        </telerik:RadTagCloud>
        </form>
    </body>
    </html>

    .cs
    using System;
    using Telerik.Web.UI;
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                TagCloud1.Items.Add(new RadTagCloudItem("TAG Page_Load", 345));
            }
        }
    }


    Regards,
    Pero
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. KAB
    KAB avatar
    14 posts
    Member since:
    Aug 2010

    Posted 01 Dec 2011 Link to this post

    This fragment cause an javascript error error on masterpage or any child page.

    Error: Sys.InvalidOperationException: Two components with the same id 'ctl00_ContentPlaceHolder1_RadTagCloud1_0_0' can't be added to the application.

    .aspx
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1"  runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <asp:UpdatePanel ID="UpdatePanel" runat="server"  >
                <ContentTemplate>
                    <telerik:RadTagCloud ID="RadTagCloud1" runat="server" >
                        <Items>
                            <telerik:RadTagCloudItem Text="Demo1" />
                            <telerik:RadTagCloudItem Text="Demo1" />
                        </Items>
                    </telerik:RadTagCloud>
                    <asp:Button ID="Button1" Text="Postback" runat="server"/>
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>
    </body>
    </html>
  5. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 02 Dec 2011 Link to this post

    Hello Kab,

    Thank you for the source code, I managed to reproduce the problem locally. It is a bug in the RadTagCloud control. You could fix it by applying the code pasted below on the page containing the TagCloud control (just place it below the ScriptManager). We have fixed the problem in the source code and the fix will appear in the next official release.

    Here is the fix
    <script type="text/javascript">
        Telerik.Web.UI.RadTagCloud.prototype._createChildItems = function ()
        {
            var $T = Telerik.Web.UI;
            var container = this.get_containerElement();
            if (container != null)
            {
                var childElements = $telerik.getChildrenByTagName(container, "li"),
                length = childElements.length;
     
                for (var i = 0; i < length; i++)
                {
                    var liElement = childElements[i];
                    var anchorElement = $telerik.getChildrenByTagName(liElement, "a")[0];
     
                    var id = liElement.getAttribute("id");
                    liElement.removeAttribute("id");
     
                    var tagCloudItem = $create($T.RadTagCloudItem, { navigateUrl: anchorElement.getAttribute("href") }, null, null, liElement);
     
                    if (id != null)
                    {
                        tagCloudItem.set_weight(parseFloat(id.substring(id.lastIndexOf("_") + 1)) || 0);
                    }
     
                    if (!this.get_enabled())
                        anchorElement.removeAttribute("href");
     
                    tagCloudItem._setTarget(this.get_target());
     
                    childElements[i]._item = tagCloudItem;
                    this.get_items()[i] = tagCloudItem;
                }
     
                this.requestItems();
            }
        }  
    </script>

      and here is a sample page showing that the fix is working:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            Telerik.Web.UI.RadTagCloud.prototype._createChildItems = function ()
            {
                var $T = Telerik.Web.UI;
                var container = this.get_containerElement();
                if (container != null)
                {
                    var childElements = $telerik.getChildrenByTagName(container, "li"),
                    length = childElements.length;
     
                    for (var i = 0; i < length; i++)
                    {
                        var liElement = childElements[i];
                        var anchorElement = $telerik.getChildrenByTagName(liElement, "a")[0];
     
                        var id = liElement.getAttribute("id");
                        liElement.removeAttribute("id");
     
                        var tagCloudItem = $create($T.RadTagCloudItem, { navigateUrl: anchorElement.getAttribute("href") }, null, null, liElement);
     
                        if (id != null)
                        {
                            tagCloudItem.set_weight(parseFloat(id.substring(id.lastIndexOf("_") + 1)) || 0);
                        }
     
                        if (!this.get_enabled())
                            anchorElement.removeAttribute("href");
     
                        tagCloudItem._setTarget(this.get_target());
     
                        childElements[i]._item = tagCloudItem;
                        this.get_items()[i] = tagCloudItem;
                    }
     
                    this.requestItems();
                }
            }  
        </script>
        <asp:UpdatePanel ID="UpdatePanel" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" Text="Postback" runat="server" />
                <telerik:RadTagCloud ID="TagCloud1" runat="server" Width="400px" AutoPostBack="true">
                    <Items>
                        <telerik:RadTagCloudItem Text="ASP.NET" Weight="12" />
                        <telerik:RadTagCloudItem Text="AJAX" Weight="134" />
                        <telerik:RadTagCloudItem Text="VB" Weight="56" />
                        <telerik:RadTagCloudItem Text="C#" Weight="38" />
                    </Items>
                </telerik:RadTagCloud>
            </ContentTemplate>
        </asp:UpdatePanel>
        </form>
    </body>
    </html>


    Regards,
    Pero
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top