How to make a component readonly on a specific button click in JSF?

Question

<h:panelGroup rendered="#{spkrCatEvt.createPanel}">
    <label>Event Name</label>
    <h:selectOneMenu style="width: 250px" class="form-control" value="#{spkrCatEvt.selected.evtId}" id="speaker_eve">
        <f:selectItems value="#{spkrCatEvt.eventlist}" var="sl" itemLabel="#{sl.value}" itemValue="#{sl.id}"/>
    </h:selectOneMenu>
    <label>Speaker Name</label>
    <h:selectOneMenu style="width: 250px" class="form-control" value="#{spkrCatEvt.selected.spkrId}" id="speaker">
        <f:selectItems value="#{spkrCatEvt.speakerlist}" var="sl" itemLabel="#{sl.value}" itemValue="#{sl.id}"/>
    </h:selectOneMenu>
</h:panelGroup>

Above is the part of code written in my JSF form, which displays when I click the 'ADD' button. In the same form I have also written code for table to display data like below :

<table id="example" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Speaker Name</th>
            <th>Event Name</th>
        </tr>
    </thead>

    <tbody>
        <ui:repeat id="dataTbl" value="#{spkrCatEvt.items}" var="item">
            <tr>
                <td><h:outputText value="#{item.spkrName}"/></td>
                <td><h:outputText value="#{item.evtName}"/></td>

                <td>
                    <h:commandLink action="#{spkrCatEvt.prepareView()}" id="view" title="View"><i class="fa fa-th-large"/></h:commandLink>
                    <h:outputText value="  "/>
                    <h:commandLink  action="#{spkrCatEvt.prepareEdit()}" id="edit" title="Edit"><i class="fa fa-edit"></i></h:commandLink>
                    <h:outputText value=" "/>
                    <h:commandLink  action="#{spkrCatEvt.activeEdit()}" id="activate" title="Activate" rendered="#{!item.active}"><i class="fa fa-check"></i></h:commandLink>
                    <h:commandLink  action="#{spkrCatEvt.activeEdit()}" id="deactivate" title="DeActivate" rendered="#{item.active}"><i class="fa fa-times"></i></h:commandLink>
                </td>
            </tr>
        </ui:repeat>
    </tbody>
</table>

I want to make <h:selectOneNenu> readonly which displays 'event name', when I click the update button from the table.

I tried the same by giving rendered attribute to the element but it didn't work.

Being a beginner in JSF, I am not getting the solution.

I would be obliged for help.

What is the problem, please? I never understand, when someone simply says, "*It won't work*". The value associated with readonly input components is not evaluated during the JSF life cycle. Are you asking about it? If yes, see, [Make a `p:calendar` readonly](http://stackoverflow.com/a/17639554/1391249). There will definitely be other posts but this is biased based, since it belongs to me. — Tiny, Apr 04 '15 at 08:28
I have a button named 'add new' in my form. When I click on 'add new' it should display an input field and a dropdown box to select value. Moreover, I have three action buttons in my datatable. when I click on update action, it displays the same fields with populated values, but here I want to disable the dropdown. i.e. selectonemenu — Vebbie, Apr 04 '15 at 08:38
I'd say use disabled instead of rendered. Bind it to a boolean property on the bean, which you set to true when clicking the button. — Jaqen H'ghar, Apr 04 '15 at 09:04
it worked..Thank you @JaqenH'ghar ..plz write your answer in answer-box so that I can mark as right — Vebbie, Apr 04 '15 at 09:23

Jaqen H'ghar · Accepted Answer · 2015-04-04T11:49:19.470

Use disabled instead of rendered on the h:selectOneMenu; rendered is for omitting it all together. Bind it to a boolean on the bean, which you set to true when clicking the button. So something like

<h:selectOneMenu ... disabled="#{spkrCatEvt.oneMenuDisabled}"/>

Remember getters/setters on the bean.

If you don't like the new grey look you can style with for example

select:disabled{
    color: black;
}

Had it been a primefaces selectOneMenu that would have been

.ui-selectonemenu.ui-state-disabled{
     opacity: 1; // Between 0.0 and 1, 0.35 being default
}

How to make a component readonly on a specific button click in JSF?

1 Answers1