How to toggle disable in primefaces components selectOneMenu and calendar?

Question

How to toggle disable in primefaces components selectOneMenu and calendar ? Question is when user inputs value in calendar then selectOneMenu should be disabled. But when he removes value from calendar selectOneMenu should be enabled again.

I have tried with this solution but since those components dont have action attribute I couldnt figure it out. I dont have validation button I wolud like to use some event.

"When user inputs value" -> Do you have a validation button then or do you want to use a JS event like `blur` to detect when it should disable or enable your `selectOneMenu`? — Mathieu Castets, Apr 24 '15 at 08:32

score 0 · Answer 1 · answered Apr 24 '15 at 09:21

0

You could use the ajax event to find out if the value has been changed.

<p:calendar ... >
  <p:ajax event="change" listener="#{bean.dateChange}" update="selectOneMenuId"/>
</p:calendar>

Then use something like this in your bean:

private boolean disableSelectOneMenu = true;
public void dateChange(DateSelectEvent event) {
    Date date = event.getDate();
    if (date == null) { 
        disableSelectOneMenu = true;
    } else {
        disableSelectOneMenu = false;
    }
}

and use the disableSelectOneMenu property in you disable tag of you selectOneMenu.

answered Apr 24 '15 at 09:21

GregD

1,884
2
28
55

Thanks for ansewer, sorry for my ignorance, what should DateSelectEvent represent ? SelectEvent ? – helloWorld Apr 24 '15 at 12:02
1

@helloWorld, in fact, `DateSelectEvent` is not present anymore in the API. You need to use the `SelectEvent` and grab de object as a `Date`. However, you haven't specified the PF version you're working with. – Aritz Apr 24 '15 at 12:16
@GregD, I figurout your solution, but now It keeps refreshing whole page. – helloWorld Apr 29 '15 at 14:39
@helloWorld even if you specify the ajax and the correct element to update? – GregD Apr 30 '15 at 08:36

score 0 · Answer 2 · answered Apr 24 '15 at 09:23

Both <p:calendar/> and <p:selectOneMenu> has disabled properties. Both component has ajax events, <p:calendar/> has dateSelect and <p:selectOneMenu/> has change. So, you need to make a bean method which will return true or false according to which selection has been made and bind it to disabled properties and update these components when selection has been made.

For example JSF part:

<p:calendar id="calendar" value="#{bean.calendar}" disabled="#{bean.calendarDisabled}">
        <p:ajax event="change" update="selector calendar" process="@this"/>
</p:calendar>


<p:selectOneMenu id="selector" disabled="#{bean.calendarDisabled != true}">
    <p:ajax event="change" update="selector calendar" process="@this"/>
</p:selectOneMenu>

And bean part:

public boolean calendarDisabled(){
     if(calendar != null){
           return false;
     }else{
         //...do whatever you needs basing on your requirements
     }
}

Also please take a look at Primefaces manual

Thanks for answer, I am looking at manual (now) and trying to figure it out. But selectOneMenu is always disabled. I still cannot togle it. — helloWorld, Apr 24 '15 at 10:50

How to toggle disable in primefaces components selectOneMenu and calendar?

2 Answers2