How to open a jQuery dialog from an ImageButton inside a GridView?

Question

How can I get the ImageButton ID so that I can use it to open the jquery dialog?

By hard-typing the ImageButton ID, it works as expected. i.e:

$('#ContentPlaceHolder1_GridView1_linkPasswordEdit_0').click(function () {
    $('#dialog-modal2').dialog('open');
    return false;
});

However, I want to do this with all the ImageButton in the GridView and not only the first one. I have tried various ways like:

$('#ContentPlaceHolder1_GridView1_' + '<%# linkPasswordEdit.ClientID %>').click(function () {
    $('#dialog-modal2').dialog('open');
    return false;
});

Or:

$('#' + '<%# ContentPlaceHolder1.GridView1.((GridViewRow)Container).FindControl("linkPasswordEdit").ClientID %>').click(function () {
    $('#dialog-modal2').dialog('open');
    return false;
});

This is what the ImageButton looks like:

<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="linkPasswordEdit" runat="server" CausesValidation="false" OnCommand="passwordEditCommand"
    CommandArgument='<%#Eval("id")%>' ToolTip="Click to edit password" ImageUrl="~/Images/imagesActions/password_edit.png"
    AlternateText='<%#Eval("userName")%>' />
</ItemTemplate>
</asp:TemplateField>

Any help would be greatly appreciated.

score 4 · Accepted Answer · answered Feb 22 '12 at 17:24

4

Why not just assign a custom CSS class (used for nothing but finding the image buttons) to the imagebutton and use the JQuery class selector to make the association.

$('.imageButtonFinderClass').click(function () {
    $('#dialog-modal2').dialog('open');
    return false;
});


<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="linkPasswordEdit" runat="server" CausesValidation="false" OnCommand="passwordEditCommand" CssClass="imageButtonFinderClass"
    CommandArgument='<%#Eval("id")%>' ToolTip="Click to edit password" ImageUrl="~/Images/imagesActions/password_edit.png"
    AlternateText='<%#Eval("userName")%>' />
</ItemTemplate>
</asp:TemplateField>

answered Feb 22 '12 at 17:24

swannee

3,346
2
24
40

Thanks. Somehow I hadn't thought of this possibility. Now I wonder how could I identify which link was clicked, I mean, which one is opening the dialog? I need to get the <%#Eval("id")%> as a parameter in the jquery dialog. Thanks in advance! – aleafonso Feb 22 '12 at 17:34
Try this out:http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event-using-jquery – swannee Feb 22 '12 at 17:43
In this case, you could eval the data "Id" into a custom attribute and follow the directions in some of the answers to the post above. Basically retrieve the value from the custom attribute using the JQuery .attr method. – swannee Feb 22 '12 at 17:45

How to open a jQuery dialog from an ImageButton inside a GridView?

1 Answers1