10 Replies Latest reply on Apr 9, 2009 7:01 AM by ilya_shaikovsky

Odd outputPanel behaviour, as it doesn't close properly some

wolfeng Apr 6, 2009 12:17 PM

Perhaps someone could throw in some light in this issue, I'm using a couple outputPanels to render global messages on the pages, but while it does show the messages, the messages div created when the HTML is render sometimes 'eats' the page content, and this doesn't always happen, I've been trying to pin point any particular differences within the pages that behave as expected and those that don't, but I wasn't quite successful.

The following code is included in the pages needing global error/messages reporting using a custom tag. As stated before the contents is sometimes eaten, or more properly, included as child appended at the end of the successMessages outputPanel. I've got nested outputPanels and but I've tried without them and a couple other variations, any comments on this matter would be highly appreciated. Thanks in advance.

.:Wolf:.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:t="http://myfaces.apache.org/tomahawk"
 xmlns:a4j="http://richfaces.org/a4j" >

 <head>
 <title>#{titulo}</title>
 <meta name="heading" content="#{titulo}" />
 </head>

 <a4j:outputPanel layout="inline" ajaxRendered="true">

 <a4j:outputPanel styleClass="error" id="errorMessages" layout="block" rendered="${messagesTemplate.hasErrors}">

 <t:dataList var="error" value="#{messagesTemplate.errors}">
 <h:graphicImage url="/images/iconWarning.gif" alt="" styleClass="icon" />
 <h:outputText value="#{error}" />
 </t:dataList>

 </a4j:outputPanel>

 </a4j:outputPanel>
 <a4j:outputPanel layout="inline" ajaxRendered="true">

 <a4j:outputPanel styleClass="message" id="successMessages" layout="block" rendered="${messagesTemplate.hasMessages}">

 <t:dataList var="message" value="#{messagesTemplate.messages}">
 <h:graphicImage url="/images/iconInformation.gif" alt="" styleClass="icon" />
 <h:outputText value="#{message}" />
 </t:dataList>

 </a4j:outputPanel>

 </a4j:outputPanel>

</ui:composition>

1. Re: Odd outputPanel behaviour, as it doesn't close properly

nbelaevski Apr 6, 2009 7:10 PM (in response to wolfeng)

Hello Wolf,

It's not correct to put block elements inside inline ones as such nesting can produce various sorts of issues. Please fix that and check.
Actions
2. Re: Odd outputPanel behaviour, as it doesn't close properly

wolfeng Apr 6, 2009 8:26 PM (in response to wolfeng)

Thanks for the quick reply, I'll look into that then and get back to you as soon as I can. Cheers!

.:Wolf:.
Actions

3. Re: Odd outputPanel behaviour, as it doesn't close properly

wolfeng Apr 6, 2009 9:00 PM (in response to wolfeng)

Here's the new code, saddly for me nothing changed, the page content gets inside the successMessage, I'll post the rendered code right after the this block of code. Just to give a bit more of perspective on this matter.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:c="http://java.sun.com/jsp/jstl/core"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:t="http://myfaces.apache.org/tomahawk"
 xmlns:v="http://corejsf.com/validator"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">

 <head>
 <title>#{titulo}</title>
 <meta name="heading" content="#{titulo}" />
 </head>

 <a4j:outputPanel styleClass="error" id="errorMessages" layout="block" rendered="${messagesTemplate.hasErrors}" ajaxRendered="true">

 <t:dataList var="error" value="#{messagesTemplate.errors}">
 <h:graphicImage url="/images/iconWarning.gif" alt="" styleClass="icon" />
 <h:outputText value="#{error}" />
 </t:dataList>

 </a4j:outputPanel>

 <a4j:outputPanel styleClass="message" id="successMessages" layout="block" rendered="${messagesTemplate.hasMessages}" ajaxRendered="true">

 <t:dataList var="message" value="#{messagesTemplate.messages}">
 <h:graphicImage url="/images/iconInformation.gif" alt="" styleClass="icon" />
 <h:outputText value="#{message}" />
 </t:dataList>

 </a4j:outputPanel>

</ui:composition>

This is the snippet b4 any message is displayed

<div id="main">
 <span id="j_id1"/>
 <span id="j_id5"/>
 <form enctype="application/x-www-form-urlencoded" action="/midas-web/ramos.html" method="post" name="editRamo" id="editRamo" target="">
 <input type="submit" class="button" .../>
 <input type="submit" class="button" .../>
 <table class="scrollerTable table" style="margin-top: 10px;" id="editRamo:ramoes">
 </table>
 <div align="center" style="" id="editRamo:dataScroll" class="dr-dscr rich-datascr">
 <table cellspacing="1" cellpadding="0" border="0" align="center" id="editRamo:dataScroll_table" class="dr-dscr-t rich-dtascroller-table">
 </table>
 </div>
 </form>
</div>

This is the snippet once it's been dragged into the successMessages div, i've cut it trying to just reflect what's happening, apparentrly the j_id1 and j_id5 are created by the outputPanels as placeholders for when the content is actually ment to be rendered..... whenever there a message.

<div id="main">
 <span id="j_id1"/>
 <span id="j_id5">
 <div class="message" id="successMessages" style="background-image: none; background-color: rgb(255, 255, 204);">
 <img class="icon" alt="" src="/midas-web/images/iconInformation.gif"/>Ramo se agregÃƒÂƒÃ‚Â³ exitosamente.
 <form enctype="application/x-www-form-urlencoded" action="/midas-web/ramos.html" method="post" name="editRamo" id="editRamo" target="">
 <input type="submit" .../>
 <input type="submit" .../>
 <table class="scrollerTable table" style="margin-top: 10px;" id="editRamo:ramoes">
 </table>
 <div align="center" style="" id="editRamo:dataScroll" class="dr-dscr rich-datascr">
 </div>
 </form>
 </div>
 </span>
</div>

4. Re: Odd outputPanel behaviour, as it doesn't close properly

ilya_shaikovsky Apr 7, 2009 4:50 AM (in response to wolfeng)

in the new snippet I can't see the parent for conditionally rendered element.
Actions
5. Re: Odd outputPanel behaviour, as it doesn't close properly

wolfeng Apr 7, 2009 5:17 PM (in response to wolfeng)

I'm guessing you are talking about the 'template' code. As nbelaevsky pointed out I removed the inline element to avoid having block elements nested within inline elements. The conditional rendering is right there as a 'rendered' property for each of my 2 outputPanels (successMessages, errorMessages), if that's what you are talking about.

It still behaves the same way it did before I made the change and I can't find a reason for the odd behaviour.

I hope this answers your comment ilya_shaikovsky, and thanks for the interest in helping out.

Thanks in advance for any further help,

.:Wolf:.
Actions
6. Re: Odd outputPanel behaviour, as it doesn't close properly

wolfeng Apr 7, 2009 6:48 PM (in response to wolfeng)

I've found something new that might provide enough info to pin point the problem, this behavior seems to happen only whenever there's a full screen refresh, hence only when it's triggered by the ajaxRerender.

Summarizing the case:
The messages and errors are stored and managed by a backing bean. Whenever there's a message/error to be displayed in a freshly loaded page, the div for these errors/messages 'eats' the page content, on the other hand if the message is stored during an ajax request, the outputPanels are refresh because of the ajaxRendered attribute and it's rendered correctly.

Any clues guys??

Thanks in advance,

.:Wolf:.
Actions
7. Re: Odd outputPanel behaviour, as it doesn't close properly

wolfeng Apr 7, 2009 6:50 PM (in response to wolfeng)

Needs edit:

hence only when it's NOT triggered by the ajaxRerender.

sorry :P

.:Wolf:.
Actions
8. Re: Odd outputPanel behaviour, as it doesn't close properly

ilya_shaikovsky Apr 8, 2009 7:39 AM (in response to wolfeng)

ok.. do you able to share complete sample with me by email or some file sharing server? (war with libs and java sources)
Actions
9. [SOLVED] Odd outputPanel behaviour, as it doesn't close prop

wolfeng Apr 8, 2009 1:08 PM (in response to wolfeng)
Hi again Ilya, since I found it only happened on non-ajax requests i dived a bit into the process that each ajax request goes through and well as you might well know, usually a4j uses a Filter to ensure xml well formedness. But this filter is only applied to ajax request unless otherwise configured.

The proyect i'm working on is kind of a big one, and though I don't find it has the best view architecture, it uses hand full of technologies including: jsp, facelets, MyFaces, SiteMesh to mention a few.

It seems that after all it's a well formedness problem and though i realize this problem should be solved from the root, ensuring well-formedness, I'm not quite in the position to rebuild the architecture, nor I've got the time, hehehe.

Anyways, to solve it I included the following configuration within web.xml

<filter> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> <init-param> <param-name>forceparser</param-name> <param-value>true</param-value> </init-param> </filter>

This forces the org.ajax4jsf.Filter to parse non-ajax requests as well.

I hope this is understandable, and I surely hope this helps other people which encounter odd behaviors ;)

Cheers!

.:Wolf:.
Actions
10. Re: Odd outputPanel behaviour, as it doesn't close properly

ilya_shaikovsky Apr 9, 2009 7:01 AM (in response to wolfeng)

it seems for me like workaround but not a complete solution.
Actions

Go to original post