重新渲染richfaces/jsf组件时如何维护jQuery/javasscript操作的DOM状态？

Question

在我的jsf 应用程序中渲染我的一些组件时遇到了问题。 问题是当我在页面上使用jQuery 时，例如隐藏按钮。当页面重新呈现时，按钮返回到应该隐藏的原始形式。

有没有人有这方面的专业知识可以帮助我找到合适的解决方案，或者这里有一些我盲目误解的原则或技术？

谢谢。 :)

Answer 1

问题是当我在页面上使用 jQuery 时，例如隐藏按钮。当页面重新呈现时，按钮返回到应该隐藏的原始形式。

不要使用 jQuery 来操作 DOM，而是使用 JSF Ajax 来操作 DOM。

例如

<h:form>
    <h:selectBooleanCheckbox value="#{bean.checked}">
        <f:ajax render="buttons" />
    </h:selectBooleanCheckbox>

    <h:panelGroup id="buttons">
        <h:commandButton value="Submit" rendered="#{bean.checked}" />
    </h:panelGroup>
</h:form>

另见：

• What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?

Answer 2

我们在 IceFaces 1.8.2 中遇到了同样的问题。问题是服务器端应用程序不知道客户端对 DOM 的更改。我们通过将标记类应用于我们想用 jQuery 操作的元素来为我们解决了这个问题。我们使用 DOM-Updates 的通用客户端回调（IceFaces 1.8.x 下的onAsynchronousReceive）重新应用我们的脚本。

不幸的是，不是 RichFaces 特定的：

<h:outputText value="my text" styleClass="doSomethingWithThisAfterDOMUpdate" />

在你的页面标记中的某个地方（我们使用绑定到 j 而不是 $ 的 jQuery）：

<script type="text/javascript">

    // do somehting the first time
    j(".doSomethingWithThisAfterDOMUpdate").css('display', 'none'); 

    Ice.onAsynchronousReceive("document:body", function() {

        // do it again after each asynchronous receive
        j(".doSomethingWithThisAfterDOMUpdate").css('display', 'none');
    });
</script>

但是：小心地将侦听器应用于回调中的元素。如果元素没有被替换，您将第二次、第三次、第四次分配相同的侦听器...

在 JSF2 下，AJAX 成为规范的一部分。你可以看看客户端方法addOnEvent，它可能是 Ice.onAsynchronousReceive 的通用计数器部分。

然而，并非所有组件框架似乎都使用规范的客户端实现来执行其 DOM 更新（即 PrimeFaces）。

但我想原理变得清晰了。您需要在 DOM 元素被替换后重新运行脚本 :)