JamesNB JamesNB - 3 months ago 28
Java Question

AEM <a href> not working when using JavaScript to concatenate string with currentPage.path

I'm creating a project in Adobe Experience Manager and have run into problems in the implementation of my language switching component. The component is supposed allow the user to click on a link and have the language of the page change. For example, if they are on the English page

/content/myproject/en/home.html
and they click it, they are supposed to end up on
/content/myproject/fr_ca/home.html
.

As part of getting it up and running, I was trying to concatenate
currentPage.path
and
"/profile.html"
so that I could at least get the component to register some change to the string in the tag.

From the English home.html page,
currentPage.path
produces the string
"/content/myproject/en/home"
. Concatenating it with
/profile.html
should produce the string
"/content/myproject/en/home/profile.html"
which it does if I use Sightly to do something like
<p>${langinfo.goToPage}</p>
.

However, if I try this:
<a href="${langinfo.goToPage}"></a>
the component will show a blank anchor tag. It will also blank anything I've written in between the two anchor tags.

So far I've tried returning a string I've written out by hand
"/content/myproject/en/home/profile.html"
as the goToPage value and it works in the anchor tag. Also, if I only return
currentPage.path
it works. It refuses to work like this
<a href="It doesn't work here!">
if I try to concatenate but it will work like this:
<a>It works here!</a>
.

The best I can figure at this point is that currentPage.path is a Java String object that is being accessed by JavaScript and there are problems when JS tries to type it to a JavaScript string with
+
. It also doesn't work if I try to cast the statement as a string with either String(goToPage) or goToPage.toString(). It doesn't seem to matter when I cast it as a string. One blog I looked at seemed to hint that this was a problem with Rhino and that I should do a .toString() after the initial concatenation. That didn't work. Another post on stackOverflow seemed to point out that it could be a problem trying to concatenate a Java String object in JavaScript and pointed out that this should be taken into account but didn't go into how to deal with the issue.

I appending to a string isn't the intended end functionality of my component, but if I can't modify the string by concatenating, seems like I can hardly do a search and replace to change
/en/
to
/fr-ca/
. If anyone has a more elegant solution to my problem than what I'm attempting, that would be appreciated as much as a fix for what I'm working on.

I've pasted my code here (as suggested) and posted screenshots of my code to help.

Javascript:

use(function() {
var pageLang = currentPage.properties.get("jcr:language", "en");
var otherLangText;
var currPage = currentPage.name;
var currPagePath = currentPage.path;
var goPage;

if (pageLang == "fr_ca") {
otherLangText = "English";
goPage = "/content/myproject/en/index/home.html";
} else {
otherLangText = "Français";
goPage = "/content/myproject/fr-ca/home/home.html";
};


return {
otherLanguage: otherLangText,
goToPage: goPage
}


})


HTML:

<nav data-sly-use.langinfo="langcontact.js">
<ul class="lang-list-container">
<li class="lang-list-item"><a href="${langinfo.goToPage @ extension = 'html'}">${langinfo.otherLanguage}</a></li>
<li class="lang-list-item"><a href="/content/myproject/en/index/contact-us.html">Contact</a></li>
</ul>
</nav>


I'm pretty stumped here. What am I doing wrong?

Answer

The line <li class="lang-list-item"><a href="${langinfo.goToPage @ extension = 'html'}">${langinfo.otherLanguage}</a></li>

should actually be -

<li class="lang-list-item"><a href="${langinfo.goToPage}">${langinfo.otherLanguage}</a></li>

What you are trying to do is pass an object to object which will not work, in case you want to pass the extension to be used in JS you need to do that in the USE call. Refer to the samples in this blog.

Update -

You code works fine for me as long as the link is valid.

use(function() {
    var pageLang = currentPage.properties.get("jcr:language", "en");
    var otherLangText; 
    var currPage = currentPage.name;
    var currPagePath = currentPage.path;
    var goPage; 

    if (pageLang == "fr_ca") { 
        otherLangText = "English";
        goPage = currPagePath+"/profile.html";
    } else { 
        otherLangText = "Français"; 
        goPage = currPagePath+"/profile.html"; 
    };


    return {
        otherLanguage: otherLangText, 
        goToPage: goPage
    }


})

The only possible reason you are getting empty href is because your link is not valid and thus linkchecker is removing it. If you check on author instance you will see broken link symbol along with your link text.

Ideally you should fix the logic so that proper valid link is generated. On development you could disable the linkchecker and/orlink transformer to let all links work (even invalid ones | not recommended). The two services can be checked in http://localhost:4502/system/console/configMgr by searching for - Day CQ Link Checker Service and Day CQ Link Checker Transformer

Comments