This is a migrated thread and some comments may be shown as answers.

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

3 Answers 251 Views
TagCloud
This is a migrated thread and some comments may be shown as answers.
KAB
Top achievements
Rank 1
KAB asked on 28 Nov 2011, 11:29 PM
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.

3 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 01 Dec 2011, 03:52 PM
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
0
KAB
Top achievements
Rank 1
answered on 01 Dec 2011, 05:04 PM
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>
0
Accepted
Pero
Telerik team
answered on 02 Dec 2011, 04:47 PM
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
Tags
TagCloud
Asked by
KAB
Top achievements
Rank 1
Answers by
Pero
Telerik team
KAB
Top achievements
Rank 1
Share this question
or