Wicket: How to add a click event handler to a table row?

Question

I want to make each row in a table respond to a mouse click. Specifically I want it to go to a link URL. At the moment my table is defined like this

    <ul wicket:id="componentStatus" class="component-status">
        <li wicket:id="equipComponentInst">
            <table class="full-width">
                <tr>
                    <td><div wicket:id="<XXX>ComponentPanel"></div></td>
                    <td><a wicket:id="<XXX>DetailLink" class="pull-right"><img wicket:id="detailLinkImg" border="0px"/></a></td>
                </tr>
            </table>
        </li>
    </ul>

As you can see, I have a <td> element containing a link.

But I would like the link to be followed if the user clicks on any part of the table row.

According to this SO question, it's possible to define a Javascript click handler function for table rows.

So I added such a click handler like this in my Java code

@Override
public void renderHead(IHeaderResponse response) {
    super.renderHead(response);

    response.render(OnLoadHeaderItem.forScript("$('tr').click( function() { window.location = $(this).find('a').attr('href');})"));
}

But the handler function never gets called. Can this work, or do I need to look at a different approach?

Your approach looks OK to me. It won't work if the link is an AjaxLink because it doesn't have 'href' attribute. Add some 'console.log()' debug statements to see what happens. — martin-g, Mar 11 '15 at 16:11

Robert Niestroj · Accepted Answer · 2015-03-12T09:22:23.870

My approach would be to make the <tr> a wicket component for example a WebMarkupContainer and attach to it an AjaxEventBehavior for the click event and there go to same same destination as <XXX>DetailLink points you.

Example:

private WebMarkupContainer tr() {
    WebMarkupContainer wmc = new WebMarkupContainer("tr");
    wmc.add(new AjaxEventBehavior("click") {

        @Override
        protected void onEvent(AjaxRequestTarget target) {
            //go to the same place as the XXXDetailLink
        }
    });
    return wmc;
}

Wicket: How to add a click event handler to a table row?

1 Answers1