CODEWITHSUNDEEP
jqueryasp.netonclickrepeater
NoBullMan
NoBullMan

Reputation: 2188

Handling image onclick event using jQuery and ASP repeater

I have a repeater that includes, among other things, a text box and an image next to it. When the user enters text and clicks on the image, I want to open a modal popup.

This is for the user entering some user's last name and on image click, I search AD based on the last name and present the user with a list of AD users found and ask to select one.

I tried different methods of catching the click event but none worked. This I what I have tried (I am including both HTML image and ASP image so as not to repeat the code, but there is only one image):

<asp:Repeater runat="server" ID="rptQuestions" ClientIDMode="Static" OnItemDataBound="rptQuestions_ItemDataBound">
    <ItemTemplate>
        <div class="row">
            <div class="col-sm-6 col-md-6">
                <div class="form-group">
                    ...
                    <div runat="server" id="divSUserLookup" clientidmode="static">
                        <input runat="server" id="tbSUserLookup" clientidmode="Static" type="text" class="input-small" style="width: 80%" />
                        <asp:Image runat="server" ClientIDMode="Static" ID="imgSelUser" name="imgSelUser" ImageUrl="assets/Images/user_32.png" AlternateText="Select User" />
                        <img src="assets/Images/user_32.png" alt="Select User" id="imgSelUser" />
                    </div>
                    ...
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

jQuery to set up onclick; none of these get hit when image is clicked:

$('#imgSelUser').on('click', function (ev) {debugger       
    var lastName = $("[id*=tbSUserLookup]").val();

    if (lastName.trim() == '')
        return false;

    open_popup(lastName);
});

// Accessing control inside repeater
$("[id*=imgSelUser]").on('click', function (ev) {debugger      
    var lastName = $("[id*=tbSUserLookup]").val();

    if (lastName.trim() == '')
        return false;

    open_popup(lastName);
});

Upvotes: 1

Views: 916

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

First of all the id should be unique in the same document, so please replace the duplicate ones like imgSelUser & tbSUserLookup by common classes, e.g :

<asp:Repeater runat="server" ID="rptQuestions" ClientIDMode="Static" OnItemDataBound="rptQuestions_ItemDataBound">
    <ItemTemplate>
        <div class="row">
            <div class="col-sm-6 col-md-6">
                <div class="form-group">
                    ...
                    <div runat="server" id="divSUserLookup" clientidmode="static">
                        <input runat="server" class="input-small tbSUserLookup" clientidmode="Static" type="text" style="width: 80%" />
                        <asp:Image runat="server" ClientIDMode="Static" class="imgSelUser" name="imgSelUser" ImageUrl="assets/Images/user_32.png" AlternateText="Select User" />
                        <img src="assets/Images/user_32.png" alt="Select User" id="imgSelUser" />
                    </div>
                    ...
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

Since your DOM is generated dynamically you need to use event delegation on() to attach the event to those elements, and use the this keyword to target the related elements, like :

$('body').on('click', '.imgSelUser', function (ev) {
    var lastName = $(this).parent().find('.tbSUserLookup').val();

    if (lastName.trim() == '')
        return false;

    open_popup(lastName);
});

Upvotes: 1

Related Questions