Conditional rendering of two different h:commandButton actions

Question

Technology Used :

JSF 2

Primefaces

Problem statement :

We have one drop down list as below -

<h:selectOneMenu value ="#{bean.value}"> 
   <f:ajax event="change" listener="#{bean.processValue}" 
    render="{one,two or panel}" />   //render correct id based on approach

   <f:selectItem itemValue = "1" itemLabel = "Item 1" /> 
   <f:selectItem itemValue = "2" itemLabel = "Item 2" />
   <f:selectItem itemValue = "3" itemLabel = "Item 3" /> 
   <f:selectItem itemValue = "4" itemLabel = "Item 4" /> 
</h:selectOneMenu>

If user selects item 2 , a button is displayed which when clicked opens up a pop up menu. If user selects item 1 or 3 or 4 , another button is displayed which triggers a business action when clicked.

We are able to get AJAX invocation for h:selectOneMenu using f:ajax. We are using render attribute of f:ajax

This is working fine.

The question is how to design two buttons on AJAX response.

Approach one without using JSTL :

<h:commandButton id="one" value="Submit" onClick="openPopup" rendered="#{bean.render}">
<h:commandButton id="two" value="Submit" action="#{bean.businessAction}" rendered="#{bean.render}">

where #{bean.render} will check for value of item clicked and return true/false.

Approach two with using JSTL :

Wrap two buttons within same panelGrid and render only panelGrid. Use JSTL inside panelGrid to control rendering.

<h:panelGrid id="panel">
  <c:choose>     
     <c:when test = "${itemVlaue == 2}"> // use appropriate EL expression 
       <!-- render command button 1 to open pop up --> 
     </c:when>

     <c:when test = "${itemVlaue == 1 or 3 or 5  }"> // use appropriate EL expression 
       <!-- render command button 2 to invoke action --> 
     </c:when>
  </c:choose>
</h:panelGrid>

I have searched over internet and it seems approach one is more correct since it is not advisable to use JSTL inside JSF to control rendering.

But the question is then :

We end up creating two command buttons when only one is being used.

Also what if two command buttons need to have only one id . That is only one should be present at any point on time .

Please advice

Your question is genuinely confusing. The tag was introduced only in JSF 2.0. But the problems when mixing JSTL with JSF is only applicable to JSF 1.x. Which JSF version are you really using? — BalusC, Mar 16 '18 at 07:36
@Balusc - My blunder. I have updated the question. We are using JSF2 only. The main point here is what is the best way to render components ? Using JSTL or JSF mechanisms. And repercussions of using JSF mechanism as mentioned in question. — Atul, Mar 16 '18 at 08:03

score 3 · Accepted Answer · answered Mar 16 '18 at 08:42

Your Y-problem is answered in:

Your X-problem is answered as below:

<h:selectOneMenu value="#{bean.value}">
   ...
   <f:ajax listener="#{bean.processValue}" render="oneAndOnly" />
</h:selectOneMenu>
...
<h:commandButton id="oneAndOnly" value="Submit"
    onclick="#{bean.render ? 'openPopup();return false;' : ''}"
    action="#{bean.businessAction}">
</h:commandButton>

In other words, just let it conditionally render the onclick attribute itself which returns false.

Using same command button to open up pop up and call action is amazing . I could not think of it. Thanks a lot again — Atul, Mar 16 '18 at 12:01

Conditional rendering of two different h:commandButton actions

1 Answers1