将行为添加到 Wicket 选项卡答案

【问题标题】：Add behavior to Wicket Tab将行为添加到 Wicket 选项卡
【发布时间】：2018-10-18 18:42:16
【问题描述】：

我在一个页面上有一个检票口应用程序，我们将同一模型的各种表单分成单独的选项卡。我需要做的是每当单击选项卡时检查 js 变量 tabDirty 是否设置为 true 或 false。如果是true，我会启动confirm 提示，如果没问题，然后重置该表单并移动到单击的选项卡。如果取消保留在该选项卡上并保持当前更改。

我有这个 js 用于警告没什么特别的

function warnOnChange(){
    if(tabDirty){
        decision = confirm('Leave?');
        if(decision){
            resetTab(); //sets tabDirty back to false
        } else {
            return false;
        }
    }
}

我有一个超级简单的检票口行为

public class WarnChangePromptOnClickBehavior extends Behavior {

    @Override
    public void bind(Component component) {
        component.add(JQBehaviors.mouseClick(EditMerchant.WARN_ON_CHANGE));
    }
}

并且该行为被添加到 AjaxFallBackLink

AjaxTabbedPanel<CustomAjaxTab> tabbedPanel = new AjaxTabbedPanel<CustomAjaxTab>("tabbedPanel", tabList, new Model<>(0)) {

    private static final long serialVersionUID = 1L;

    @Override
    protected WebMarkupContainer newLink(final String linkId, final int index) {
        AjaxFallbackLink<Void> link = new AjaxFallbackLink<Void>(linkId) {

            private static final long serialVersionUID = 1L;

            @Override
            public void onClick(final AjaxRequestTarget target) {
                TabbedPanel<CustomAjaxTab> selectedTab = setSelectedTab(index);
                CustomAjaxTab tab = tabList.get(index);
                if (target != null) {

                    tab.getPanel(linkId);

                    target.add(selectedTab);
                }
                onAjaxUpdate(target);
            }
        };

        link.add(new WarnChangePromptOnClickBehavior());
        return link;
    }

};

当前的行为是，如果没有更改选项卡切换没有提示。如果有变化，我会得到提示。如果没问题tabDirty 被重置并转到下一页清除更改。问题是，如果我单击取消，我仍会导航到下一个选项卡并丢失更改。我知道onClick 中有一些东西我需要更改，但它只是没有向我注册。

【问题讨论】：

标签： java jakarta-ee wicket

【解决方案1】：

拦截JS事件循环并不是那么容易，尤其是在使用Ajax请求的时候。

这是一种可以完成这项工作的方法：

在warnOnChange() 中，如果dirty 然后调用event.preventDefault() 和event.stopImmediatePropagation()。这将告诉浏览器不要跟随链接/进行 Ajax 调用。然后像现在一样显示确认对话框。
如果用户按下Cancel，那么就没有什么可做的了
如果用户确认，则将dirty 设置为false 并执行jQuery(event.target).triggerHandler(event.type)，即在链接上执行相同的事件（click）。这次它不会变脏，它会继续 Ajax 调用。

【讨论】：

我试图在warnOnChange js 函数中调用该事件，但不断收到它不存在的控制台错误。你有没有机会知道一种方法来传递这个？

【解决方案2】：

不确定这是否是适当的方法，但我这样解决了我的问题：

相同的旧 js 只是稍作修改以返回用户选择的内容：

function warnOnChange(){
    decision = true;
    if(tabDirty){
        decision = confirm('Leave?');
        if(decision){
            resetTab();
        }
    }
    return decision;
}

转储了整个行为代码，尽管我仍然认为它可以使用，只是目前不确定......

所以为了使这一切都在链接上起作用，我用precondition覆盖链接的updateAjaxAttributes：

AjaxTabbedPanel<CustomAjaxTab> tabbedPanel = new AjaxTabbedPanel<CustomAjaxTab>("tabbedPanel", tabList, new Model<>(0)) {

private static final long serialVersionUID = 1L;

@Override
protected WebMarkupContainer newLink(final String linkId, final int index) {
    AjaxFallbackLink<Void> link = new AjaxFallbackLink<Void>(linkId) {

        private static final long serialVersionUID = 1L;

        @Override
        protected void updateAjaxAttributes( AjaxRequestAttributes attributes ) {
            super.updateAjaxAttributes( attributes );

            AjaxCallListener ajaxCallListener = new AjaxCallListener();
            //very important to use the "return" if not then nothing happens with the response
            ajaxCallListener.onPrecondition("return " + WARN_ON_CHANGE);

            attributes.getAjaxCallListeners().add( ajaxCallListener );
        }

        @Override
        public void onClick(final AjaxRequestTarget target) {
            TabbedPanel<CustomAjaxTab> selectedTab = setSelectedTab(index);
            CustomAjaxTab tab = tabList.get(index);
            if (target != null) {

                tab.getPanel(linkId);

                target.add(selectedTab);
            }
            onAjaxUpdate(target);
        }
    };

    link.add(new WarnChangePromptOnClickBehavior());
    return link;
}
};

【讨论】：