How do I use Jquery with two of the same user controls on same page.

See more:

ASP.NET

Javascript

jQuery

, +

Hi People
I am trying to write a control that can be used by third parties and I have a problem referencing Multiple User Controls on the same page. The controls are the same type.

I am aware that I can reference different versions of the control using the ClientID but this does mean that the Jquery has to be updated whenever a new client id is created (by adding a new control to the ASPX page).

The code shown does work OK, and this is a workable solution when I am in control of the aspx page. However if a third party was to use this control they would have to alter the javascript in line with any usages of the control.

I am sure there must be a better OO type solution but I cannot find it.
Help would be very much appreciated

ASCX File:
(Code behind has no changes)

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="InputInformation.ascx.cs" Inherits="AscesisUserControlTest.Controls.TestControl.InputInformation" %>

<table>
    <tr>
        <td>
            <label>Please input your name :</label>
        </td>
        <td>
            <input id="NameInput" />
        </td>
    </tr>
    <tr>
        <td>
            <label>Please input your address :</label>
        </td>
        <td>
            <input id="AddressInput" />
        </td>
    </tr>
    <tr>
        <td>
            <input class="SubmitButton<%=ClientID%>" type="submit" value="submit" />
        </td>
    </tr>
</table>

Javascript file:

jQuery(document).ready(function ()
{
    $('.SubmitButtonInputControl').click(function (e)
    {
        e.preventDefault();
        
        if (e.target == this)
        {
            alert("Hello");
        }
    });

    $('.SubmitButtonInputControl1').click(function (e) {
        e.preventDefault();

        if (e.target == this)
        {
            alert("Second control");
        }
    });
});

Use of control:

<div>
    <Ascesis:InputControl runat="server" id="InputControl"></Ascesis:InputControl>
    <Ascesis:InputControl runat="server" id="InputControl1"></Ascesis:InputControl>
</div>

I would also like to point out that this is a simple example the real application is far more complex.