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

    }

I am calling a tabchange event on tabview, I have name attribute im my page,if that attribute is blank or null I have to stay on same tab, otherwise I ahve to go next tab, basically performing validation.. I have posted the above code to do that, but its not working!

Answer 1

I found this blog post that describes how to use a p:remoteCommand and javascript to accomplish this.

Trying various approaches to the question above (with p:ajax event=”tabChange” and so on), I came up with a clean and well working solution. The code below turns on the PrimeFaces TabView into a “wizard mode”. That means, the user stays on the same tab when he / she is trying to switch tabs and has validation errors within the current tab. The main idea is to use p:remoteCommand for a deferred decision about tab switching. If no validation errors were present, the switching occurs by the TabView widget’s method 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);
    }
}