Wicket - hide element on AjaxButton during lazy loading

Question

I have a page with AjaxLazyLoadPanel, which contain a long-loading list and submitting AjaxButton.

After the AjaxLazyLoadPanel is ready, when I submit, the another long-loading is executing, and after that I need to refresh whole page. This is where I get myself, the code looks as follows:

    AjaxButton button1 = new AjaxButton("submit1") {
        @Override
        protected void onSubmit(AjaxRequestTarget target, Form form) {
            someLongWorkingMethod();
            setResponsePage(page); //refreshing page
        }
    };
    add(button1);

And it works perfectly. But what I'm trying to do now - is to disable this button or hide this button (or the whole panel if its necessary) when the method is computing, and when the page refresh with setResponsePage I'd like to have this button back.

I've read many posts/mailing lists about it but nothing helped me, I tried all things that I found and placed it before someLongWorkingMethod():

ajaxLazyLoadPanel.setOutputMarkupId(true);
ajaxLazyLoadPanel.setOutputMarkupPlaceholderTag(true);
ajaxLazyLoadPanel.add(new AttributeAppender("style","display:none;"));
ajaxLazyLoadPanel.setVisible(false);
ajaxLazyLoadPanel.setEnabled(false);
target.add(ajaxLazyLoadPanel);

And the same not for ajaxLazyLoadPanel but for "this" (AjaxButton).

Am I doing something terribly wrong or what? Is this what I'm trying to do even possible? I would really appreciate some help.

Answer 1

In your AjaxButton you could override updateAjaxAttributes() and add an IAjaxCallListener which hides the button via jQuery right after you click the button. When the responsePage is rendered the button appears again. The code for the override looks like this:

@Override
protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
    super.updateAjaxAttributes(attributes); 
    attributes.getAjaxCallListeners().add(new IAjaxCallListener() {

        @Override
        public CharSequence getBeforeHandler(Component cmpnt) {
            return "$(\"#" + cmpnt.getMarkupId() + "\").hide()";
        }

        @Override
        public CharSequence getPrecondition(Component cmpnt) {
            return "";
        }

        @Override
        public CharSequence getBeforeSendHandler(Component cmpnt) {
            return "";
        }

        @Override
        public CharSequence getAfterHandler(Component cmpnt) {
            return "";
        }

        @Override
        public CharSequence getSuccessHandler(Component cmpnt) {
            return "";
        }

        @Override
        public CharSequence getFailureHandler(Component cmpnt) {
            return "";
        }

        @Override
        public CharSequence getCompleteHandler(Component cmpnt) {
            return "";
        }
    });
}

Answer 2

Thanks to @Robert Niestroj answer (but working only in newest Wicket 6), I found solution for Wicket 1.5, I hope it will help someone.

Its just similar idea, but achieved with overriding getAjaxCallDecorator for AjaxButton, and using pure Javascript

AjaxButton button1 = new AjaxButton("submit1") {
    String id = this.getMarkupId();
    @Override
    protected void onSubmit(AjaxRequestTarget target, Form form) {
        ...
    }

    @Override
    protected org.apache.wicket.ajax.IAjaxCallDecorator getAjaxCallDecorator() {
        return new AjaxCallDecorator() {
            @Override
            public CharSequence decorateScript(Component component, CharSequence script) {
                return "document.getElementById(\'"+id+"\').style.display = 'none';"+script;
            }
        };
    }
};

Important thing to remember is to ensure that you are returning script+[your added script], because otherwise your onsubmit action won't happen.

More info (and also onSucces and onFailure versions) in Wicket 1.5 doc