Question

这个例子有点极端，我试图做的不完全是这个，但更简单地用这个来证明我的问题

我有一个页面，带有一个简单的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>

当我按下“GO”按钮时，我想渲染component1如果renderu1被选中，component2如果renderu2被cheked，则component3如果renderu3被选中

我目前的解决方案是使用jQuery表单插件的js函数：

$(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;
    });
}

它的作用是每当我提交表单时，它会向给定的URL发出ajax请求，等待响应，如果theres内容（状态代码不是304，所以它不是“未修改”），它会得到数据，并将原始“unique_containers”中的内容替换为新数据

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：

@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，响应将是这样的：

<html>
    <span id="u3" class="unique_container">
        content of component3
    </span>
</html>

它工作正常，简单而且全部，但后来我开始使用RichFaces作为我的一个组件 - 问题是，它使用jQuery的$（document）.ready（fn）函数，当我重新加载部件使用RichFaces，它会中断（它是一个树组件，我无法打开节点）

我一直在寻找可以做我的工作的工作溶剂，但更好地准备兼容性问题（从技术上讲，我想根据参数决定更新哪个部分，所以当原始页面呈现时，我不知道写什么来写“执行”和“渲染”属性

Answer 1

这实际上是一个非常可怕的解决方案。您可以使用纯JSF 2.0解决此问题，而无需jQuery，JSTL和自定义标记。您可以使用<f:ajax>触发ajax请求并呈现部分组件。您可以通过rendered属性有条件地呈现JSF组件。

这是一个基本的启动示例，假设您正在运行一个Servlet 3.0 / EL 2.2容器，其中/WEB-INF/web.xml根据Servlet 3.0规范声明（否则.contains()将无法在EL中工作你必须写一个自定义EL函数。）

<!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;
    }

}

就是这样。

jsf2 ajax根据请求参数更新部件

1 个答案: