Struggling with a simple Turbostream update for sidebar navigation

1

The turbo trigger link is just refreshing the page for my user show view.

I tried turbo_stream.replace & turbo_stream.update also pointed to the frame rightmaincontent but all that’s happening is reloading the user show view which is the fallback part of the dance_journal method.

Am I overlooking something? All the tutorials and ChatGPT I’m seeing seems to show I’m setting this up correctly.

Also, I do have turbo frames setup for pagination on some other pages on my site so I’m sure that I have turbo installed correctly.

On my user show view I have a sidebar rendered via a partial (layouts/sidebar_content):

   <div class="sidebar-left">
      <%= render 'layouts/sidebar_content', user: @user %>
    </div>

Also on the user show view I have a section wrapped in the turbo frame rightmaincontent:

<%= turbo_frame_tag 'rightmaincontent' do %>
<div class="main-content">
Main Content Divs
</div>
<% end %>

Inside of the sidebar_content partial I have a link to the Dance Journal path:

 <%= link_to 'Your Dance Journal', dance_journal_user_path(@user), data: { turbo_frame: 'rightmaincontent' }, class: 'nav-link' %>

My dance journal partial is simple and as follows:

<div>
  <h3>Your Dance Journal</h3>
  <div class="container text-bg-light p-3 rounded">
    <h3>Your dance journal</h3>
    <div class="fs-6 fw-light">Keep track of your dance videos all in one place!</div>
    <br/>
    <p>Coming soon!</p>
  </div>
  <br>
</div>

And inside of my users controller I have a dance journal method with the following:

  def dance_journal
    @user = User.friendly.find(params[:id])
  
    respond_to do |format|
      format.turbo_stream do
        render turbo_stream: turbo_stream.update('rightmaincontent',
                                                partial: 'dance_journal',
                                                locals: { user: @user })
      end
      format.html { redirect_to user_path(@user) } # Fallback for non-Turbo Stream requests
    end
  end

I was able to find that if I have the the link inside of the turbo frame tag ‘rightmaintcontent’ the page updates as expected. So now I’m trying to figure out how I can trigger the same behaviour from a link that outside of the turbo frame tag in the sidebar navigation. if you have any insights around that I’d appreciate it.

Is a turbo stream better, do turbo stream actions need to target div ids instead of the turbo frames?

1 Like
2

Your link is correct and it is navigating the turbo frame but you are confusing turbo-frames with turbo streams. If you want to respond with a turbo-stream than remove the data-turbo-frame from your link and replace it with a data-turbo-method to make it trigger a post request, and make sure your dance_journal route is also expecting a post request.
This is one way to fix your issue and leaving the current controller setup.
The other way is to just use turbo frames which would mean your dance_journal method must have a matching view dance_journal.html.erb and inside of the view you would add a matching turbo-frame-tag

<%= turbo_frame_tag 'rightmaincontent' do %>
  <%= render "dance_journal", user: @user %>
<% end %>
3

I’m having a similar problem and I think all I need to do is to add a turbo frame for my navigation sidebar, but is it possible to have a single link target multiple turbo frames? I’m already using one for the main content (a static image gallery and caption).

I’d just use the default turbo drive and eschew turbo frames altogether, but my use case is that I need to keep the scroll position of my sidebar nav.

4

You can’t have a link target multiple turbo frames. If you need to do that then it’s best to drop down to turbo stream updates.

If you ended up going with plain turbo drive, instead of a frame, try turning on morphing. If your sidebar doesn’t change, it should preserve its scroll position since it won’t update it.