Wicket Call Javascript Function Inside AjaxRequestTarget

Question

I have a web application that uses Wicket. My problem is the following: I have a part of code that runs inside an AjaxRequestTarget that spend a long time, and I have the necessity to show during this operation a busy indicator, in order to show to the user that we are trying to process the request.

I try to use target.appendJavascript("jsfunction()") but it doesn't work, because it is fired after the execution of the method. How can I accomplish this goal?

My example code is the following

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

UPDATE

The solution provided by martin-g works fine with AjaxLink, but my problem is more complex. I have a ConfirmModal that extends ModalWindo, with this implementation public abstract class ConfirmModalPanel extends 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
);

}

The functions "start()" and "finish()" are called correctly, but the execution of the request write inside the onClickOK method continue, and I cannot show the busy indicator.

martin-g · Accepted Answer · 2017-06-13 10:55:50Z

1

Doing this in onClickOk() is too late. Anything written to the web response will be send to the browser once the request is finished.

You need to use AjaxCallListener#onBeforeSend() and onComplete(). Those are executed on the client side just before making the request and after receiving the response.

See https://github.com/l0rdn1kk0n/wicket-bootstrap/blob/73a3d62a17c12cbca60d6b54caeee6b99ffbe9a8/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/ladda/LaddaAjaxLink.java#L101 and 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 for examples.

answered Jun 13, 2017 at 10:55

martin-g

17.5k2 gold badges27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matteo Rossi Over a year ago

This solution works fine on AjaxLink, but not in my case. I have updated the description.

martin-g Over a year ago

You should show the indicator in start() and hide it in finish(). The idea is to show it before making the request to the server side. You may use setTimeout(...) to show it with some delay. In that case you will have to use clearTimeout() in finish() too.

Matteo Rossi Over a year ago

I resolved with your help, but I modify the solution in this way. I fire the event start() with setTimeout via updateAjaxAttributes with the use of AjaxCallListener:onSendBefore and I fire the event finish() with the method target.appendJavascript("finish()") inside onCLickOk method. This works fine.

Collectives™ on Stack Overflow

Wicket Call Javascript Function Inside AjaxRequestTarget

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related