Question

    <p:tabView widgetVar="addSystemWizard" style="width:980px;height:400px;" dynamic="true"  activeIndex="#{testBean.messagesTab.activeIndex}" >  

          <p:ajax event="tabChange" listener="#{testBean.onTabChange}" update=":tabview:sysMsg"/>  

            <p:tab id="generalInfo" title="1. General Information">  `enter code here`



private TabView messagesTab;

    public TabView getMessagesTab () {
        if(messagesTab==null){
            messagesTab= new TabView();
        }
        return messagesTab;
    }

    public void setMessagesTab(TabView messagesTab ) {
        this.messagesTab = messagesTab;
    }


    public void onTabChange(TabChangeEvent event){
        if(test.getName()==null || test.getName().equals("")){

            FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, event.getTab().getId() ,"please enter all required fields");  

            FacesContext.getCurrentInstance().addMessage(null, msg);  
            int idx=0;
            messagesTab= (TabView) event.getComponent();
            messagesTab.setActiveIndex(idx);
        }

    }

我在tabview上调用tabchange事件，我的名字属性是我的页面，如果该属性为空或null我必须保持在同一个选项卡上，否则我要去下一个选项卡，基本上执行验证..我有发布上面的代码来做到这一点，但它不起作用！

Answer 1

我发现这个blog post描述了如何使用p:remoteCommand和javascript来完成此任务。

尝试各种方法解决上述问题（使用p：ajax event =“tabChange”等），我想出了一个干净且运行良好的解决方案。下面的代码将PrimeFaces TabView打开为“向导模式”。这意味着，用户在尝试切换选项卡时会保持在同一选项卡上，并且在当前选项卡中存在验证错误。主要思想是使用p：remoteCommand进行关于制表符切换的延迟决定。如果不存在验证错误，则通过TabView小部件的方法选择进行切换。

XHTML：

<p:tabView ... widgetVar="tv_widget" styleClass="tv_selector">
    ...
</p:tabView>

<p:remoteCommand name="tv_remoteCommand" process="@(.tv_selector)" update="@(.tv_selector)" global="false"
        oncomplete="handleTabChangeTV(xhr, status, args, tv_widget)"/>

<h:panelGroup id="tv_script" styleClass="tv_selector">
    <script type="text/javascript">
          $(function(){
              bindOnClickTV(tv_remoteCommand, tv_widget);
          });
    </script>
</h:panelGroup>

使用Javascript：

function bindOnClickTV(rc, widget) {
    // unbind PrimeFaces click handler and bind our own
    widget.jq.find('.ui-tabs-nav > li').unbind('click.tabview').
        off('click.custom-tabview').on('click.custom-tabview', function (e) {
            var element = $(this);

            if ($(e.target).is(':not(.ui-icon-close)')) {
                var index = element.index();

                if (!element.hasClass('ui-state-disabled') && index != widget.cfg.selected) {
                    // buffer clicked tab
                    widget.clickedTab = element.index();

                    // call remote command
                    rc();
                }
            }

            e.preventDefault();
        });
}

function handleTabChangeTV(xhr, status, args, widget) {
    if (!args.validationFailed) {
        widget.select(widget.clickedTab);
    }
}

如何在调用tabview更改侦听器后将tabview的活动索引设置为零

1 个答案: