我在实现 MyFaces 2.0 时使用 JSF。 在我的 web 应用程序中，我想要一个带有“显示更多”按钮的页面。用户获取页面，只有按钮和带有一些信息(例如带有标签)的隐藏表单。当用户单击此按钮时，他会在同一页面上看到带有显示标签的页面。当他再次点击时，标签应该隐藏。
我的页面.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
</h:head>
<h:body>
<h:form>
<h:commandButton value="show more" action="#{bean.showOrHide}">
<f:ajax render=":formWithLabel"/>
</h:commandButton>
</h:form>
<hr/>
<h:form id="formWithLabel" rendered="#{bean.show}">
<h:outputLabel value="More information"/>
</h:form>
</h:body>
Bean.java:
@ManagedBean
@ViewScoped
public class Bean {
private boolean show;
//getters, setters
public void showOrHide(){
show = !show;
}
}
此代码似乎无效。怎么了？
最佳答案
确实，这种方法行不通。
<f:ajax render=":formWithLabel"/>基本工作如下:
- JavaScript 发送一个 ajax 请求。
- JSF 返回带有
<update id="formWithLabel">的 ajax 响应更新后的 HTML。 - JavaScript 使用
document.getElementById("formWithLabel")找到该元素，以便其内部 HTML 内容可以替换为来自 ajax 响应的内容。
但是，作为 <h:form id="formWithLabel" rendered="#{bean.show}">永远不会首先呈现，JavaScript 无法在 HTML 文档中找到任何内容来用来自 ajax 响应的内容替换内部 HTML 内容，并且静默失败。
您需要将它包装在另一个 JSF 组件中，该组件始终呈现为 HTML 输出，以便 JavaScript 可以在需要根据 ajax 响应更新 HTML 文档时找到它。
<h:form>
<h:commandButton value="show more" action="#{bean.showOrHide}">
<f:ajax render=":groupWithLabel"/>
</h:commandButton>
</h:form>
<h:panelGroup id="groupWithLabel">
<h:form id="formWithLabel" rendered="#{bean.show}">
<h:outputLabel value="More information"/>
</h:form>
</h:panelGroup>
另见:
与具体问题无关，当您打算在此表单上调用操作时，您可能会偶然发现一个新问题。您可能想要交换 <h:panelGroup>与 <h:form> .
另见:
关于javascript - "show more"<h :commandButton> with ajax，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20335186/