My link is opening in a new page instead of my turbo-frame

1

I have a page with a list of results.

If I make the results links and set the data-turbo-frame to the turbo-frame that I have, when I click the link, it simply opens the link as a new page. NOT as part of my current page in the specified turbo-frame.

If I make the results buttons and as a result of clicking the button, my javascript sets the src of the turbo-frame. It works. Sort of. It messes up my browser back and reload buttons.

What might I be doing wrong such that the links are not working?
I am new to this so forgive me if I didnt provide enough information. I just dont understand why specifying the turbo-frame in the link doesnt work when setting the src does.

Thanks!

2

Hey, Johno! Could you show your code example how do you do?

3

I found part of my problem. My link was not inside my turbo-frame. But I still have problems.

Before I add code, here is what I am trying to achieve:
User starts on my main page and clicks ‘See Results’. This goes to my results page.
The results page is split in 2 sections: Left is results. Right is detail (blank at first).
When user clicks on a result, the detail is filled in.
At this point, if the user clicks the browser’s back button, I want the user to see the results page with a black section on the right. But it is actually taking me back to my main page.
Or if the user hits the browser’s reload button, I want my results page to load with the details still filled in on the right.

My original problem was that my link was not in the turbo-frame whose data I wanted filled in. So now I have a click event handler that prevents the link from loading a new page. Instead, it sets the src attribute of my turbo-frame. That works great. But it still goes back to the main page if the user clicks the back button.

When I click the back button, I see a turbo event that has a turbo object in the history.state. But that does not appear to do anything. Is there a way to add to that state or some other way to say: I only want the turbo-frame to go back (in this case to an empty frame).

I thought this was one of the benefits of using turbo-frames (allowing your page to act like an SPA). But I don’t seem to be able to get it to work properly.

4

try to add to the link that you use for loading result in right side this html attirbute
data-turbo-action="advance"

5

Here is my stimulus action to catch the link click:
showResultDetail(evt) {
evt.preventDefault(); // Prevent the default behavior of the link
let target = $(evt.target)
let myHref = target.attr(‘href’);
evt.target.src = myHref + ‘&data-turbo-action=advance’
}

I also tried that last line with quotes around advance. Same result when I click the back button.

6

but why would you need a stimulus action to catch this?
I thought you use turbo-frames, then no need to write all of this

could you share me your html code where there is a link that you click?

7

I cannot share my link as there are privacy issues. But the reason I need the action (or it could be a regular js event) is because, as I understand it, turbo links need to be inside the frame it is targeting. And the results and the details are separate frames. In fact, results are not in a turbo frame at the moment.

8

This is the oversimplified version of the page

<div style=“display: flex;”>
	<div style=“width: 50%”>
		<a href=“mypage.com/1”>Result1</a>
		<a href=“mypage.com/2”>Result2</a>
		<a href=“mypage.com/3”>Result3</a>
		<a href=“mypage.com/4”>Result4</a>
	</div>
	<div style=“width: 50%”>
		<turbo-frame id=“details”></turbo-frame> 	</div>
</div>

I have tried the links with data-turbo-frame=“details” and data-frame=“details” with varying but unsuccessful results.

9

Weird, it should be okay if you use it like

<div style=“display: flex;”>
	<div style=“width: 50%”>
		<a href=“mypage.com/1" data-turbo-frame="details">Result1</a>
		<a href=“mypage.com/2”>Result2</a>
		<a href=“mypage.com/3”>Result3</a>
		<a href=“mypage.com/4”>Result4</a>
	</div>
	<div style=“width: 50%”>
		<turbo-frame id=“details”></turbo-frame> 	</div>
</div>

in such variant link Result1 should return the response of mypage.com/1 into turbo-frame details. But, you should be confident that in this response you also see turbo-frame details as a part of it.

UPD:

and if you add to link data-turbo-action="advance" like

<a href=“mypage.com/1" data-turbo-frame="details" data-turbo-action="advance">Result1</a>

then back button would work as you want, if I understand you right

10

When I define the link as you have it, the link simply opens as a new page. It leaves the current page instead of loading the frame on the current page. An there are no turbo events fired at any time.

I have switched back to using js to set the source. I am using pushstate to keep my history. Some of the links on the page I had to convert to things that looked like links so that turbo wouldnt do unexpected things.

It is a little disappointing. But I have it mostly working now.

11

Were you every able to get this working using the data-turbo-frame attribute? I’m running into the same situation (my links are opening as full page loads), and I believe my code is essentially the same structure as @vkalach had in his example.

12

I was not. We kept the javascript that sets the src and fixed our history and reload errors manually.