ASP.NET UserControl Help

Question

i have a user control that i made, and i place two instances of that control on the same page... when i interact with the first control, it updates the elements (using ajax) of the first userControl, as it should. but when i do the same thing with the second userControl, it updates the elements on the first userControl as opposed to itself!!! this is really strange as nothing is declared as shared, and it looks like an instantiation problem.

each userControl is wrapped around its own ajax updatepanel.

any ideas anyone? is this a common pitfall?

this is the structure of my code

<@ Control Language="VB" ClassName="AgeRange">
<@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxCT">

<script runat="server">

Delegate Sub NumberClickedEventHandler(ByVal sender As Object, ByVal e As EventArgs)
Public Event NumberClicked As NumberClickedEventHandler

Public Class NumberClickedEventArgs
          ' EVENT ARGS CLASS

End Class


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
         ' PAGE LOAD STUFF HERE

End Sub

Public Property A FEW PROPERTIES HERE

Protected Function GetHTML(ByRef lastNumber As Byte, Optional ByVal FromNo As Byte = 18,
            Optional ByVal bForPopDown As Boolean = False, Optional ByVal bForPopUp As Boolean = False) As String

        SOME CODE HERE
End Sub

--

<asp:UpdatePanel ID="upAgeRange" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional" ClientIDMode="Static"
<ContentTemplate>
    <table><tr>
        <td>

            <span id="spanPopUp" runat="server">
            </span>
            <div id="dPanel" runat="server">
            </div>
            <span id="spanPopDown" runat="server">
            </span>
        </td>
    </tr>
    </table>

    <AjaxCT:HoverMenuExtender ID="hmeUp" runat="server" TargetControlID="dPanel" PopupControlID="spanPopUp" OffsetY="-200">
    </AjaxCT:HoverMenuExtender>

    <AjaxCT:HoverMenuExtender ID="hmeDown" runat="server" TargetControlID="dPanel" PopupControlID="spanPopDown" OffsetY="60">
    </AjaxCT:HoverMenuExtender>
</ContentTemplate>
</asp:UpdatePanel>

Answer 1

Assuming this is a Client Side issue and not Server Side.

You'll need to ensure that both controls have unique names.

My preference is to places these controls in a <div> that has a unique class name.

<div class="Ctrl1"> and <div class="ctrl2">

I can then use findControl within the actual class I'm interested in.

Something like $('.Ctrl2').findControl....

Answer 2

You are currently using ClientIDMode="Static" in your update panel control. This means that the generated HTML will have duplicated IDs. The auto-generated client-side code for the update panels needs to have distinct IDs so that it can find the correct HTML elements in which to place updates.

You probably don't need that ClientIDMode="Static" at all.

Answer 3

turns out it was my fault, itnernal logic reason/issue, thanks