AEM sightly: redirect to new page on button click

[Siva_Sogalapalli]

Hi All,

I'm trying to a contact us component. It will provide the button, when the user clicks on the button, he will be redirected to the contact us page. I've added input button and trying to redirect to contact us page when the user clicks on the button, but it's not redirecting to the new page.

Sample code:

<div data-sly-test.myPath="/content/geometrixx/en/contactus" data-sly-unwrap></div>

<input type="Submit" onclick="location.href='${myPath}'" value="Contact Us" />

Please correct me i'm wrong.

Thanks in Advance

[antoniom5495929]

You need to use the context:

${myPath @ context='uri'} or ${myPath @ context='scriptString'} just because it's in a javascript section.

Let me know. 

[smacdonald2008]

You can also look into using Java part of the component. See http://stackoverflow.com/questions/33252410/how-to-redirect-a-page-in-sightly-without-html-tags-apar.... Hope this helps.

[Feike_Visser1]

This should do the trick:

<sly data-sly-test.myPath="/content/geometrixx/en/contactus" />

<input type="Submit" onclick="location.href='${myPath @ context='scriptString'}'" value="Contact Us" />

[smacdonald2008]

Thxs Feike

[Siva_Sogalapalli]

Feike Visser wrote...

This should do the trick:

<sly data-sly-test.myPath="/content/geometrixx/en/contactus" />

<input type="Submit" onclick="location.href='${myPath @ context='scriptString'}'" value="Contact Us" />

Thanks Feike,

It works for Internal url. But the same thing is not working when I give external urls.

<sly data-sly-test.myPath="www.google.com" />

<input type="Submit" onclick="location.href='${myPath @ context='scriptString'}'" value="Contact Us" />

Please advise.

[Feike_Visser1]

What do you see in the generated HTML-source? Should be the same.

Did you try with an http:// prefix?

[Siva_Sogalapalli]

Hi Feike,

Thanks for your prompt response.

I see the correct url in the source code (onclick="location.href='www.google.com'" ), but when I click on the button it is redirecting to

http://localhost:4502/content/geometrixx/en/www.google.com

Note: I'm testing the component at http://localhost:4502/content/geometrixx/en/products.html

Please advise.

[antoniom5495929 · Accepted solution]

If you want to use an external url you have to put also the protocol.

This should be the trick:

<sly data-sly-test.myPath="https://www.google.com" />

<input type="Submit" onclick="location.href='${myPath @ context='scriptString'}'" value="Contact Us" />