Question

我正在尝试从Wicket中的Javascript调用一些Java代码。

这是我的Java代码：

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

}

这是Javascript代码：

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

但是从不执行响应方法。我在看其他例子，但它们似乎都让人感到困惑。

我从renderHead方法获取此URL

Answer 1

你的方式很好。如果让wicket将回调函数呈现给页面，那将更加可靠。以下两个示例显示了如何执行此操作：

A）渲染全局回调函数。缺点是您只有一个回调端点。

（1）创建如下行为：

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）将此行为添加到您的wicket页面。

（3）现在你可以打电话给nameOfFunction（＆＃39; Markus＆＃39;）;来自你的javascript。

B）在页面上为组件的每个实例调用初始化函数。

（1）在页面中添加初始化功能

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

（2）创建类似下面的行为，调用初始化函数并传递必要的选择器和回调函数。

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）将行为添加到您的wicket组件。

如果没有调用响应方法，则可能有不同的原因。您应该首先检查您的控制台（ide和浏览器）。

Answer 2

从Javascript触发java / wicket代码的一种简单方法是使用带有事件行为的隐藏输入作为挂钩。

隐藏的输入是“不可见”的表单元素。但对于像这样的案件可能非常有用。

设置Wicket组件

首先，我们在Wicket页面上添加一个HiddenField并给它一个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!');");
        }
});

我使用该Javascript警报作为示例，因为某些记录器系统可能会忽略System.out.println。我也使用了变化事件，尽管其他人可能也会工作。

相应的HTML-Markup：

<input type="hidden" wicket:id="hiddenInput" id="hiddenInput1"/>

注意：我给输入一个固定的id值。由于ID在每个页面上都应该是唯一的，因此您无法将其转换为Wicket Panel并将其多次添加到页面中。你必须让wicket创建id（setOutputMarkupId(true)），然后找到一种方法将id传递给你的javascript。但是对于这个非常简单的例子，这应该足够了。

使用Javascript触发

现在您需要做的就是触发隐藏输入的更改事件，它将执行您在onEvent方法中定义的代码。

使用JQuery和id，这非常简单：

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

希望这个简单的例子能帮助你理解这个想法。正如我在评论中已经说过的那样，当你的javascript调用不需要/关心响应并且你只是希望能够从JavaScript触发wicket代码时，这才真正有用。

从Javascript调用Wicket代码

2 个答案: