0 
    <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 事件，我的页面上有 name 属性，如果该属性为空白或 null 我必须留在同一个选项卡上，否则我必须转到下一个选项卡，基本上执行验证.. 我已经发布了上面代码来做到这一点，但它不工作！

4

1 回答 1

0

我发现这篇博客文章描述了如何使用 ap:remoteCommand和 javascript 来实现这一点。

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

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);
    }
}
于 2013-02-12T15:01:31.393 回答