You need to sign in to do that
Don't have an account?
Andries.Neyens
CommandLink with html inside does weird
I you try out the following simple example:
<apex:page controller="Bug" showChat="false" sidebar="false" showHeader="false" docType="html-5.0" standardStylesheets="false"> <apex:form > <apex:actionFunction name="fetchList" reRender="pnlResult" action="{!FetchList}" /> <apex:outputPanel id="pnlResult" > <apex:repeat value="{!JustAList}" var="word"> <apex:commandLink > <h1>Header</h1> <p>{!word}</p> </apex:commandLink> </apex:repeat> </apex:outputPanel> </apex:form> <script> window.setTimeout(fetchList(), 5000); </script> </apex:page>
public with sharing class Bug { public List<String> JustAList{ get; set;} public PageReference FetchList() { if (this.JustAList == null) this.JustAList = new List<String>{'Is','this','a','bug','?'}; return null; } }
And view the rendered source, something weird is going on:
<span xmlns="http://www.w3.org/1999/xhtml" id="j_id0:j_id1:pnlResult"><script type="text/javascript" language="Javascript">//<![CDATA[ function dpf(f) {var adp = f.adp;if (adp != null) {for (var i = 0;i < adp.length;i++) {adp[i].parentNode.removeChild(adp[i]);}}};function apf(f, pvp) {var adp = new Array();f.adp = adp;var ps = pvp.split(',');for (var i = 0,ii = 0;i < ps.length;i++,ii++) {var p = document.createElement("input");p.type = "hidden";p.name = ps[i];p.value = ps[i + 1];f.appendChild(p);adp[ii] = p;i += 1;}};function jsfcljs(f, pvp, t) {apf(f, pvp);var ft = f.target;if (t) {f.target = t;}f.submit();f.target = ft;dpf(f);}; //]]> </script> <a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id0:j_id1'),'j_id0:j_id1:j_id3:0:j_id4,j_id0:j_id1:j_id3:0:j_id4','');}return false"></a><h1><a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id0:j_id1'),'j_id0:j_id1:j_id3:0:j_id4,j_id0:j_id1:j_id3:0:j_id4','');}return false">Header</a></h1> <p>Is</p> <a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id0:j_id1'),'j_id0:j_id1:j_id3:1:j_id4,j_id0:j_id1:j_id3:1:j_id4','');}return false"></a><h1><a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id0:j_id1'),'j_id0:j_id1:j_id3:1:j_id4,j_id0:j_id1:j_id3:1:j_id4','');}return false">Header</a></h1> <p>this</p> <a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id0:j_id1'),'j_id0:j_id1:j_id3:2:j_id4,j_id0:j_id1:j_id3:2:j_id4','');}return false"></a><h1><a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id0:j_id1'),'j_id0:j_id1:j_id3:2:j_id4,j_id0:j_id1:j_id3:2:j_id4','');}return false">Header</a></h1> <p>a</p> <a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id0:j_id1'),'j_id0:j_id1:j_id3:3:j_id4,j_id0:j_id1:j_id3:3:j_id4','');}return false"></a><h1><a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id0:j_id1'),'j_id0:j_id1:j_id3:3:j_id4,j_id0:j_id1:j_id3:3:j_id4','');}return false">Header</a></h1> <p>bug</p> <a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id0:j_id1'),'j_id0:j_id1:j_id3:4:j_id4,j_id0:j_id1:j_id3:4:j_id4','');}return false"></a><h1><a href="#" onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id0:j_id1'),'j_id0:j_id1:j_id3:4:j_id4,j_id0:j_id1:j_id3:4:j_id4','');}return false">Header</a></h1> <p>?</p></span>
It seems that the A tag is rendered twice, and the P tag is not included...
so the structure should be:
<a> <h1></h1> <p></p> </a>
but it renders it as:
<a></a> <h1><a></a></h1> <p><p>
Weird ?? bug ?? by desing?
What if you wrap the contents in a output panel ?
Nope,....
already tried a lot of things with outputpanels and spaces and ....
It is really the A tag with Ajax that gives problems, without it there is no problem at all