Call Wicket Code From Javascript

I'm trying to call some Java code from Javascript in Wicket. This is my Java code: public ShowUnternehmen() { add(new AbstractDefaultAjaxBehavior() { @Override

Solution 1:

You are on a good way. It would be more relalible if you let wicket render the callback function to the page. The following two examples show how you can do that:

A) Render a global callback function. The disadvantage will be that you will have only one callback endpoint.

(1) Create a behavior like the following one:

publicclassCallFromJavascriptBehaviorextendsAbstractDefaultAjaxBehavior {
@Overrideprotectedvoidrespond(AjaxRequestTarget target) {
    final StringValue parameterValue = RequestCycle.get().getRequest().getQueryParameters().getParameterValue("yourName");
    System.out.println(String.format("Hello %s", parameterValue.toString()));
}

@OverridepublicvoidrenderHead(Component component, IHeaderResponse response) {
    super.renderHead(component, response);
    response.render(JavaScriptHeaderItem.forScript(String.format("nameOfFunction=%s", getCallbackFunction(CallbackParameter.explicit("yourName"))), "CallFromJavascriptBehavior"));
}}

(2) Add this behavior to your wicket page.

(3) Now you can call nameOfFunction('Markus'); from your javascript.

B) Call a initialisation function for each instance of your component on page.

(1) add a initialisation function to your page

<script>functioninitMyComponent(selector, callback){
        $(selector).click(function(){
            callback("Markus");
        });
    }
</script>

(2) Create a behavior like the following which calls the initialisation function and passes the necessary selector and callback function.

publicclassComponentBehaviorextendsAbstractDefaultAjaxBehavior{
@Overrideprotectedvoidrespond(AjaxRequestTarget target) {
    final StringValue parameterValue = RequestCycle.get().getRequest().getQueryParameters().getParameterValue("yourName");
    System.out.println(String.format("Hello %s", parameterValue.toString()));
}

@OverridepublicvoidrenderHead(Component component, IHeaderResponse response) {
    super.renderHead(component, response);
    response.render(OnDomReadyHeaderItem.forScript(String.format("initMyComponent('#%s', %s)", component.getMarkupId(), getCallbackFunction(CallbackParameter.explicit("yourName")))));
}}

(3) Add the behavior to your wicket component.

If the response method did not get called this could have different reasons. You should check your console (ide and browser) first.

Solution 2:

An easy way to trigger java/wicket code from Javascript is to use a hidden input with an event behavior as a hook.

Hidden inputs are form elements that are "invisible" but can be quite usefull for cases like this.

Setup Wicket components

First we add a HiddenField on our Wicket page and give it an AjaxEventBehavior

final HiddenField<Void> hiddenInput = newHiddenField<>("hiddenInput");
add(hiddenInput);
hiddenInput.add(newAjaxEventBehavior("change") {

    @OverrideprotectedvoidonEvent(final AjaxRequestTarget target) {
        // Execute any code you like and respond with an ajax response 
        target.appendJavaScript("alert('Hidden Input Change Event Behaviour!');");
        }
});

I used that Javascript alert as an example because a System.out.println might be ignored by some logger systems. I also used the change event, although others would probably work as well.

The corresponding HTML-Markup:

<inputtype="hidden" wicket:id="hiddenInput"id="hiddenInput1"/>

NOTE: I gave the input a fixed id value. Since ids should be unique on every page you couldn't make this into a Wicket Panel and add it multiple times to a page. You would have to let wicket create the ids (setOutputMarkupId(true)) and then find a way to pass the ids to your javascript. But for this very simple example this should suffice.

Trigger with Javascript

Now all you need to do is trigger a change event on your hidden input and it will execute the code you defined in the onEvent method.

With JQuery and the id, this is extremly simple:

<script>
    $('#hiddenInput1').change();
</script>

Hope this simple example helps you to get the idea. As i already said in my comments this is only really usefull when your javascript call doesn't need/care about the response and you just want to be able to trigger wicket code from JavaScript.