Wicket 调用 AjaxRequestTarget 中的 Javascript 函数答案

【问题标题】：Wicket Call Javascript Function Inside AjaxRequestTargetWicket 调用 AjaxRequestTarget 中的 Javascript 函数
【发布时间】：2017-06-13 10:27:45
【问题描述】：

我有一个使用 Wicket 的 Web 应用程序。我的问题如下：我有一段在 AjaxRequestTarget 中运行的代码会花费很长时间，并且我有必要在此操作期间显示一个忙碌指示符，以便向用户显示我们正在尝试处理请求。

我尝试使用 target.appendJavascript("jsfunction()") 但它不起作用，因为它在方法执行后被触发。我怎样才能实现这个目标？

我的示例代码如下

    final ConfirmModal del_modal = new ConfirmModal("del-btn", "Are you sure?") {
        @Override
        public void onClickOK(AjaxRequestTarget target) {

            target.appendJavaScript("loadingFormFromTarget();");

            try {
                Thread.sleep(10000);
            } catch (InterruptedException ex) {
                Logger.getLogger(ListPricePlanPage.class.getName()).log(Level.SEVERE, null, ex);
            }}}

更新

martin-g 提供的解决方案适用于 AjaxLink，但我的问题更复杂。我有一个扩展 ModalWindo 的 ConfirmModal，具有此实现公共抽象类 ConfirmModalPanel 扩展 Panel {

public ConfirmModalPanel(String id, String text) {
    super(id);

    add(new Label("text", text));

    AjaxLink ok = new AjaxLink("ok") {
        @Override
        public void onClick(AjaxRequestTarget target) {
            onClikOK(target);
        }

        @Override
        protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
            super.updateAjaxAttributes(attributes);
            attributes.getAjaxCallListeners().add(new AjaxCallListener().onBeforeSend("start();").onComplete("finish();"));
        }
    };



    add(ok);

    add(new AjaxLink("ko") {
        @Override
        public void onClick(AjaxRequestTarget target
        ) {
            onClikKO(target);
        }
    }
    );



}

abstract public void onClikOK(AjaxRequestTarget target);

abstract public void onClikKO(AjaxRequestTarget target
);

}

函数“start()”和“finish()”被正确调用，但是 onClickOK 方法中写入的请求继续执行，我无法显示忙碌指示符。

【问题讨论】：

标签： javascript java ajax wicket

【解决方案1】：

在onClickOk() 中执行此操作为时已晚。请求完成后，写入 Web 响应的任何内容都将发送到浏览器。

您需要使用AjaxCallListener#onBeforeSend() 和onComplete()。这些是在发出请求之前和收到响应之后在客户端执行的。

有关示例，请参阅 https://github.com/l0rdn1kk0n/wicket-bootstrap/blob/73a3d62a17c12cbca60d6b54caeee6b99ffbe9a8/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/ladda/LaddaAjaxLink.java#L101 和 https://github.com/l0rdn1kk0n/wicket-bootstrap/blob/73a3d62a17c12cbca60d6b54caeee6b99ffbe9a8/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/ladda/LaddaAjaxCallListener.java#L15-L16。

【讨论】：

此解决方案在 AjaxLink 上运行良好，但不适用于我的情况。我已经更新了描述。
您应该在start() 中显示指标并将其隐藏在finish() 中。这个想法是在向服务器端发出请求之前显示它。您可以使用setTimeout(...) 延迟显示它。在这种情况下，您也必须在 finish() 中使用 clearTimeout()。
我在您的帮助下解决了，但我以这种方式修改了解决方案。我使用 AjaxCallListener:onSendBefore 通过 updateAjaxAttributes 通过 setTimeout 触发事件 start()，并在 onCLickOk 方法中使用 target.appendJavascript("finish()") 方法触发事件 finish()。这工作正常。