Sightly rendering problem - ul inside a data-sly-list, included via data-sly-resource, generated unwanted markup elements.

[dorianhallward]

I am seeing some unexpected markup generated from 2 sightly files.

The Sightly file that includes data-sly-resource and the included Sightly file render ok, until a <ul> element is appears in the included resource markup.  After that, repeated unwanted <a> markup elements are generated that include nothing but whitespace.

The approach is as follows, authors store the path to a number of pages to be included dynamically.  The contents of a parsys on each is the target of the data-sly-resource, e.g. /content/help/page1/jcr:content/par.html.

A snippet of the 'parent' Sightly file is as follows:
<!-- /* help points to my wcm use backing file */ -->
 

<div class="help-category-panel"> <ul class="help-category-list" data-sly-list.category="${help.pages}"> <li class="help-category-item"> <a class="help-category-link" ="${['#', category.escapedId] @ join = ''}"> <div data-sly-resource="${category['target']}" data-sly-unwrap></div> </a> </li> </ul> </div>

A snippet of the 'child' Sightly file is as follows:

<!-- /* helpCategory points to my wcm use backing file */ --> <span class="${['help-category-icon', helpCategory.iconClass] @ join = ' '}"></span> <p class="help-category-name">${helpCategory.label}</p> <div class="help-article-snippets" id="${helpCategory.escapedId}"> <!-- including this ul results in unexpected markup --> <ul class="help-article-snippet-list" data-sly-list.article="${helpCategory.articles}"> <li class="help-article-snippet-item"> <a href="#" class="help-article-snippet-link"> <h4 class="help-article-snippet-title">${article['snippetTitle']}</h4> <p class="help-article-snippet-text"> ${article['snippetSummary']} </p> </a> </li> </ul> </div>

A snippet of the generated markup follows; I get an unwanted <a> element - only containing whitespace - before the <a> I actually want (inside the <div class="help-category"> added by Sightly).

<li class="help-category-item"> <a class="help-category-link " href="#_content_help_page1"> </a><div class="help-category"><a class="help-category-link " href="#_content_help_page1"> <span class="help-category-icon icon-first"></span> <p class="help-category-name">Help Category 1</p> </a><div class="help-article-snippets is-hidden" id="_content_help_page1"><a class="help-category-link " href="#_content_help_page1">

[leeasling]

I guess I don't understand how that <a> tag is unwanted when you've specifically included it in your component?

Also, the code you pasted is invalid.

<a class="help-category-link" ="${['#', category.escapedId] @ join = ''}">

Should that be "href="?

[dorianhallward]

Hi, thanks for the reply and help @leeasling.

Yes, apologies in editing my snippet lines (as well as missing quotes in the join clause, correction, the single quotes in the join clause are there - they just look like double quotes in my forum post) I didn't copy the href, should have been more like,

<a class="help-category-link" href="${['#', category.escapedId] @ join = ''}">

Looking at the page again today using Google Chrome's inspector, the additional unwanted <a> shows in the DOM but I've realised it's not there in the raw HTML.  So it looks like the Sightly markup is actually fine and something client-side is manipulating the markup after it's been served. 

[dorianhallward]

UPDATE Now I'm very confused! : turning on/off javascript in the browser results in different markup in the DOM, including inclusion/ exclusion of the additional div (<div class="help-category">) added by AEM.  (This additional div is in the raw HTML but not in the DOM when javascript is turned off).

So presumably it is Sightly doing some client-side manipulation once the markup has been delivered to the browser. 

The raw (desired) html:

<ul class="help-category-list"> <li class="help-category-item"> <a class="help-category-link&#x20;is-selected" href="#_content_help_page1"> <div class="help-category"> <span class="help-category-icon&#x20;icon-first"></span> <p class="help-category-name">Help Page 1</p> <div class="help-article-snippets" id="_content_help_page1"> <!-- further markup... -->

Versus the DOM (unwanted additional <a>):

<ul class="help-category-list"> <li class="help-category-item"> <a class="help-category-link is-selected" href="#_content_help_page1"> <!-- note lots of whitespace !? --> </a><div class="help-category"><a class="help-category-link is-selected" href="#_content_help_page1"> <span class="help-category-icon icon-first"></span> <p class="help-category-name">Help Page 1</p> </a><div class="help-article-snippets" id="_content_help_page1"> <!-- further markup... -->

I mentioned the <ul> in the subject line of this post as the problem (of the unwanted inital <a>) doesn't appear when the contents of the included Sightly does not include the nested <ul> in the markup.

[Feike_Visser1 · Accepted solution]

First of all Sightly is pure server-side, no client-side at all...

Are you testing this on author or publish? If on author can you add ?wcmmode=disabled to your url to switch off all author-js things.

[dorianhallward]

Thanks your help @Feike.

Yes, I realise Sightly is server-side.  

This is probably to do with me producing bad markup that is then automatically corrected by the browser:  I have an anchor with lots of html elements inside it and presumably at some point Chromium decides that's malformed html and inserts additional closing tags producing unexpected result.