Ok to wrap JSF components generated html with own divs using jQuery after page load?

Question

Using RichFaces 3.3.3, JSF 1.2 and Facelets.

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.

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.

eg. original JSF generated HTML:

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

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>

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

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?

UPDATE 1:

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?

Answer 1

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".

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.