function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Andries.NeyensAndries.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?

Avidev9Avidev9

What if you wrap the contents in a output panel ?

 

<apex:commandLink>
    <apex:outputPanel>
        <h1>Header</h1>
        <p>{!word}</p>
    </apex:outputPanel>
</apex:commandLink>

 

Andries.NeyensAndries.Neyens

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