jsf - Accessing disabled attribute for PrimeFaces Calendar with JavaScript - Stack Overflow

admin管理员组

文章数量:1322838

I have a form where some fields needs to be disabled until a check box is clicked. For JSF-elements are all working fine. The problem is with the primeface elements.

For a JSF-element like a dropdown list I do it like this:

<h:selectOneMenu value="countryValue" disabled="true" id="countryId">
    <f:selectItems value="countries" />
</h:selectOneMenu>

And for Primefaces-elements, a calender like this:

<p:calendar disabled="true" id="datePicker" value="dateValue" 
         pattern="yyyy-MM-dd" startWeekday="1"    
            timeZone="GMT">  
</p:calendar>

The JavaScript I've used to enable these elements on an event is simple as:

function enableLocationUpdateFilter()
{
    document.getElementById('form:datePicker').disabled = false;
}

The jQuery calling the onchange-event:

 jQuery('.countryCheckBoxId').change(function()
 {
    enableCountryFilter();
 });

By investigating the Primefaces element in firebug I can see that the id "datePicker" only acts as a "span" id and the actual id for the HTML inputfield is "datePicker_input". So, instead by using "datePicker" as an ID in the javascript I tried using "datePicker_input". This enables the field, but the jQuery event bringing up the actual calender does not work.

It also seems that the calender is called through a jquery-event. In this jquery-event you could see that the default disabled is set to true. And I think that is the problem, I can't set that part to false.

I have a form where some fields needs to be disabled until a check box is clicked. For JSF-elements are all working fine. The problem is with the primeface elements.

For a JSF-element like a dropdown list I do it like this:

<h:selectOneMenu value="countryValue" disabled="true" id="countryId">
    <f:selectItems value="countries" />
</h:selectOneMenu>

And for Primefaces-elements, a calender like this:

<p:calendar disabled="true" id="datePicker" value="dateValue" 
         pattern="yyyy-MM-dd" startWeekday="1"    
            timeZone="GMT">  
</p:calendar>

The JavaScript I've used to enable these elements on an event is simple as:

function enableLocationUpdateFilter()
{
    document.getElementById('form:datePicker').disabled = false;
}

The jQuery calling the onchange-event:

 jQuery('.countryCheckBoxId').change(function()
 {
    enableCountryFilter();
 });

By investigating the Primefaces element in firebug I can see that the id "datePicker" only acts as a "span" id and the actual id for the HTML inputfield is "datePicker_input". So, instead by using "datePicker" as an ID in the javascript I tried using "datePicker_input". This enables the field, but the jQuery event bringing up the actual calender does not work.

It also seems that the calender is called through a jquery-event. In this jquery-event you could see that the default disabled is set to true. And I think that is the problem, I can't set that part to false.

• javascript
• jsf
• primefaces

Share Improve this question Follow edited Oct 17, 2017 at 2:53 Cœur 38.8k2626 gold badges205205 silver badges277277 bronze badges asked Sep 27, 2010 at 7:09 user373455user373455 13.3k55 gold badges3434 silver badges4646 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The best I can think of is to make Ajax call on the server, and rerender the calendar. Could you tell us what is triggering this jQuery-onchange event?

And I assume you are using JSF 2.0, right?

UPDATE:

So you want to enable p:calendar when checkBox is clicked. Something similar to this should work:

<h:selectBooleanCheckbox id="countryCheckBoxId" value="#{bean.countryBoolean}">
   <f:ajax render="datePicker"/>
</h:selectBooleanCheckbox>

<p:calendar disabled="#{!bean.countryBoolean}" id="datePicker" value="dateValue" 
        pattern="yyyy-MM-dd" startWeekday="1" timeZone="GMT">     
</p:calendar>

Since the calendar is called when you press the textfield I tried the following:

-Set the calender disabled variable to false.
-Set the input text field disabled attribute for the calendar to true.
-On change, set the text field disabled attribute to false.

In this way, the disabled attribute for the Calendar is always set to false (meaning it is never disabled) and I only set the text field to disabled in javaScript code on rendering. In this way you can't trigger the calendar and the disabling only goes for the text field and on change I enabling the text field again.

本文标签： jsfAccessing disabled attribute for PrimeFaces Calendar with JavaScriptStack Overflow