Call Wicket Code from Javascript

Question

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 component, IHeaderResponse response) {
            super.renderHead( component, 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":"./com.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

Answer 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:

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 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>
    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 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.