只调用TabView的变化监听

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事件之后TOS如何设置TabView的零的活跃指数，我有名字属性即时通讯我的网页，如果该属性为空白或空我要留在同一个选项卡上，否则我要去下一个选项卡，基本上执行验证..我发布了上面的代码来做到这一点，但它不工作！

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