Page url does not change on link click

Links
1

Hi , is this the default behavior ? it seems the links does not change the url.

I’ve handled this with something like this:

$(‘a’).on(‘click’, e => {
if (e.target.href != null) {
navigator.history.push(new URL(e.target.href));
}
});

does this makes any sense ?

best

2

Hi,

May I am hors sujet but why don’t you do:

$("a").on("click", e => {
  if (e.target.href != null) {
    Turbo.visit(e.target.href)
  }
})
1 Like
3

that will end in two turbo requests. instead you will need to use navigator to just change the url

Turbo.navigator.history.push(new URL(href));

but this does not makes sense at all to me, a link should change the url, that’s the normal behavior of links right ?

4

Hi,

You are right, I forgot the e.prevenDefault()

5

@Michelsongs - can you clarify, are you saying that when you have a link (like the following) on the page with Turbo enabled that the link does not change the URL:

<a href="/edit">Edit</a>

Or are you saying that using JavaScript to change URL does not work?

6

@tleish when links are within a frame when clicked they do not change the location of the browser url

7

Use target="_top"

<turbo-frame id="message_1" target="_top">
    <a href="/messages/1/permission">
      Change permissions
    </a>
</turbo-frame>

or data-turbo-frame="_top"

<turbo-frame id="message_1">
    <a href="/messages/1/permission" data-turbo-frame="_top">
      Change permissions
    </a>
</turbo-frame>

See: Targeting Navigation Into or Out of a Frame

8

hey @tleish thanks for your reply.
just one comment here, a target=_top would replace the entire page, so the feel is not as smooth like when you replace only one portion of the page. right ?

9

That is correct, it would update the body of the page. This is how links work within turbo-frames (similar to links inside an iFrame)

10

yeah, that’s my whole point, it would be great if links within a frame trigger a location change without the need to reload all the body. I mean, if this library tries to emulate an SPA behavior it should be doable out of the box. it seems to be a limitation more than a design choice.

11

I’ve found that this stimulus controller does the trick turbo_frame_history_controller.ts · GitHub

1 Like