Change Primefaces p:steps activeIndex with Javascript?

Question

I'm considering using the p:steps component

<p:steps activeIndex="1" styleClass="custom" readonly="false">
    <p:menuitem value="Personal" url="#"/>
    <p:menuitem value="Seat Selection" url="#"/>
    <p:menuitem value="Payment" url="#"/>
    <p:menuitem value="Confirmation" url="#"/>
</p:steps>

how can I change activeIndex with Javascript?

Answer 1

Normally you should be able to do so using the JavaScript API and using the widgetVar attribute. However, when I use widgetVar="stepsVar", the widget is unknown (JavaScript console):

> PF('stepsVar')
Widget for var 'stepsVar' not available!

So, you need some kind of workaround I'm afraid. For example, keep the index in a managed bean and update it using a remoteCommand.

XHTML

<p:remoteCommand name="setStepIndex"
                 action="#{yourBean.setStepIndexByRemoteCommand}"
                 update="steps"/>
<p:steps id="steps"
         activeIndex="#{yourBean.stepIndex}">
    <p:menuitem value="Personal" />
    <p:menuitem value="Seat Selection" />
    <p:menuitem value="Payment" />
    <p:menuitem value="Confirmation" />
</p:steps>
<button onclick="setStepIndex([{name:'index', value:2}]);return false">Test</button>

Bean

private int stepIndex;

public int getStepIndex()
{
    return stepIndex;
}

public void setStepIndexByRemoteCommand()
{
    FacesContext context = FacesContext.getCurrentInstance();
    Map<String, String> map = context.getExternalContext().getRequestParameterMap();
    String indexString = map.get("index");
    stepIndex = Integer.valueOf(indexString);
}

See also

• Pass parameter to p:remoteCommand from JavaScript