Hyperlink With The Same Page

Wappler General Bugs
1

OS info

  • Operating System : Windows 10.0.17763
  • Wappler Version : 1.9.9

Problem description

When using a hyperlink within the same page, the traditional method of doing it is to use <a href="#text">text</a> and then place an id=“text” within the page somewhere as the anchor for the link.

When I attempt this in Wappler, using both the hyperlink icon and hand-coding, it works within the preview of Wappler, but not when published. I have tried using Chome and Firefox on a Windows PC and Safari on iPad.

On the live server, in any browser, the coding looks right but the behavior is not. On a live server, when you click on the link, instead of going down further in the page, it attempts to open a new page named #test.
…

Steps to reproduce

  1. Create a hyperlink using the icon or hand-coding with #test as the link.
  2. Add an id=“test” to a div, paragraph, or heading.
  3. Preview in Wappler to test if it works
  4. Save or publish and test in browser.
2

Hello,
Please provide a link where we can check this.

3

Are you using the <a> tag for the anchor?

<a id="test"></a>

4

Hey Dave,
You can wrap the code in backticks: ` so that it gets rendered as code:

mycode here

As for the anchors, names shouldn’t be used. You need a link like #myelement and an element on the page with the id of id="myelement"

1 Like
5

Thanks Teodor that bugged me for ages :slight_smile:

Yes, indeed, will update my example. Just inquiring if Scott was using anchor tags. Thanks again!

:slight_smile:

1 Like
6

Why are you adding anchor links like that. If you just give any container/row/col a id you can reference it directly via that name as an anchor

7

Here is a test link, http://usofapageants.org/test.php

Thanks

8

I see on your page you are using url rewrite. Is that needed? If not please turn it off in the project settings and re-save your page.

9

Thanks @Teodor, that resolved the issue.

I had the url rewrite on because I planned on utilizing it on the front end for friendlier urls, however, if it conflicts with hyperlinks within the same page, I may need to rethink my process.

10

I’ll check your case tomorrow as I am not on my computer now.
Both should work fine together - but i will investigate what’s causing the issue.

11

Hi crew, unfortunately I’ve the same problem.
On my page I’ve this link:
<a class="btn" href="#home_foreground"><i class="arrow-pulse fas fa-angle-double-down p-2 mb-3 fa-lg"></i></a>

pointing to a section:
<section id="home_foreground">

I’m getting crazy because it’s so stupid code but doesn’t work.
Any Idea

PS: I’ve solved the problem using smooth scroll. Anyway I’d like to know why html anchor link doesn’t work properly

12

Hi @icalesca,

I will admit, I have not had the occasion to go back and revisit this since posting a few years ago.

I prioritized friendly urls through the url rewrite over linking within the same page and just created separate pages instead of linking within the same page.

I can try to look back into this later today if you still need this resolved. Let me know which server type you are using, nodejs or php so I can do it on the right server.

13

Hi Scott. Thank you but problem is fixed yet