2 User Controls on the same page not working

Hello. I have an user control and i want to use it twice on same page. This is the UC.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ImageManagerCtrl.ascx.cs"
    Inherits="SitefinityWebApp.Application.Backend.Controls.ImageManagerCtrl" %>
<script type="text/javascript">
    function cellSelected(sender, args) 
        var mediaUrl = args.get_gridDataItem().getDataKeyValue("MediaUrl");
        document.getElementById("<% =hdnMediaUrl.ClientID %>").value = mediaUrl;
    

    function cellDeselected(sender, args) 
    var mediaUrl = args.get_gridDataItem().getDataKeyValue("MediaUrl");
    document.getElementById("<% =hdnMediaUrl.ClientID %>").value = '';
    
    
</script>
<asp:Panel runat="server" ID="pnlMedia">
    <asp:HiddenField runat="server" ID="hdnMediaUrl" ClientIDMode="Static" />
    <asp:DropDownList ID="lstAlbums" runat="server" Width="100%" OnSelectedIndexChanged="lstAlbums_SelectedIndexChanged"
        AutoPostBack="True" />
    <br />
    <telerik:RadGrid ID="grdPhotos" runat="server" GridLines="None" Skin="Sitefinity"
        OnItemDataBound="grdPhotos_ItemDataBound">
        <MasterTableView CssClass="listItems" AutoGenerateColumns="false" DataKeyNames="Id, MediaUrl"
            ClientDataKeyNames="Id, MediaUrl">
            <Columns>
                          bla bla bla
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
</asp:Panel>

And here is the page where i need.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Edit.ascx.cs" Inherits="SitefinityWebApp.Application.Backend.Affinia.Slides.Edit" %>
<%@ Register TagPrefix="uc" Src="../../Controls/ImageManagerCtrl.ascx" TagName="ImageManagerCtrl" %>
<asp:HiddenField ID="hdnItemId" runat="server" />
<fieldset class="sfNewContentForm agnesianContentForm">
    <ul>
        <li class="sfFormSeparator">
            <uc:ImageManagerCtrl ID="imageManagerBackground" runat="server" />
        </li>
        <li class="sfFormSeparator">
            <uc:ImageManagerCtrl ID="imageManagerForeground" runat="server" />
        </li>
    </ul>
</fieldset>  

I need in the second form the address for one image clicked in the first user control and one from the second user control. The address is stored in the hidden field and is returned with if(!string.IsNullOrEmpty(hdnMediaUrl.Value)) return hdnMediaUrl.Value; from code behind.

My problem is that only the second ImageManager works. The second one, when is clicked, run as the first one. I found that usint alert( "<%=this.ClientID%>"); in cellSelected function. Everytime it show foreground's user control id.

I tryed to change ClientIdMode, tryed everithing i know to do. If i remove ClientIDMode everytime the result is null. Something interesting is that if i change the position of user controls, the second one is used too. Is like i have just one of them.

I spent hours trying to solve this problem and no help. 

Thanks for you help.

One thing that jumps out to me is that since you have the script defined INLINE in the control if you put the control on the page twice...the functions exist twice

Try extracting them out to an external javascript file and using the resourcelinks control which makes sure it'll only get loaded once at runtime.

Also use firebug and inspect the markup to make sure the IDs on these lines

document.getElementById("<% =hdnMediaUrl.ClientID %>").value = mediaUrl;

I think, as Steve says, the embedded script will render twice on the page... and if the script itself is identifying the target, then I guess the question is... how will the page know to run the second version of a script function rather than the first ?

By default, when the script request is issued, the DOM will be searched top->bottom, so will probably always run the first one it finds.

As Steve says, you probably need to extract the common script to a file, load it (registering it, to prevent multiple loads) and pass the target id to it (or have appropriate script code to find it).

Hi,

here a problem : <asp:HiddenField runat="server" ID="hdnMediaUrl" ClientIDMode="Static" />

You add twice this component with same ID, invalid html...

Regards,
Nicolas