Добавить поведение в Wicket Tab

Question

У меня на странице есть приложение для калитки. У нас есть разные формы для одной и той же модели, разделенные на отдельные вкладки.Что мне нужно сделать, так это всякий раз, когда нажимается вкладка, чтобы проверить, установлена ​​ли переменная 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 Мне нужно изменить, но оно просто не регистрируется у меня.

Answer 1

Не уверен, что это подходящий способ сделать это, но я решил свою проблему следующим образом:

Те же старые js, только слегка измененные, чтобы вернуть то, что выбрал пользователь:

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

Сбросил весь код поведения, хотя я все еще думаю, что его можно использовать, просто не уверен в данный момент ...

Поэтому, чтобы все это работало по ссылке, я переопределяю updateAjaxAttributes ссылки с помощью precondition:

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

Answer 2

Не так просто перехватить цикл событий JS, особенно при использовании запросов Ajax.

Вот подход, который может выполнить эту работу:

1. In warnOnChange()если dirty, тогда звоните event.preventDefault() и event.stopImmediatePropagation().Это скажет браузеру не переходить по ссылке / совершать Ajax-вызов.Затем покажите диалоговое окно подтверждения, как сейчас.
2. Если пользователь нажмет Cancel, тогда делать больше нечего
3. Если использование подтвердится, установите dirty в false исделать jQuery(event.target).triggerHandler(event.type), т.е. выполнить то же событие (click) для ссылки.На этот раз он не будет грязным и продолжит вызов Ajax.