How tos set active index of tabview to zero only after calling a tabview change listener - jsf-2

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