1

I'm testing out the Turbo Frames and so far the frame works as described in the documentation.

// First Page
= turbo_frame_tag "main" do
  %p Testing Turbo Out
  link_to "Test it", other_page_path

// Other View
= turbo_frame_tag "main" do
  %p is this thing on?

Clicking the link on the first page replaces the content in that frame with what was in the other file.

However, if I ask the browser to do a full page reload, it reverts back to the original frame and doesn't display the one it was replaced with when the page is re-rendered.

If I want the full page to retain what it currently has if someone needs to hit the browser re-fresh, do I need to instead use turb streams?

I'm testing this out as a way to build a sidebar navigation that replaces the content area. So as this currently stands, if a full page browser refresh is requested, it reverts back to what the page displayed when first rendered.

Patrick Vellia
  • 399
  • 2
  • 9

1 Answers1

3

What you are asking is for the turbo-frame replacement to advance the browser history stack. This is done by this modification to the turbo-frame element:

%turbo-frame#main{ data: {turbo_action: :advance}}

I'm not using the turbo_frame_tag helper here. I imagine that you could, but I just looked at my own app, and this is how I had done it.

It's described here in the hotwire docs.

You should see the url change when you load the "other view".

Does this work for you?

Les Nightingill
  • 5,662
  • 1
  • 29
  • 32
  • okay, the HAML version doesn't seem to work at all--it complains of content it wraps is too deep indentation. Can't figure out how to define the action in the tag version. turbo:{action: "advance" or turbo_action: :advance don't seem to work when I refresh the page. – Patrick Vellia Aug 27 '22 at 05:45
  • if `%turbo_frame` gives you a haml indentation error, then find out where that indentation error is occurring. It should be just a matter of adjusting the indentation in your view. – Les Nightingill Aug 27 '22 at 12:56
  • Got it working! it's also %turbo-frame{} rather than %turbo_frame{}. Had to look at the rendered source code in the console of the browser to figure that out. The only thing now is I had to build the Turbo Frames into a layouts file for the main ones on the page--main, sidebar and content. yield is inside content. so if I did a browser refresh the "current" page like the edit individual object replaces the entire content area where yield is. Or do I have to build every page with the same layout Turbo Frames? – Patrick Vellia Aug 28 '22 at 00:01
  • I edited the typo in my answer, I couldn't let that mistake remain! A browser refresh will reload the whole page, Turbo doesn't participate in browser refresh, only button clicks and link clicks and form submissions. Would you consider designated this as the accepted answer? – Les Nightingill Aug 28 '22 at 00:21