How to disable/re-enable JSF component using javascript?

Question

I'm developing a Java EE application (JSF2 + richfaces 3.3.3 + facelets).

I want to disable my h:selectOneMenu when loading my page, and when it finishes loading (using the function onload()), I want to re-enable my component. I have something like this:

<ui:define name="infosHead">
     <script type="text/javascript">
        window.onload = function() {
          document.getElementById("forme1_myform:valueCh").disabled = false;
          alert("here");
        }
     </script>
</ui:define>
<ui:define name="infosBody">
   <h:form id="forme1_myform" target="_blank">
    <h:selectOneMenu id="valueCh" value="#{mybean.value}" disabled="true" >
      <f:selectItems value="#{mybean.values}" />
         <a4j:support event="onchange"
              ajaxSingle="true"
              limitToList="true"                      
              reRender="id1,id2,...."
              ignoreDupResponses="true"
              action="#{mybean.actionme}"
              oncomplete="getId();"/>
         </h:selectOneMenu>
   </h:form>
</ui:define>

this is working fine. But my bean is getting nothing (mybean.value == null).

It's like he thinks that the component is still disabled.

how can I make this works ?

did it work without the function? can you post the bean code? — Dejell, Sep 27 '10 at 11:44
Enabling and disabling the component is working. But getting the value of the element that i select from my list donc work. When i set the attribute disabled of my h:selectOneMenu to false, then i get the value of the element selected. — mohamida, Sep 27 '10 at 13:05

Giorgos Dimtsas · Answer 1 · 2010-09-27T13:29:13.973

The problem is that you are enabling your component only on the client side. On the server side it will always be disabled="true". To make this work you must :

a. Assign the disabled property of your component to a managed bean property that will be initially 'true'

disabled="#{myController.valueChDisableStatus}"

b. Inside your h:form insert window.onload = callScript

c. Finally, in the myController#someAction method set the valueChDisableStatus property to false

I cant check the solution right now, but I believe it will work fine.

score 0 · Answer 2 · answered Mar 27 '15 at 15:29

Neither of these solutions worked for me.

While setting the element's disabled attribute from a managed bean value worked fine, and changing it's value via javascript also worked fine, once the form is submitted the "someaction" method is still not reached in order to "set the valueChDisableStatus property to false". In addition I found that even though my managed bean had an isDisabled() and a setDisabled(boolean value), the setDisabled() method was never called after submitting the form (of course), though the isDisabled() was. So I was unable to find a way using these solutions to change the managed beans "disabledElement" value to false.

I did find a solution that did work for me though at this link: http://blog.michaelscepaniak.com/jsf-you-cant-submit-a-disabled-form-element

Basically it suggests that by default all the elements should be "enabled" from the JSF perspective, and that all enabling and disabling should be done via Javascript. It does point out the the client and server states are out of sync temporarily in this solution... but it works very well for my scenario regardless of the temporary mismatch.

You and the blog author doesn't seem to realize that JSF does this as part of safeguard against tampered requests from hackers. See also a.o. http://stackoverflow.com/q/11409823, http://stackoverflow.com/q/9000669 and #5 of http://stackoverflow.com/q/2118656 Perhaps it's less harmful in your particular case, but this is a serious security hole when the condition depends on e.g. the logged-in user's role/group. — BalusC, Mar 27 '15 at 15:38

score 0 · Accepted Answer · answered Sep 27 '10 at 13:16

I found this solution.

<ui:define name="infosHead">
     <script type="text/javascript">
        window.onload = function() {
          updateName(false); // sets 'disabled' from true to false
        }
     </script>
</ui:define>
<ui:define name="infosBody">
   <h:form id="forme1_myform" target="_blank">
    <h:selectOneMenu id="valueCh" value="#{mybean.value}" disabled="#{mybean.render}" >
      <f:selectItems value="#{mybean.values}" />
         <a4j:support event="onchange"
              ajaxSingle="true"
              limitToList="true"                      
              reRender="id1,id2,...."
              ignoreDupResponses="true"
              action="#{mybean.actionme}"
              oncomplete="getId();"/>
         </h:selectOneMenu>
   </h:form>
    <a4j:form>
        <!-- this is where it's going to reRender my component -->
        <a4j:jsFunction name="updateName" reRender="valueCh">
            <a4j:actionparam name="param1" assignTo="#{mybean.render}"  />
        </a4j:jsFunction>
    </a4j:form>
</ui:define>

and this is the content of mybean:

public class MyBean implements Serializable {

    private List<SelectItem> values;
    private String value;
    private Boolean render = true; // the page loads with element disabled

    public void actionme(){...}
    //getters & setters
}

How to disable/re-enable JSF component using javascript?

3 Answers3