jQuery & ASP.NET - Bind $.click() to gridview.Template control

Question

I have a Gridview with a template for this Hyperlink:

        <asp:TemplateField HeaderText="Notes" ItemStyle-CssClass="NoMargin NoPadding" SortExpression="lineNotes">
            <ItemTemplate>
                <asp:HyperLink id="notesHl" runat="server" text='<%# Bind("lineNotes") %>' Font-Underline="true" Font-Bold="true"></asp:HyperLink>
            </ItemTemplate>
            <ItemStyle Font-Size="Smaller" Height="10px" Width="10px" Wrap="True" />
        </asp:TemplateField>

Then jQuery that creates a Modal dialogue called by Popup();

    $(document).ready(function () {
        // increase the default animation speed to exaggerate the effect
        $.fx.speeds._default = 1000;
        $(function () {
            $("#divLineItemComments").dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode",
            width: 900,
            height: 500
            });
        });

        $("#_ctl0_ContentPlaceHolder1_cwgPhysical__ctl3_notesHl").click(function () {
            $("#divLineItemComments").dialog("open");
            return false;
        });
    });

    function Popup() {
        $("#divLineItemComments").dialog("open");
        return false;                       
    }

For testing, I hard coded the generated name of the first link in the gridview:

_ctl0_ContentPlaceHolder1_cwgPhysical__ctl3_notesHl

Because ASP.NET generates the id's dynamically, I need to dynamically bind the click event of the hyperlinks. So that it works with the naming used by ASP.NET. I could hardcode up to XX generated names (and hope they always generate the same names). This seems to be a terrible solution...

How can I get the jQuery to bind my Clicks to my Hyperlinks?

Hooking into the rowbound may work, but I don't know how to bind jQuery here

protected void cwgPhysical_RowDataBound(object sender, GridViewRowEventArgs e)
{
  Hyperlink.NavigateUrl = "javascript:Popup();";//this might work somehow...
}

each modal should have different data, so also mention what data you need to pull — codeandcloud
– codeandcloud, Commented May 13, 2011 at 15:48

Tejs · Accepted Answer · 2011-05-13 15:44:18Z

1

You can actually solve this with a rather low-tech solution: simply make a dummy cssClass and apply it to all your hyperlinks generated. Then you have a really simple selector:

$('.myDummyCssClass').click(...);

answered May 13, 2011 at 15:44

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery & ASP.NET - Bind $.click() to gridview.Template control

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related