How to call jquery function after calling wicket ajax submit button

Question

I have a form with a submit button but this is implemented by Wicket's AjaxButton class. When the HTML page renders Wicket keeps a javascript onClick method dynamically for that submit button.

I want to do some operations using JQuery after Wicket's onClick method completes. How do I do this?

Answer 1

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));