Commandbutton does not invoke action when disabled property is changed to false by JavaScript

Question

I have web application build in JSF + PrimeFaces. In the web form I set disable property of command button of primefaces to true. When form is loaded after performing custom client side validations on form input fields, I set the disable property of command button to false or true according to the user inputs on the form. Note: Here if all the validation get through the button gets enable, but at the same time if user edits some input and validation fails then again button gets disabled.

<p:commandButton id="saveButton" value="Save" actionListener="#{some method of bean}" 
update="component to update" disabled="true" />

But button doesn't work properly, I mean form is not getting submitted.

But if if disabled property of button is not set to true in the beginning, even during the custom validation it get disabled/enabled by javascript(as explained above) it works fine.

I can't understand how this form submit-ion is dependent on initial value of disabled property of the command button even though I am setting it through javascript.

Here is the HTML code as shown in browser source:

In case of property disabled set to true:

<button id="saveButton" 
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 
type="submit" 
onclick="PrimeFaces.ab({formId:'createAccessPrivilegeForm',source:'saveButton',process:'@all',update:'centerPanel leftNavigationForm:leftNavigationTabView'});return false;" 
name="saveButton" 
role="button" 
aria-disabled="false">

In case disabled property set to false:

<button id="saveButton" 
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-disabled" 
disabled="disabled" 
type="submit" 
onclick="PrimeFaces.ab({formId:'createRoleForm',source:'saveButton',process:'@all',update:'centerPanel leftNavigationForm:leftNavigationTabView'});return false;" 
name="saveButton" 
role="button" 
aria-disabled="true">

Help me out to handle this scenario. I want command button initially to be disabled only, it get disabled only after validations get through and I want it to get able for form submit-ion.

BalusC · Accepted Answer · 2020-02-25T23:25:53.660

7

You need to change the disabled attribute in the JSF side, not in the JavaScript side. The disabled attribute is namely re-evaluated based on the JSF component tree state during processing the form submit in JSF. Manually editing the HTML DOM tree in the client side does not automagically change the JSF component tree in the server side in any way.

You need to replace your JavaScript approach to enable/disable the button by a sane JSF approach. Here's a basic example which does that based on a checkbox:

<h:selectBooleanCheckbox value="#{bean.checked}">
    <p:ajax update="button" />
</h:selectBooleanCheckbox>
<p:commandButton id="button" ... disabled="#{bean.checked}" />

edited Feb 25 '20 at 23:25

answered Jun 10 '12 at 13:18

BalusC

1,082,665
372
3,610
3,555

Still, how do you change the checkbox from JS now? Same issue. I need to enable commandButton from an applet and so I'm doing it through a JS method. – eskalera May 12 '14 at 15:58
1

@esk: Just let JS method in turn invoke a JSF method. – BalusC May 12 '14 at 16:09
I'd figured but couln't get it to work. For anyone else having the same problem to do what @BalusC suggested: http://stackoverflow.com/questions/9619906/calling-managed-bean-method-from-javascript – eskalera May 12 '14 at 16:52
I had to add id="button" to the – ponder275 Feb 25 '20 at 21:40
I overlooked that part. Fixed now. – BalusC Feb 25 '20 at 23:26

Commandbutton does not invoke action when disabled property is changed to false by JavaScript

1 Answers1