I am having some trouble with PPR relative to the use of DIVs and the
resulting DOM tree. In particular, the PPR doesn't seem to "excise" a DIV
resulting "left over" DIVs in the DOM. It could certainly be that DIVs are a
no-no in this situation, if that's the case, if you could help me understand
the correct model that would be great.
A snip of code showing the issue is below. The bean used in the iterator
returns a list of items that are rendered as buttons. As buttons are pushed,
state changes take place and new buttons are displayed in the place of the
old buttons. To accomplish this PPR I call addPartialTrigger for the
panelGroupLayout id "layout" from within the actionListener associaged with
the button.
<div class="searchbox">
<tr:panelGroupLayout id="layout">
<tr:outputText styleClass="searchh2" value="Select Category" />
<div id="stuff" align="center" style="float: left;">
<tr:iterator id="searchButtons" var="searchLabel"
value="#{searchBean.labels}">
<tr:commandButton text="#{searchLabel.name}"
id="searchButton"
styleClass="searchmedium"
partialSubmit="true"
actionListener="#{searchBean.listSelect}" />
</tr:iterator>
</div>
</tr:panelGroupLayout>
</div>
Visually, the above works great, but the DOM contains "extra stuff" after a
button is pushed. See below for a snip (from Firebug) after a single button
push. As more buttons are pushed, more "grayed out" instances appear.
<div class="searchbox">
<div id="stuff" align="center" style="float: left;"/> <-- This is
"grayed out" in Firebug
Select Category
<div id="stuff" align="center" style="float: left;"> <-- This has
detail below it which is not shown
</div>
</div>
I can cause a "visual" manifestation of the problem by switching around the
JSP code. Note that the DIV with the class of "searchbox" draws a border
around its geometry. If I swap the order of the "searchbox" DIV with the
panelGroupLayout (as shown below) each press of a button causes a) the
currently rendered content within the DIV, but not including the border to
be removed and b) a new box to be drawn below the current box with the
content (and border) correctly rendered. As I press more buttons, the
pattern repeats. A review of the DOM shows multiple grayed entries for the
DIV with the searchbox, without any children, save for the last (this is the
same behavior as the first situation, but is "visible" because of the
border).
<tr:panelGroupLayout id="layout">
<div class="searchbox">
<tr:outputText styleClass="searchh2" value="Select Category" />
<div id="stuff" align="center" style="float: left;">
<tr:iterator id="searchButtons" var="searchLabel"
value="#{searchBean.labels}">
<tr:commandButton text="#{searchLabel.name}"
id="searchButton"
styleClass="searchmedium"
partialSubmit="true"
actionListener="#{searchBean.listSelect}" />
</tr:iterator>
</div>
</div>
</tr:panelGroupLayout>
I do need to "float" and other sorts of things within panels so it would be
tough to not use DIVs. Is there an alternative? Maybe if I somehow "nest"
things further so PPR "syncs" better (maybe a kludge, but something I could
live with)? If there's a document I haven't found discussing this, please
point me there.
Thanks,
Jim Kuschill
--
View this message in context:
http://www.nabble.com/-trinidad--PRR---DIVs-tp21876372p21876372.html
Sent from the MyFaces - Users mailing list archive at Nabble.com.
