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.

If I understand correctly, it seems that you could refresh the page immediately in the button's `onClick` & handle the `someLongWorkingMethod()` in the `ajaxLazyLoadPanel`? If this is incorrect, please provide some more information about the use-case. — OnesAndZeros, Jul 25 '13 at 18:43
@OnesAndZeros - I guess you're right, but I think it would be complicated to do, because on page load there is already LazyLoadPanel with another long-loading list and this button. So it stands that I should just refresh page and then in LazyLoadPanel execute someLongWorkingMethod(). But I don't want to do this on the first page load - that would be the problem I guess — Horuss, Jul 26 '13 at 06:44
You could use a separate constructor or just pass a boolean flag to fire a conditional statement only when coming from your button... Actually, I wonder if you couldn't just use the ajax functionality insead of setResponsePage(), but just need to set the panel as dirty so that it reloads lazily? You could put your button in the lazyLoadPanel so that it disappears as soon as the panel goes back into loading mode (displays spinner instead of components)? — OnesAndZeros, Jul 26 '13 at 14:59
I need to refresh the whole page, because of some different factor that I can't go around. But the idea with flag is worth consideration. But as I posted below, I did what I want with AjaxCallDecorator. — Horuss, Jul 26 '13 at 20:22

Robert Niestroj · Accepted Answer · 2013-07-26T06:37:53.083

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

Thanks, but I must admit that I forgot to say and tag that its about Wicket 1.5, which doesn't have those AjaxRequestAttributes, introduced in 6th version. But, thanks to you, I found something similar in 1.5: AjaxCallDecorator, and with that I made exactly the same above (in pure JS), as I wanted. I will post soon answer with solution for wicket 1.5. Thanks again! — Horuss, Jul 26 '13 at 07:46

score 1 · Answer 2 · answered Jul 26 '13 at 07:58

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

Wicket - hide element on AjaxButton during lazy loading

2 Answers2