+ Start a Discussion

Problem with <apex:outputText> tag?

Good day,


I'm working with dynamic hierarchy tree whereby I need to put a <div> or </div> in separate <apex:outputText> tags depend on the respective node type (parent, child, etc). I write the render to decide when to have a <div> and when there is a need for </div>. The collapse and expand feature work fine, but there is always a warning message display at the browser the first time I load the page saying that <div> should be matched with a </div>. I checked the source of the web page and confirmed that each <div> has a matched </div>.


Below is partial of my code:

<apex:outputText rendered="{!IF(OR(pos.nodeType=='start',pos.nodeType=='parent'),true,false)}">
             <div id='{!pos.nodeId}'>


<!-- Data population in between to populate the child node to the parent node -->

<apex:outputText rendered="{!IF(OR(pos.nodeType=='end',pos.nodeType=='child_end'),true,false)}">



After encountered with the warning message, I try to simplify the code as follows and found that the warning message will definitely show at browser if there is only <div> present within <apex:outputText></apex:outputText> and no </div> is found. But I couldn't have </div> put at same occurence to ensure that  the collapsible feature is working. Is this the known issue in Salesforce Visualforce page? And is there any way we could turn off this warning message by coding?


<!-- This simplified code below will give warning message. I understand in this case we don't need to use the <apex:outputText> tag. My intention is to simulate the scenario -->

<apex:outputText rendered="true">



<apex:outputText rendered="true">




Best Answer chosen by Admin (Salesforce Developers) 

While you do have one <div/> for every <div>, this still isn't valid XML. XML requires that tags be properly nested--that is, that if <A> is nested inside <B>, it must end before <B>. So, the following examples are both legitimate XML:



<B> <A> </A> </B>





  But the following is *not*:



<B> <A> </B> </A>

 If the A tag is opened inside the B tag, it must be closed inside the B tag as well.


Your case relies on breaking this rule (the <div> tag is opened within one parent and closed within another), which is what is causing the warning. SO I think you need a different strategy entirely for this case.


Off the top of my head, there's no terribly easy strategy. What you might need to do is have a static div, with copies of all possible contents both inside and outside. You can then use a dynamic "rendered" attribute on each of the contents to determine which of the ones should have their in-the-div copies rendered and which should have their out-of-the-div copies rendered.


 Hope this helps,