1

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)

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Prakash
  • 630
  • 3
  • 10
  • 20
  • did you already see [this](https://stackoverflow.com/questions/14322077/hide-back-button-at-last-tab-in-primefaces-wizard) question – fuggerjaki61 Mar 09 '20 at 15:20
  • Does this answer your question? [Hide back button at last tab in primefaces wizard](https://stackoverflow.com/questions/14322077/hide-back-button-at-last-tab-in-primefaces-wizard) – Melloware Mar 09 '20 at 15:27
  • 1
    disabled is not a css thing, it is a property. If you try on pure html to set a `disabled: disabled` in a css selector that is applied it won't do anything.... – Kukeltje Mar 09 '20 at 15:29
  • @fuggerjaki61: Please read the last bold lines... – Kukeltje Mar 09 '20 at 15:30
  • @Melloware: Please read the last bold lines – Kukeltje Mar 09 '20 at 15:30

1 Answers1

4

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 )

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
  • Isn't this possible with the widgetvar of the button? would be easier – BugsForBreakfast Mar 09 '20 at 18:42
  • @BugsForBreakfast: if this button would have a widget, it would. But it doesn't since it is a button that is part of the wizard widget. You can ofcourse add a function to the wizard by extending it's js and put the disableNext/enableNext/disablePrev/enablePrev in there. It would be very generic then. This could even be posted as a pull request for PrimeFaces. Feel free to try (it is a good and not too complex exercise) – Kukeltje Mar 09 '20 at 19:58
  • Note that `PF(Xxx)` takes the widget var name, and not the `clientId`, see https://github.com/primefaces/primefaces/blob/32bb00299d00e50b2cba430638468a4145f4edb0/src/main/resources/META-INF/resources/primefaces/core/core.js#L751 . If you want to work with the `clientId`, use `PrimeFaces.getWidgetById(clientId)`. – Jasper de Vries Mar 10 '20 at 12:30
  • @JasperdeVries: Agreed, but I copied the code from the question where at least the css works, so I 'assume' OP passes the widgetvar instead of the full client id (but assumption... mother...) – Kukeltje Mar 10 '20 at 14:03
  • Thank you all for providing valuable information. @Kukeltje Thanks for the solution, I tried with the attr, as mention, It is working. for disable: `PF('" + clientId + "').nextNav.attr('disabled', 'disabled')` for enable: `PF('" + clientId + "').nextNav.removeAttr('disabled')` Similarly, It can also apply for the back button in the wizard. – Prakash Mar 11 '20 at 05:31
  • I tried this `PrimeFaces.current().executeScript("PF(PrimeFaces.getWidgetById('" + clientId + "')).nextNav.attr('disabled','disabled');");` and this `PrimeFaces.current().executeScript("PF('" + clientId + "').nextNav.attr('disabled','disabled');");` in my `@PostConstruct` method and both result in `jQuery.Deferred exception: Cannot read properties of undefined (reading 'nextNav') TypeError: Cannot read properties of undefined (reading 'nextNav')`. So how and where to correctly disable the Next button in p:wizard? I am using Primefaces 10! – raho Apr 26 '22 at 14:45