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

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

3 Answers 418 Views

3 Answers, 1 is accepted

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

answered on 01 Dec 2011, 05:04 PM

Capture.JPG

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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" />

</Items>

</telerik:RadTagCloud>

<asp:Button ID="Button1" Text="Postback" runat="server"/>

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

Accepted

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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