CODEWITHSUNDEEP
jsfjsf-2.2
Vebbie
Vebbie

Reputation: 1695

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

<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.

Upvotes: 1

Views: 3151

Answers (1)

Jaqen H&#39;ghar
Jaqen H&#39;ghar

Reputation: 4345

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
}

Upvotes: 3

Related Questions