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

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
– Dejell, Commented Sep 27, 2010 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
– mohamida, Commented Sep 27, 2010 at 13:05

Giorgos Dimtsas · Accepted Answer · 2010-09-27 13:29:13Z

4

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.

edited Sep 27, 2010 at 13:29

answered Sep 27, 2010 at 13:17

Giorgos Dimtsas

12.8k3 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mohamida · Accepted Answer · 2010-09-27 13:16:38Z

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
}

Joseph Cozad · Accepted Answer · 2015-03-27 15:29:26Z

0

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.

answered Mar 27, 2015 at 15:29

Joseph Cozad

2102 silver badges4 bronze badges

1 Comment

BalusC Over a year ago

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. stackoverflow.com/q/11409823, stackoverflow.com/q/9000669 and #5 of 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.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Linked

Related