0

I have a rich:calendar:

<rich:calendar
  id                  = "endDate"
  value               = ...
  datePattern         = "yyyy-MM-dd"
  enableManualInput   = "true"
  disabled        = "#{detailModel.mode == detailModel.viewMode}"
/>

an I would like to enable/disable it with a javascript. I have the follwing code, but it has no effect on the calendar:

<script type="text/javascript">
 //<![CDATA[ 
  function setDafaults(defType, endDate, startTime)
  {
    var definitionType = defType.options[defType.selectedIndex].text;

    if(definitionType == 'DEFAULT')
    {
       endDate.disabled = true;
       startTime.value =  "#{detailModel.afterObject.getDefaultStartTime()}";
    }
    else
    {
       endDate.disabled = false;
       startTime.value =  '';
    }
  }
 //]]>

</script>

The function is called when a selectOneMenu changes:

...
onchange="setDafaults(document.getElementById('detailForm:definitionType'),
                      document.getElementById('detailForm:endDate'),
                      document.getElementById('detailForm:startTime'))
...

What do I miss/where is the error?

Gagravarr
  • 47,320
  • 10
  • 111
  • 156
Francesco
  • 2,350
  • 11
  • 36
  • 59

1 Answers1

2

Your mistake is that you aren't notifying JSF that it's enabled. JSF will re-evaluate the disabled attribute during processing the form submit. However, as you've enabled it using JS instead of using JSF, JSF is never been instructed that it's enabled and thus still thinks that it's disabled and hence will skip it.

You have basically 2 options:

  1. Enable it using JSF instead of using JS.
  2. Let JS set some (hidden) request parameter which you check as well in disabled attribute.

I'd opt for just the JSF way. E.g.

<h:selectOneMenu value="#{bean.definitionType}">
    <f:selectItem itemValue="DEFAULT" /> 
    <f:selectItem itemValue="NOT_DEFAULT" /> 
    <f:selectItem itemValue="SOME" /> 
    <f:ajax render="endDate" />
</h:selectOneMenu>
<rich:calendar id="endDate" ... disabled="#{bean.definitionType == 'DEFAULT'}" />

That's basically all. No need for some nasty JS.

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Thank you BalusC for your answer, but what I need is just an eneble/disable effect without having to reload the page. The situation is the following: I have a selectOneMenu with DEFAULT and USER_DEFINED possible values. When DEFAULT is selected, the calendar component should be disabled while if USER_DEFINE is selected it should be (re)enabled without having to reload the page. I can easily do this with an inputText(passing it with getElementById to the function and setting "disabled" to true/false) for ex., but not with a calendar component. Why not? – Francesco Nov 26 '12 at 14:00
  • It will work when the component was initially enabled by JSF (which basically allows hackers to *still* provide a value by tampering the request if it's disabled by JS!). It won't work when component was initially disabled by JSF. The `` doesn't do a page reload at all. It does only a partial update. – BalusC Nov 26 '12 at 14:02
  • Works like a charm (as usual with your suggestions... :) ) – Francesco Nov 26 '12 at 14:10