可以在页面加载后使用 jQuery 用自己的 div 包装 JSF 组件生成的 html 吗？答案

【问题标题】：Ok to wrap JSF components generated html with own divs using jQuery after page load?可以在页面加载后使用 jQuery 用自己的 div 包装 JSF 组件生成的 html 吗？
【发布时间】：2010-10-10 08:50:26
【问题描述】：

使用 RichFaces 3.3.3、JSF 1.2 和 Facelets。

出于某些演示目的，我需要将一些 div 的内容与其他 div 包装起来，以便能够以某种方式设置它们的样式。

我在编写 HTML 时使用 jQUery 作为它的清洁器，并且可以在一个位置进行控制，否则我必须在每个我想使用它们的地方硬编码额外的 divs。

例如。原始 JSF 生成的 HTML：

<div id="j_id4:main-container">
    <div id="j_id4:j_id5:nav">...</div>
</div>

使用 jQUery 后的 HTML 现在看起来像这样：

<div id="j_id4:main-container">

    <div class="top"><div></div></div>

    <div class="middle">
            <div id="j_id4:j_id5:nav">...</div>
    </div>

    <div class="bottom"><div></div></div>

</div>

这会导致问题吗？我反对来自 jboss richfaces 文档的rule，它说：

任何 Ajax 框架都不应该追加或删除，但仅替换元素在页面上。为了成功更新，具有与中相同 ID 的元素响应必须存在于页面上。如果您想将任何代码附加到页面，为其放置一个占位符（任何空元素）。出于同样的原因，建议将消息放入 “AjaxOutput”组件（因为没有 messages 也是一条消息）。

如果我不能这样做，你会建议什么其他方法？

更新 1：

我在一个将rich:tabPanel 控件设置为ajax 模式的页面上进行了尝试，我使第一个（默认）选项卡内容通过jQuery 准备好dom 上的嵌套div。它第一次工作正常，但是当我单击其他选项卡并返回第一个选项卡时，不会出现额外的 div。我认为这是因为 js 仅在 dom 就绪时触发一次，然后在 tabPanel 控件的 Richfaces 重新呈现时重新呈现，就好像它不知道额外的 div 一样。有没有办法避免这种情况？

【问题讨论】：

标签： jquery html jsf richfaces facelets

【解决方案1】：

只要您不打扰现有的元素 ID，我不预见任何技术问题。 RichFaces 的规则可能只是为了在最终用户遇到问题时保护自己，主要是在删除元素或添加具有相同 ID 的元素时。至少，他们没有说“可能不会”，而只是“不应该”。

至于实际问题：JSF 当然不知道新添加的 HTML 元素，并且在将 HTML 重新呈现给客户端时不会考虑它们。您需要编写一个回调函数，在 JSF 重新呈现后“修复”HTML DOM 结构。或者，如果无法在视图端（XHTML 页面）中插入这些元素，您可以考虑编写一个自定义渲染器，以您想要的方式渲染元素。

【讨论】：

我只想补充一点：由于 JSF 通过完全重新渲染组件来“更新”组件，组件内部的实际内容并不重要。另外，我假设 JSF 仅通过它们的 ID 识别组件（因为每个组件实例都有唯一的 ID），因此不使用依赖于 DOM 结构的特殊选择器。
我试过了，但遇到了一些不受欢迎的行为。查看问题更新。
@BalusC：这是个好方法吗？编写自定义渲染器？我确实考虑过，写一个 a4j:customPanel 或类似的东西来绘制我的 div 结构，我可以将我的内容和其他控件放入其中。有没有办法让 JSF 了解新的 HTML？
更多相关问题尚未在此处回答：stackoverflow.com/questions/3882022/… 和 stackoverflow.com/questions/3902687/…
这在 RichFaces 和 jqGrid 中过于具体。我没有这两个方面的实践经验，所以我无法从头顶回答。很抱歉无法回答您的新问题。