How to find out which tab is enabled

0

I'm programming in JSF using Primefaces. In this I have a form that has 4 tabs and I need to check which tab is enabled to be able to call my javascript and validate the data entered the moment the person clicks next in the wizard component of primefaces.

I know that the uninsured tab has this class

ui-wizard-step-title ui-state-default ui-corner-all 

And when it is enabled it has this other class as an add-on

ui-wizard-step-title ui-state-default ui-corner-all ui-state-highlight

These classes are inside li and I put a tab1, tab2, tab3, tab4 in each class to be able to use as id, since they are not picking id I do not know why. Prime components have these things.

Then in the function validate below is where I validate the components of each tab, I need to validate the components depending on the tab I'm in, if not, if I'm on tab2 I'll call the script to validate the components of tab1 and this gives error. My intention is to use some IFs. Type if on tab1 do this, tab2 do this.

function validar(){
  
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    color: #ffffff;
    background-color: #0081c2;
}
<ul class="ui-wizard-step-titles ui-helper-reset ui-helper-clearfix">
  <li class="ui-wizard-step-title ui-state-default ui-corner-all  ui-state-highlight tab1">Dados Pessoais</li>
  <li class="ui-wizard-step-title ui-state-default ui-corner-all tab2">Vida Acadêmica</li>
  <li class="ui-wizard-step-title ui-state-default ui-corner-all tab3">Vida Profissional</li>
  <li class="ui-wizard-step-title ui-state-default ui-corner-all tab4">Dados Familiares</li>
</ul>

<button onclick="validar();">Próximo</button>

The next button there does not work because the button I'm using is the one in the wizard itself, it calls the next tab. And the function I use there to call the script when I click on it is the onnext ();

<p:wizard nextLabel="Próximo" onnext="return onnext();"  flowListener="#{alunoBean.onFlowProcess}">
    
asked by anonymous 13.01.2018 / 14:31

1 answer

0

When I needed to do something similar, I got the active tab id on the back end, using the flowListener method, for example:

<p:wizard nextLabel="Próximo" onnext="return onnext();"  flowListener="#{alunoBean.onFlowProcess}">

And in the bean it would look like this:

public String handleFlow(FlowEvent event) {
  String currentStepId = event.getCurrentStep();  
}

For more details, you can access the documentation here on page 551 of the PDF (version 6.0) .

    
25.01.2018 / 16:08