You need to sign in to do that
Don't have an account?
Visualforce inserting extra li tags
Let's say I have the following visualforce markup:
<ol type="1" style="list-style-type: decimal;"> <apex:actionRegion immediate="true"> <apex:outputPanel rendered="{!showLi}" id="liContainer"> <li style="list-style-type: decimal;"> html here </li> </apex:outputPanel> <li> more html </li> </apex:actionRegion> </ol>
Now let's say I add in some apex that simply returns a null page reference when clicking a button. The page is rerendered but includes an additional tag like so:
<ol type="1" style="list-style-type: decimal;"> <apex:actionRegion immediate="true"> <li style="list-style-position: outside; list-style-image: none; list-style-type: none;"> <apex:outputPanel rendered="{!showLi}" id="liContainer"> <li style="list-style-type: decimal;"> html here </li> </apex:outputPanel> </li> <li> more html </li> </apex:actionRegion> </ol>
As one might suspect, this is a problem because it changes the numbering of the list items and indentation. Does anyone have any idea why Visualforce would (intentionally or unintentionally) insert seemingly random html elements?
Thanks!
And it only gets better... If I add layout="block" to the outputPanel, it adds another seemingly random ul tag:
<ol type="1" style="list-style-type: decimal;"> <apex:actionRegion immediate="true"> <li style="list-style-position: outside; list-style-image: none; list-style-type: none;"> <apex:outputPanel rendered="{!showLi}" id="liContainer" layout="block"> <ul class="noindent"> <li style="list-style-type: decimal;"> html here </li> </ul> </apex:outputPanel> </li> <li> more html </li> </apex:actionRegion> </ol>
Hey
I think it's getting confused because in
the first case: You're nesting a <span> within a <ol> so it thinks you made a mistake
the second case: You're nesting a <div> inside and <ol> and then an <li> inside the <div>. It thinks you forgot the parent and child tags and inserts them for you.
Perhaps something like the <apex:dataList> would be of more help as mixing Salesforce and pure HTML in this case seems to be a bit erroneous?
Cheers,
Wes
Wesnolte,
Are you saying that Visualforce is inserting the html or the browser? I have tested in multiple browsers and it still seems to do the same thing. Why would Visualforce even care about the html on the page? That seems a bit overpowering.
With a datatable, I would have to specify a value and a var, which is not necessary in my case. There is no vf component that corresponds to an li tag in html, otherwise, I would have used it.
I am going to open a ticket with Salesforce and see what they make of it.
Thanks.
A ticket might be a good idea:) Salesforce itself is generating that extra code, either through mistake, or for some specific reason, perhaps web-standard conformity. I'm interested in what they'd tell you as I've had to use li tags myself at times, but never in the way you've combined them with visualforce.
Good luck,
Wes
For any Salesforce people interested in seeing this problem in action, use the code below. Push the command button twice to see the problem.
Visualforce
<apex:page controller="sfTest" action="{!onload}"> <apex:form id="test"> <ol> <apex:outputPanel rendered="{!showOp}" id="op"> <li> This item should be #{!one}. </li> </apex:outputPanel> <li> This item should be #{!two}. </li> <li> This item should be #{!three}. </li> </ol> <apex:commandButton action="{!go}" reRender="test" value="show/hide outputPanel" /> </apex:form> </apex:page>
Apex
public class sfTest { public void onload() { showOp = true; one = 1; two = 2; three = 3; } public PageReference go() { showOp = !showOp; if (showOp) { two = 2; three = 3; } else { two = 1; three = 2; } return null; } public boolean showOp { get; set; } public integer one { get; set; } public integer two { get; set; } public integer three { get; set; } }