I'm trying to call some Java code from Javascript in Wicket.

This is my Java code:

public ShowUnternehmen() {

    add(new AbstractDefaultAjaxBehavior() {
        @Override
        protected void respond(AjaxRequestTarget ajaxRequestTarget) {
            System.out.println("respond");
        }

        @Override
        public void renderHead(Component ponent, IHeaderResponse response) {
            super.renderHead( ponent, response );
            System.out.println(getCallbackUrl());
        }
    });

}

And this is the Javascript code:

<wicket:head>
    <script type="text/javascript" >
        $(function() {
            $.contextMenu({
                selector: '.context-menu-one',
                callback: function(key, options) {
                    var m = "clicked: " + key;
                    alert("BLA");
                    Wicket.Ajax.get({"u":"./.emg.panels.unternehmen.ShowUnternehmen?1-1.IBehaviorListener.0-"})
                },
                items: {
                    "edit": {name: "Editieren", icon: "edit"},
                    "quit": {name: "Abbrechen", icon: function(){
                        return 'context-menu-icon context-menu-icon-quit';
                    }}
                }
            });

            $('.context-menu-one').on('click', function(e){
                console.log('clicked', this);
            })
        });
    </script>
</wicket:head>

But the response method is never executed. I was looking at other examples but they all seem to be confusing.

I got this url from renderHead method

I'm trying to call some Java code from Javascript in Wicket.

This is my Java code:

public ShowUnternehmen() {

    add(new AbstractDefaultAjaxBehavior() {
        @Override
        protected void respond(AjaxRequestTarget ajaxRequestTarget) {
            System.out.println("respond");
        }

        @Override
        public void renderHead(Component ponent, IHeaderResponse response) {
            super.renderHead( ponent, response );
            System.out.println(getCallbackUrl());
        }
    });

}

And this is the Javascript code:

<wicket:head>
    <script type="text/javascript" >
        $(function() {
            $.contextMenu({
                selector: '.context-menu-one',
                callback: function(key, options) {
                    var m = "clicked: " + key;
                    alert("BLA");
                    Wicket.Ajax.get({"u":"./.emg.panels.unternehmen.ShowUnternehmen?1-1.IBehaviorListener.0-"})
                },
                items: {
                    "edit": {name: "Editieren", icon: "edit"},
                    "quit": {name: "Abbrechen", icon: function(){
                        return 'context-menu-icon context-menu-icon-quit';
                    }}
                }
            });

            $('.context-menu-one').on('click', function(e){
                console.log('clicked', this);
            })
        });
    </script>
</wicket:head>

But the response method is never executed. I was looking at other examples but they all seem to be confusing.

I got this url from renderHead method

• javascript
• java
• wicket

• Do you just want to be able to execute some java/wicket code and trigger that from javascript, or do you need a response that you get and process from the javascript call? For the first case I would know an easy way to archieve this. – user6073886 Commented Feb 22, 2017 at 13:00
• Yeah that first case would be good for me – user2529173 Commented Feb 22, 2017 at 15:52
• @OH GOD SPIDERS I could use help with returning data. I made a new question about it: stackoverflow./questions/49789018/… – Torben Commented Apr 12, 2018 at 6:01

2 Answers 2

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:

public class CallFromJavascriptBehavior extends AbstractDefaultAjaxBehavior {
@Override
protected void respond(AjaxRequestTarget target) {
    final StringValue parameterValue = RequestCycle.get().getRequest().getQueryParameters().getParameterValue("yourName");
    System.out.println(String.format("Hello %s", parameterValue.toString()));
}

@Override
public void renderHead(Component ponent, IHeaderResponse response) {
    super.renderHead(ponent, 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 ponent on page.

(1) add a initialisation function to your page

<script>
    function initMyComponent(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.

public class ComponentBehavior extends AbstractDefaultAjaxBehavior{
@Override
protected void respond(AjaxRequestTarget target) {
    final StringValue parameterValue = RequestCycle.get().getRequest().getQueryParameters().getParameterValue("yourName");
    System.out.println(String.format("Hello %s", parameterValue.toString()));
}

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

(3) Add the behavior to your wicket ponent.

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

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 ponents

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

final HiddenField<Void> hiddenInput = new HiddenField<>("hiddenInput");
add(hiddenInput);
hiddenInput.add(new AjaxEventBehavior("change") {

    @Override
    protected void onEvent(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:

<input type="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 ments 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.