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.
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}" />