使用RichFaces通过AJAX调用的backingbean方法动态显示/隐藏页面元素
我正在尝试实现一个页面，该页面根据输入上的key-up事件触发的backingbean方法的结果显示/隐藏元素。我所写的内容表现得出乎意料——加载页面后，panelGroup中的内容根本没有变化，而是在页面顶部出现了一个通配符，其中包含我希望在outputText元素中显示的内容。这是一个运行在JSF 1.2和richfaces 3.3上的遗留应用程序，因此可能无法使用此功能（此处有所提示）。我也对使用表表示歉意，但不幸的是，重构这个大型旧应用程序以使用css/divs的正确布局超出了此功能要求的范围。
这是我的示例jstl模板，它说明了这个问题。“string1/2反转”输出面板应该只显示字符串长度大于5的情况，并且在输入输入时应该更新outputText元素中的文本。相反，outputPanels保持静态，并在表格上方创建一个新的范围。
<!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:c="http://java.sun.com/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<head>
<title>ajax test</title>
</head>
<body>
<h:panelGroup id="wrapper">
<a4j:keepAlive beanName="AjaxTestBacking" />
<p />
<h:form>
<table>
<tr>
<td >string1:</td>
<td>
<h:inputText style="width: 200px" value="#{AjaxTestBacking.string1}">
<a4j:support event="onkeyup" action="#{AjaxTestBacking.updateString1}" reRender="string1panel"/>
</h:inputText>
</td>
</tr>
<h:panelGroup id="string1panel" rendered="#{AjaxTestBacking.displayString1Xform}">
<tr>
<td>string1 reversed:</td>
<td>
<h:outputText style="width: 200px" value="#{AjaxTestBacking.string1Xform}" />
</td>
</tr>
</h:panelGroup>
<tr>
<td>string2:</td>
<td>
<h:inputText style="width: 200px" value="#{AjaxTestBacking.string2}">
<a4j:support event="onkeyup" action="#{AjaxTestBacking.updateString2}" reRender="string2panel"/>
</h:inputText>
</td>
</tr>
<h:panelGroup id="string2panel" rendered="#{AjaxTestBacking.displayString2Xform}">
<tr>
<td>string2 reversed:</td>
<td >
<h:outputText style="width: 200px" value="#{AjaxTestBacking.string2Xform}" />
</td>
</tr>
</h:panelGroup>
</table>
</h:form>
</h:panelGroup>
</body>
</html>
和支持bean:
import java.io.Serializable;
@SuppressWarnings("serial")
public class AjaxTestManager extends AbstractManager implements Serializable {
private String string1;
private String string2;
private String string1Xform;
private String string2Xform;
private Boolean displayString1Xform;
private Boolean displayString2Xform;
public AjaxTestManager() {
string1 = "test string 1";
string2 = "test string 2";
updateString1();
updateString2();
}
public void updateString1() {
string1Xform = new StringBuilder(string1).reverse().toString();
displayString1Xform =string1Xform.length() > 5 ? true : false;
}
public void updateString2() {
string2Xform = new StringBuilder(string2).reverse().toString();
displayString2Xform = string2Xform.length() > 5 ? true : false;
}
public String getString1() {
return string1;
}
public void setString1(String string1) {
this.string1 = string1;
}
public String getString2() {
return string2;
}
public void setString2(String string2) {
this.string2 = string2;
}
public String getString1Xform() {
return string1Xform;
}
public void setString1Xform(String string1Xform) {
this.string1Xform = string1Xform;
}
public String getString2Xform() {
return string2Xform;
}
public void setString2Xform(String string2Xform) {
this.string2Xform = string2Xform;
}
public Boolean getDisplayString1Xform() {
return displayString1Xform;
}
public void setDisplayString1Xform(Boolean displayString1Xform) {
this.displayString1Xform = displayString1Xform;
}
public Boolean getDisplayString2Xform() {
return displayString2Xform;
}
public void setDisplayString2Xform(Boolean displayString2Xform) {
this.displayString2Xform = displayString2Xform;
}
}
如果我从根本上误解了richfaces的一些东西，我很抱歉——我对richfaces ajax有点无知，所以请原谅我！我把这段代码分享给了开发这个应用的同事，他也被难倒了。我在google和SO上搜索了一下，找到了一个基于javascript的答案，但我试图理解如何用richfaces组件来做这件事。其他问题:“rendered”属性是动态显示/隐藏页面部分的方式吗，或者我应该使用“visible”属性吗？另外，a4j:support上的“reRender”属性应该是我最初理解的元素的jsf/“服务器端”id，还是此处所示的呈现的客户端元素ID？只是想弄清楚我是否误解了什么，受我的jsf/richfaces版本的限制，或者只是一般地发疯:)
共有1个答案
我在JSF2.1中看到了类似的行为。当元素上存在呈现的标记，并且您计划通过ajax显示/隐藏该元素时，应该用另一个命名容器包装它，并重新呈现父容器。这样就可以了
<tr>
<td >string1:</td>
<td>
<h:inputText style="width: 200px" value="#{AjaxTestBacking.string1}">
<a4j:support event="onkeyup" action="#{AjaxTestBacking.updateString1}" reRender="string1panelLabel,string1panelValue"/>
</h:inputText>
</td>
</tr>
<tr>
<td>
<h:panelGroup id="string1panelLabel">
<h:panelGroup rendered="#{AjaxTestBacking.displayString1Xform}">
string1 reversed:
</h:panelGroup>
</h:panelGroup>
</td>
<td>
<h:panelGroup id="string1panelValue">
<h:panelGroup rendered="#{AjaxTestBacking.displayString1Xform}">
<h:outputText style="width: 200px" value="#{AjaxTestBacking.string1Xform}" />
</h:panelGroup>
</h:panelGroup>
</td>
</tr>
<tr>
请注意，panelGroup在这里呈现了一个span，结果不是合法的html，因为在tr标记之间不能存在span。相反，panelGroup应该位于表中的td标记内。因此，您必须有两组嵌套的panelGroups才能解决这个问题。或者，可以用h:panelGrid替换html表，后者生成html，但对JSF更友好。
作为附带说明，我在JSF 2.1中使用ui： frament，因为它使显示/隐藏屏幕该部分的意图比panelGroup更明显。
-
本文向大家介绍JQuery显示隐藏页面元素的方法总结，包括了JQuery显示隐藏页面元素的方法总结的使用技巧和注意事项，需要的朋友参考一下 在jquery中显示隐藏div方法方法有很多种，如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作，下面我来介绍。 show()方法 显示出隐藏的 <p> 元素。 toggle(
-
本文向大家介绍JQuery DIV 动态隐藏和显示的方法，包括了JQuery DIV 动态隐藏和显示的方法的使用技巧和注意事项，需要的朋友参考一下 1. 如果在载入是隐藏： 2. 动态隐藏和显示： 以上代码之前，可能还要加上这句话： 使用jquery真的很方便，比如要控制div的显示与隐藏，一句话就搞定了，请看下面使用说明。 $("#id").toggle()切换元素的可见状态。如果元素是可见的，
-
本文向大家介绍jQuery使用hide方法隐藏页面上指定元素的方法，包括了jQuery使用hide方法隐藏页面上指定元素的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery使用hide方法隐藏页面上指定元素的方法。分享给大家供大家参考。具体如下： 下面的JS代码隐藏了网页中所有<p>标签的内容 希望本文所述对大家的jQuery程序设计有所帮助。
-
问题内容： 我对Web开发 非常 陌生，但是总体上有很多开发经验。我有一个ASP页，其中包含一些输入字段和一个提交按钮。这个提交按钮纯粹调用$ .ajax，我打算在代码隐藏文件中调用一个方法。但是，我注意到了两个有趣的事情。首先，无论向其提供了什么数据，ajax调用都会成功。其次，responseText字段是整个页面的html源。 我已经阅读了此文章以及其他指向webconfig的文章，但是这些
-
本文向大家介绍jQuery显示和隐藏 常用的状态判断方法，包括了jQuery显示和隐藏 常用的状态判断方法的使用技巧和注意事项，需要的朋友参考一下 显示：show() display:block; 隐藏：hide() display:none; 当显示和隐藏切换的时候，需要判断此刻是显示还是隐藏，那判断条件常用以下几种方法： 1.if(thisNode.is(':hidden')){....
-
本文向大家介绍如何使用animate()，隐藏和显示元素？，包括了如何使用animate()，隐藏和显示元素？的使用技巧和注意事项，需要的朋友参考一下 使用和方法来隐藏和显示元素。 示例 您可以尝试运行以下代码，以了解如何使用方法来隐藏和显示元素：