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

Question

Hi everybody. I'm developing a JEE 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 funtion 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 ?

Answer 1

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
}

Answer 2

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.