How to call jquery function after calling wicket ajax submit button

Question

I have a form with subtmit button but this is implemented by Wicket's AjaxButton class. When HTML page rendered Wicket keeps a javascrpt onClick method dynamically for that submit button.
I want to do some operations using JQuery after Wicket's onClick method completed. How do I do this?

Answer 1

protected void onClick(AjaxRequestTarget target){
   target.appendJavascript("alert('hello');");
)

Answer 2

Using JQuery or any other JavaScript library works like a charm in wicket if you do it right.

First of all you need to make sure the library is present. You usually do that using a JavascriptPackageResource.

add(JavascriptPackageResource.getHeaderContribution("/path/to/jquery.js"));

(Put this in a constructor or dynamic initializer or in onBeforeRender())

Then, you need to make sure that

1. your component has an id (use Component.setOutputMarkupId(true)) and
2. you are using the correct id in the JQuery function (always retrieve the id via Component.getMarkupId())

Here's an example with a button that turns blue when clicked:

add(new AjaxButton("id"){

    private static final long serialVersionUID = 1L;

    @Override
    protected void onSubmit(AjaxRequestTarget target, Form<?> form){
        target.appendJavascript(
            "$('#" +getMarkupId() +"').css({'background':'blue'})");
    }
}.setOutputMarkupId(true));