提交表单时呈现检票口组件

Question

我正在尝试使用IndicatingAjaxButton的onSubmit提交表单时更新和呈现组件。 但是一旦onSubmit完成，所有组件都将被渲染。 有什么方法可以在我仍在提交表单时呈现它们，比如说在提交表单时显示更新进度条。 我想在每个其余调用执行时显示进度。 这大概是我在做什么：

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>

Answer 1

最好的方法是使用Wicket本机WebSocket。 使用IWebSocketRequestHandler您可以在长时间操作期间更新Wicket组件和/或发送原始文本（JSON，HTML）。 您可以根据需要进行多次推送，例如以百分比显示进度。

另一个更简单的解决方案是在进行Ajax调用（表单提交）之前，使用AjaxCallListener＃onBeforeSend（）回调使用JavaScript进行UI更新。 使用这种方法，您只有一个镜头，即可以显示加载指示器，但不能显示当前进度。