两个不同 h:commandButton 动作的条件渲染
Conditional rendering of two different h:commandButton actions
使用的技术:
JSF 2
Primefaces
问题陈述:
我们有一个下拉列表如下 -
<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>
如果用户选择项目 2,将显示一个按钮,单击该按钮将打开一个弹出菜单。
如果用户选择项目 1 或 3 或 4,则会显示另一个按钮,单击该按钮会触发业务操作。
我们可以使用 f:ajax
为 h:selectOneMenu
获得 AJAX 调用。
我们正在使用 f:ajax
的 render
属性
这工作正常。
问题是如何在 AJAX 响应上设计两个按钮。
不使用 JSTL 的方法一:
<h:commandButton id="one" value="Submit" onClick="openPopup" rendered="#{bean.render}">
<h:commandButton id="two" value="Submit" action="#{bean.businessAction}" rendered="#{bean.render}">
其中 #{bean.render}
将检查单击的项目的值和 return true/false。
使用 JSTL 的方法二:
在同一个 panelGrid 中包裹两个按钮并只渲染 panelGrid。在 panelGrid 中使用 JSTL 来控制渲染。
<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>
我在网上搜索了一下,似乎方法一更正确,因为不建议在 JSF 中使用 JSTL 来控制渲染。
但问题是:
当只使用一个命令按钮时,我们最终创建了两个命令按钮。
另外,如果两个命令按钮只需要一个 id 怎么办。在任何时间点都应该只有一个。
请指教
您的 Y-problem 的回答是:
- how to refresh jstl test using ajax of primefaces?
- JSTL in JSF2 Facelets... makes sense?
- Ajax update/render does not work on a component which has rendered attribute
您的X-problem回复如下:
<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>
也就是说,让它有条件地渲染onclick属性本身,returns false
.
使用的技术:
JSF 2
Primefaces
问题陈述:
我们有一个下拉列表如下 -
<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>
如果用户选择项目 2,将显示一个按钮,单击该按钮将打开一个弹出菜单。 如果用户选择项目 1 或 3 或 4,则会显示另一个按钮,单击该按钮会触发业务操作。
我们可以使用 f:ajax
为 h:selectOneMenu
获得 AJAX 调用。
我们正在使用 f:ajax
render
属性
这工作正常。
问题是如何在 AJAX 响应上设计两个按钮。
不使用 JSTL 的方法一:
<h:commandButton id="one" value="Submit" onClick="openPopup" rendered="#{bean.render}">
<h:commandButton id="two" value="Submit" action="#{bean.businessAction}" rendered="#{bean.render}">
其中 #{bean.render}
将检查单击的项目的值和 return true/false。
使用 JSTL 的方法二:
在同一个 panelGrid 中包裹两个按钮并只渲染 panelGrid。在 panelGrid 中使用 JSTL 来控制渲染。
<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>
我在网上搜索了一下,似乎方法一更正确,因为不建议在 JSF 中使用 JSTL 来控制渲染。
但问题是:
当只使用一个命令按钮时,我们最终创建了两个命令按钮。
另外,如果两个命令按钮只需要一个 id 怎么办。在任何时间点都应该只有一个。
请指教
您的 Y-problem 的回答是:
- how to refresh jstl test using ajax of primefaces?
- JSTL in JSF2 Facelets... makes sense?
- Ajax update/render does not work on a component which has rendered attribute
您的X-problem回复如下:
<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>
也就是说,让它有条件地渲染onclick属性本身,returns false
.