How to find out which tab is enabled

Asked

Viewed 111 times

0

I am programming in JSF using Primefaces. Here I am with a form that has 4 tab’s and I need to check which tab is enabled to be able to call my javascript and validate the data entered at the moment the person clicks next in the Wizard component of the first faces.

I know the tab without is enabled has this class 

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

And when it’s activated it has this other class as a complement

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

These classes are inside of 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 don’t know why. First-face components of these things.

Then in the validate function 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 in tab2 I’ll call the script to validate the components of tab1 and this gives error. My intention is to use some IF. Like if I’m in 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 does not work there is because the button I am using is that of Wizard itself, it already calls the next tab. And the function I use there to call the script when I click on it is onnext(); 

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

1 answer

0

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

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

And the bean 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).

Browser other questions tagged jsf primefaces

You are not signed in. Login or sign up in order to post.