AEM sightly: redirect to new page on button click | Community
Skip to main content
Siva_Sogalapalli
Community Advisor
Siva_SogalapalliCommunity Advisor
Community Advisor
September 1, 2016
Solved

AEM sightly: redirect to new page on button click

  • September 1, 2016
  • 8 replies
  • 7503 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by antoniom5495929

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" />

8 replies

antoniom5495929
antoniom5495929
Level 7
September 1, 2016

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
smacdonald2008
Level 10
September 1, 2016

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-apart-from-meta-command. Hope this helps.

Feike_Visser1
Adobe Employee
Feike_Visser1Adobe Employee
Adobe Employee
September 1, 2016

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
smacdonald2008
Level 10
September 1, 2016

Thxs Feike

Siva_Sogalapalli
Community Advisor
Siva_SogalapalliCommunity AdvisorAuthor
Community Advisor
September 2, 2016

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
Adobe Employee
Feike_Visser1Adobe Employee
Adobe Employee
September 2, 2016

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

Did you try with an http:// prefix?

Siva_Sogalapalli
Community Advisor
Siva_SogalapalliCommunity AdvisorAuthor
Community Advisor
September 2, 2016

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
antoniom5495929Accepted solution
Level 7
September 2, 2016

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" />

Terms & ConditionsAccessibility statement

Loading footer...