More in this section

Forums / Developing with Sitefinity / 2 User Controls on the same page not working

2 User Controls on the same page not working

4 posts, 0 answered
  1. Liviu
    Liviu avatar
    13 posts
    Registered:
    15 Feb 2012
    05 Oct 2012
    Link to this post

    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.

  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    05 Oct 2012
    Link to this post
    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;
    ...are actually unique.  If not, I have a way you can get the values.
  3. MB
    MB avatar
    302 posts
    Registered:
    09 Jan 2005
    05 Oct 2012
    Link to this post
    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).
  4. Nicolas
    Nicolas avatar
    156 posts
    Registered:
    19 Jan 2011
    13 Nov 2012
    Link to this post
    Hi,

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

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

    Regards,
    Nicolas
4 posts, 0 answered