CODEWITHSUNDEEP
javajakarta-eewicket
K.Kunal
K.Kunal

Reputation: 1

render wicket components while submitting form

I am trying to update and render components while submitting form using onSubmit of IndicatingAjaxButton. But all the components are getting rendered once onSubmit is completed. Is there any way I can render them while my form is still submitting, say to show an updating progressbar while form is submitting. I want to show progress as each rest call executes. This is roughly what I am doing :

public class MyPage {
    Form form;
    int items;
    WebMarkupContainer progressbar = new WebMarkupContainer("progressbar");
    int progress = 0;
    MyData dataItems = new MyData();

    public MyPage() {
        progressbar.setOutpuMarkupId(true);
        items = 5;
        setupForm();
    }

    public void setupForm() {
        form = new Form("form", new CompundPropertyModel(dataItems));
        form.add(new IndicatingAjaxButton("button") {
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
                for (int i = 0; i < items; i++) {
                    progress++;
                    progressbar.add(new AttributeModifier("style", "width: " + progress + "%;"));
                    //rest post call goes here
                }
            }
        });
    }

    add(form);
    add(progressbar);

}


//in html page
<div wicket:id="progressbar" id="progressbar" style="width: 0% ; background-color:green;"></div>

Upvotes: 0

Views: 250

Answers (1)

martin-g
martin-g

Reputation: 17513

The best approach for this is to use Wicket Native WebSockets. With IWebSocketRequestHandler you can update Wicket Components and/or send raw text (JSON, HTML) during the long operation. You can push as many times as needed, e.g. to show progress in percentages.

Another, simpler, solution is to use AjaxCallListener#onBeforeSend() callback to make the UI updates with JavaScript before making the Ajax call (the form submit). With this approach you have only one shot, i.e. you can show a loading indicator but you cannot show the current progress.

Upvotes: 2

Related Questions