Disable/ Enable for Next and Back button in PrimeFaces Wizard

Question

I am new to JSF Primefaces

I am using Primeface wizard, where I need to disable/ enable the Next/ Back button in the wizard using java. I have tried with below codes but failed

For Next button disable:

PrimeFaces.current().executeScript(" PF('" + clientId + "').nextNav.css('disabled', 'true');");

PrimeFaces.current().executeScript(" PF('" + clientId + "').nextNav.css('disabled', 'disabled');");

For Next button enable:

PrimeFaces.current().executeScript(" PF('" + clientId + "').nextNav.css('disabled', 'false');");

PrimeFaces.current().executeScript(" PF('" + clientId + "').nextNav.css('disabled', 'none');");

But when I tried with visibility it's working

for Next button hide: PrimeFaces.current().executeScript(" PF('" + clientId + "').nextNav.css('visibility', 'hidden');");

for Next button show: PrimeFaces.current().executeScript(" PF('" + clientId + "').nextNav.css('visibility', 'visible');");

Question: How to enable/ disable the Next/ Back button in the wizard using Java snippet? (Need to disable and not to hide the buttons)

Answer 1

Disabling a button is not a css thing. It is an attribute of the html button element like ` The actual value does not matter, the mere presence of the attribute with this name makes it disabled. Hencee you need to set it via

PF('" + clientId + "').nextNav.attr('disabled', 'disabled')

But this will only technically disable it. so you also need to add the appropriate look and feel:

PF('" + clientId + "').nextNav.toggleClass('ui-state-default')
PF('" + clientId + "').nextNav.toggleClass('ui-state-disabled')

I would personally add all this in a javascript function (function disableNext(...) {...}) and just this function from java by passing the clientId (you could even make it more generic and create a toggleNext )