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?

So you are calling add(new AttributeAppender... inside the onClick handler? This would add the css class to your link. Is this your intention? — iluwatar

Tom Tom · Accepted Answer · 2013-07-07T21:04:18

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.

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

1 Answers