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

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.


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

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.

try to add to the link that you use for loading result in right side this html attirbute

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

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

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?

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.

This is the oversimplified version of the page

<div style=“display: flex;”>
	<div style=“width: 50%”>
		<a href=“”>Result1</a>
		<a href=“”>Result2</a>
		<a href=“”>Result3</a>
		<a href=“”>Result4</a>
	<div style=“width: 50%”>
		<turbo-frame id=“details”></turbo-frame> 	</div>

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

Weird, it should be okay if you use it like

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

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


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

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

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

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.