可以在页面加载后使用jQuery将JSF组件生成的HTML与自己的div包装在一起吗? [英] Ok to wrap JSF components generated html with own divs using jQuery after page load?

问题描述

使用RichFaces 3.3.3，JSF 1.2和Facelets.

Using RichFaces 3.3.3, JSF 1.2 and Facelets.

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

For some presentation purposes I need to wrap the contents of some divs with other divs to be able to style them a certain way.

在编写HTML时，我正在使用jQUery作为它的清理器，并且可以在一个位置进行控制，否则我必须在要使用它们的每个位置上对额外的divs进行硬编码.

I am using jQUery to do this as its cleaner when writing HTML and it can be controlled in one location, otherwise I have to hardcode the extra divs every place I want to use them.

例如原始的JSF生成的HTML:

eg. original JSF generated HTML:

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

使用jQUery之后，HTML现在看起来像这样:

after using jQUery the HTML now looks like this:

<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文档说:

Can this cause problems? I am going against this rule from the jboss richfaces documentation which says:

任何Ajax框架都不应附加 或删除，但仅替换元素 在页面上.为了成功进行更新， 与ID中具有相同ID的元素 该页面上必须存在响应.如果 您想将任何代码附加到 页面，为此放置一个占位符(任何 空元素).为了同样的原因， 建议将邮件放入 "AjaxOutput"组件(不 消息也是消息).

Any Ajax framework should not append or delete, but only replace elements on the page. For successful updates, an element with the same ID as in the response must exist on the page. If you'd like to append any code to a page, put in a placeholder for it (any empty element). For the same reason, it's recommended to place messages in the "AjaxOutput" component (as no messages is also a message).

如果我做不到，您会建议其他什么方法?

If I can't do this, what other approach would you suggest?

更新1:

我在将rich:tabPanel控件设置为ajax模式的页面上尝试了此操作，我使第一个(默认)选项卡内容之一通过jQuery在dom上获得了嵌套的div.第一次运行正常，但是当我单击其他选项卡并返回到第一个选项卡时，不会显示多余的div.我认为这是因为js在dom准备就绪时仅被触发一次，然后在richfaces上重新渲染tabPanel控件时，它会重新渲染，好像它没有意识到多余的div.有办法避免这种情况吗?

I tried this on a page which has a rich:tabPanel control set to ajax mode, i made the first (default) one of the tab contents get the nested divs on dom ready via jQuery. it works fine the first time, but when i click the other tabs and come back to the first one the extra divs don't appear. i think this is because the js is fired only once at dom ready and then on richfaces rerendering of tabPanel control it rerenders as if it was unaware of the extra divs. is there a way to avoid this?

推荐答案

只要您不打扰现有元素ID，就不会遇到任何技术问题. RichFaces的规则可能只是为了使自己安全，以防最终用户遇到问题，主要是在删除元素或添加具有相同ID的元素时.至少，他们没有说也许不是" ，而只是说不应该" .

As long as you aren't disturbing the existing element ID's, I don't forsee any technical problems. The rule by RichFaces is probably just to put themselves safe for the case an enduser encounters problems with that, mainly when deleting elements or appending elements with the same ID. At least, they didn't say "may not", but just "should not".

关于实际问题:JSF当然不知道新添加的HTML元素，并且在将HTML重新呈现给客户端时不考虑它们.您将需要编写一个回调函数，该函数在JSF的重新渲染后可以修复" HTML DOM结构.另外，如果不是已经在视图侧(XHTML页面)中插入了这些元素，则可以考虑编写一个自定义渲染器，以所需的方式渲染这些元素.

As to the actual problem: JSF is of course not aware of the newly added HTML elements and doesn't take them into account when re-rendering the HTML to the client side. You would need to write a callback function which "fixes" the HTML DOM structure after JSF's re-rendering. Alternatively, if inserting those elements already in the view side (the XHTML page) isn't an option, you may consider to write a custom renderer which renders the elements the way you want.

这篇关于可以在页面加载后使用jQuery将JSF组件生成的HTML与自己的div包装在一起吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！