Call javascript function from wicket 6, Link's "onclick ()"

Question

I have the following java and html code:

this.leakageModel = new PropertyListView<Leakage> ( "leakage", new ArrayList<Leakage> ()) {
        private static final long serialVersionUID = 1L;

        @Override
        protected void populateItem (final ListItem<Leakage> item) {

            Link<String> brandLink = new Link<String> ("brandLink") {
                private static final long serialVersionUID = -480222850475280108L;

                @Override
                public void onClick () {
                    //change another model in the page to update 
                    //another table when the link is clicked
                }

            };

            brandLink.add (new Label ("brand"));
            item.add (brandLink);

        } };

    add (this.leakageModel);

html file:

                        <tr wicket:id="leakage" class="testClass">
                            <td class="testClass">
                                <a wicket:id="brandLink" href="#">
                                    <span wicket:id="brand"></span>
                                </a>
                            </td>   

                        </tr>

What I want to do is to be able to call a javascript function from inside the onClick() method.

The model update that I currently do inside the onClick method works well and updates another table on the page.

However everything I have tried to call a javascript function or change the css style has failed.

For instance:

Adding a css class:

add (new AttributeAppender("class", new Model("anotherclass"), " "));

Using an AjaxLink type instead, and a number of other things I have tried to no avail.

On a related note, my original intention is to hide all rows in the table except the one I have clicked. Maybe I can do this just from the Java code and have no need for Javascript at all, but updating the css as above doesn't work.

Any suggestions as to what am I doing wrong?

Answer 1

On a related note, my original intention is to hide all rows in the table except the one I have clicked.

Instead of answering your question, I will try to provide a solution to your problem :).

It makes perfect sense to hide the table row via javascript. I would suggest doing it with Jquery as described in Hiding all but first table row with jQuery:

$("#myTbl tr:not(nth-child(3))").hide();

Now, you have to execute the above javascript snippet each time a user clicks your Wicket link. For this, you can for example create your own link class like this:

public class JavascriptLink extends Label{

  public JavascriptLink(String id, String label) {
    super(id, label);
    add(new AttributeAppender("onclick", "...your javascript here..."));
  }
}

I leave it to you to combine the jquery with the JavascriptLink to meet your requirements. It should work going in this direction.