jsf + jquery: disable and enable h:commandButton by JQuery

Question

I have a jsf form with h:commandButton as submit button:

<h:form>
     <h:commandButton id="import_opener" binding="#{submit}" disabled="true" action="#{bean.save}" value="submit"/>
</h:form>

and I try to set "disabled" attribute to true (to enable the button) by JQuery:

$("[id='#{submit.clientId}']").prop("disabled", false);

and everything works fine. But when I submit commandButton the action #{bean.save} doesn't fire, just reloads the form page. If I do not operate on the h:commandButton by JQuery the action is fire.

Please, help me to run #{bean.save} after JQuery has changed the disable attribute of h:commandButton.

noone noone · Accepted Answer · 2013-09-01T12:21:29

This is because JSF has some built-in security features. The incoming request is checked if it is "possible" or not. The incoming request tells JSF that a button, which actually was disabled has been pressed. So the request will be handled as invalid and kind of refused. This is good because the browser can be manipulated in many ways.

The solution is to not set disabled="true", but let it enabled on the JSF side and disable it via jQuery, instead of the other way around.

jsf + jquery: disable and enable h:commandButton by JQuery

1 Answers