Hi,
I was wondering if anyone has any insight to my question below.
I am trying to use jsValueChangeListener to dynamically enable another
selectOneMenu on the same form.
What I'm trying to do : Per the code below, if id=myActionType = 3
then enable the field where id=newMyStatusLabel
The JavaScript that I used below seems to work fine. If one of my
options in my select menu are selected, it runs a JavaScript function
to enable another select menu and its label and also set disabled =
false;
However,
When I save (submit the form), the value for the 2nd field
(newMyStatus) is null, even if I pick option where value = 3 where it
gets enabled and I pick a value.
As a sanity test, I enabled "newMyStatus" by default when the JSP
loads and submitted the form. The data saved properly.
So, it seems that it doesn't like it if the field started off disabled
and submits as enabled.
Is this a bug in this component or a behavior of JSF/MyFaces that I am
not familiar with?
I need the second field's disabled property to be driven by the
selecton of the first field.
Has anyone been doing this and if so, what do you recommend as a best
practice in MyFaces?
Has anyone used jsValueChangeListener successfully?
Many thanks! Code sample below.
<h:outputText id="myActionTypeLabel" value="#{labels.myActionType}"
styleClass="labeldisabled#{myActionsBacking.myActionTypeDisabled}"/>
<h:selectOneMenu id="myActionType"
value="#{sessionBean.myActions.myActionType}"
onchange="javascript:markChanged();"
disabled="#{myActionsBacking.myActionTypeDisabled}"
styleClass="fielddisabled#{myActionsBacking.myActionTypeDisabled}" >
<f:selectItems value="#{lookUpBean.myActionTypeDefaultItems}" />
<t:jsValueChangeListener for="newMyStatus"
expressionValue="($srcElem.options[$srcElem.selectedIndex].value=='3')?disabledFieldRequested($destElem,false):disabledFieldRequested($destElem,true);"/>
</h:selectOneMenu>
<h:outputText id="newMyStatusLabel" value="#{labels.newMyStatus}
(newMyStatus-dynamicTODO)"
styleClass="labeldisabled#{myActionsBacking.newMyStatusDisabled}" />
<h:selectOneMenu id="newMyStatus"
value="#{sessionBean.myActions.newMyStatus}"
onchange="javascript:markChanged();"
disabled="#{myActionsBacking.newMyStatusDisabled}"
styleClass="fielddisabled#{myActionsBacking.newMyStatusDisabled}" >
<f:selectItems value="#{lookUpBean.myActionstatusTypes}" />
</h:selectOneMenu>
This is the JavaScript function that it calls. And that works. But,
the data for newMyStatus doesn't save upon submission.
<script language="JavaScript">
function disabledFieldRequested(theObject, disabled) {
var theLabel;
theLabel = document.getElementById(theObject.name + "Label");
if(disabled) {
theObject.className='fielddisabledtrue';
theObject.disabled=true;
theObject.value='';
theLabel.className='labeldisabledtrue';
} else {
theObject.className='fielddisabledfalse';
theObject.disabled=false;
theLabel.className='labeldisabledfalse';
}
}
</script>
Many thanks,
Kevin Hutson
