基于请求参数JSF2 AJAX更新部分 [英] jsf2 ajax update parts based on request parameters
问题描述
本例中是一种极端的，什么我尝试做的是不是正是这一点，但它更简单，这个证明我的问题
this example is kind of extreme, and what im trying to do is not exactly this, but its more simple to demonstrate my problem with this
我有一个页面，用一个简单的index.xhtml：
i have a page, with a simple index.xhtml:
<html
xmlns:h="http://java.sun.com/jsf/html"
xmlns:mc="http://java.sun.com/jsf/composite/mc">
...
<h:panelGroup id="u1" styleClass="unique_container">
<mc:component1></mc:component1>
</h:panelGroup>
<h:panelGroup id="u2" styleClass="unique_container">
<mc:component2></mc:component2>
</h:panelGroup>
<h:panelGroup id="u3" styleClass="unique_container">
<mc:component3></mc:component3>
</h:panelGroup>
<form action="/faces/async.xhtml">
<input type="checkbox" name="renderu1" />
<input type="checkbox" name="renderu2" />
<input type="checkbox" name="renderu1" />
<input type="submit" value="render" />
</form>
...
</html>
当I $上的GO按钮p $ PSS，我想呈现COMPONENT1如果renderu1被选中，COMPONENT2如果renderu2被cheked，并component3如果renderu3检查
when i press on the "GO" button, i want to render component1 if renderu1 is checked, component2 if renderu2 is cheked, and component3 if renderu3 is checked
我目前sollution因为这是使用jQuery一个js函数形式的插件：
my current sollution for this is a js function using jQuery forms plugin:
$(document).ready(function(){
registerForms($(document));
});
function registerForms(rootElement)
{
rootElement.find("form").submit(function() {
// submit the form
$(this).ajaxSubmit(function(data, textStatus) {
if(textStatus == "notmodified")
return;
var tempDiv = $('<div></div>');
tempDiv.css("display", "none");
tempDiv.html(data);
var newUniqueContainer;
while((newUniqueContainer = tempDiv.find(".unique_container:first")).html() != null)
{
var oldUniqueContainer = $("#" + newUniqueContainer.attr("id") + ":first");
oldUniqueContainer.empty();
oldUniqueContainer.html(newUniqueContainer.html());
registerForms(oldUniqueContainer);
newUniqueContainer.remove();
}
tempDiv.remove();
});
// return false to prevent normal browser submit and page navigation
return false;
});
}
它的作用是每当我提出的一种形式，它激发一个Ajax请求给定的URL，等待响应，而如果孤单的内容（状态code不是304，所以它不是notmodified），它得到的数据，并替代了内容的原始unique_containers内的新数据
what it does is whenever i submit a form, it fires an ajax request to the given url, waits for the response, and if theres content (status code is not 304, so its not "notmodified"), it gets the data, and replaces the content within the original "unique_containers" to the new data
async.xhtml：
async.xhtml:
<html xmlns:mc="http://java.sun.com/jsf/composite/mc"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<c:if test="#{asyncBean.render1}">
<h:panelGroup id="u1" styleClass="unique_container">
<mc:component1></mc:component1>
</h:panelGroup>
</c:if>
<c:if test="#{asyncBean.render2}">
<h:panelGroup id="u2" styleClass="unique_container">
<mc:component2></mc:component2>
</h:panelGroup>
</c:if>
<c:if test="#{asyncBean.render3}">
<h:panelGroup id="u3" styleClass="unique_container">
<mc:component3></mc:component3>
</h:panelGroup>
</c:if>
</html>
AsyncBean.java：
AsyncBean.java:
@ManagedBean(name="asyncBean")
@RequestScoped
public class AsyncBean {
@ManagedProperty(value="#{param.renderu1}")
private boolean render1;
@ManagedProperty(value="#{param.renderu2}")
private boolean render2;
@ManagedProperty(value="#{param.renderu3}")
private boolean render3;
private boolean isRender1() {
return render1;
}
private void setRender1(boolean render1) {
this.render1 = render1;
}
private boolean isRender2() {
return render2;
}
private void setRender2(boolean render2) {
this.render2 = render2;
}
private boolean isRender3() {
return render3;
}
private void setRender3(boolean render3) {
this.render3 = render3;
}
}
所以，如果只有3复选框被选中exapmle，响应将是这样的：
so, for exapmle if only the 3rd checkbox is checked, the response will be something like this:
<html>
<span id="u3" class="unique_container">
content of component3
</span>
</html>
其做工精细，它的简单，所有的，但后来我开始使用RichFaces的我的组成部分之一 - 问题是，它使用jQuery的$（文件）。就绪（FN）功能，当我重新加载部分与RichFaces的，它打破了（它是一个树组件，和我不能打开节点）
its working fine, and its simple and all, but then i started using RichFaces for one of my components - the problem is, that it uses jQuery's $(document).ready(fn) function, and when i reload the part with RichFaces, it breaks (its a tree component, and i cant open the nodes)
我一直在寻找一个工作sollution，可以做我的根本，但ppared兼容性问题（在技术上，我要决定哪一部分更新基于参数更好的$ P $，所以当原始网页呈现的，我不知道写什么还没有到执行和渲染属性）
i have been looking for a working sollution that can do what mine does, but is better prepared for compatibility issues (technically, i want to decide what part to update based on the parameters, so when the original page is rendered, i dont know yet what to write to "execute" and "render" attribute)
推荐答案
这其实是pretty的可怕的解决方案。您可以使用纯JSF 2.0解决这个问题，而不需要jQuery的，JSTL和定制的标签。您可以使用＆LT; F：AJAX＆GT; 来触发一个Ajax请求和渲染部分组成。您可以通过他们的渲染属性呈现JSF组件的条件。
This is actually a pretty terrible solution. You can solve this with pure JSF 2.0 without the need for jQuery, JSTL and custom tags. You can use <f:ajax> to fire an ajax request and render partial components. You can render JSF components conditionally by their rendered attribute.
下面是一个基本的开球例如，假定你正在运行一个Servlet 3.0 / EL 2.2能力的容器使用 /WEB-INF/web.xml 宣布为每个Servlet的3.0规范（否则。载（）将无法在EL工作，你必须编写自定义EL函数）。
Here's a basic kickoff example, assuming that you're running a Servlet 3.0 / EL 2.2 capable container with a /WEB-INF/web.xml declared as per Servlet 3.0 spec (otherwise the .contains() won't work in EL and you have to write a custom EL function).
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
>
...
<h:panelGroup id="panels">
<h:panelGroup rendered="#{bean.panels.contains('u1')}">
panel one
</h:panelGroup>
<h:panelGroup rendered="#{bean.panels.contains('u2')}">
panel two
</h:panelGroup>
<h:panelGroup rendered="#{bean.panels.contains('u3')}">
panel three
</h:panelGroup>
</h:panelGroup>
<h:form>
<h:selectManyCheckbox value="#{bean.panels}">
<f:selectItem itemValue="u1" />
<f:selectItem itemValue="u2" />
<f:selectItem itemValue="u3" />
<f:ajax render=":panels" />
</h:selectManyCheckbox>
</h:form>
...
</html>
与
@ManagedBean
@RequestScoped
public class Bean {
private List<String> panels;
public List<String> getPanels() {
return panels;
}
public void setPanels(List<String> panels) {
this.panels = panels;
}
}
这就是全部。
That's all.
这篇关于基于请求参数JSF2 AJAX更新部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
