Right way to update a turbo-frame and an area outside of turbo-frame with one turbo-frame response

1

Hi together,

I am actually not clear, if I’m on the right way, how I want to solve the following situation:

Lets say, I have a sidebar, a headerbar and a main view.

The sidebar and the main view are each in an own frame, lets say #sidebar and #mainwrapper . The sidebar has property target=mainwrapper, so the clicks on the sidebar leads to load data into the mainwrapper.

In the headerbar there are several controls, like a link to the profile, another menu, a search and also the title and breadcrumbs.

So when the link in the sidebar is clicked, the mainwrapper loads its new content. Within the content there might be also a new title and breadcrumbs for the chosen link, but it is not used, as it is not part of the requested turbo-frame.

So the original title/breadcrumbs are left as they are.

What would be the right approach to update the title and breadcrumbs from data retrieved from the response, which replaced the mainwrapper turbo-frame?

Many thanks to you!

Best
Philipp

2

AFAIK you can add turbo streams inside the code returned in the frame, so you could use one to update the breadcrumb.

However, you also want to change title and other things too, maybe a turbo frame is not the right approach and you should just navigate to a new page instead?

If you go that way, you could use data-turbo-permanent to preserve the state of some elements

3

Hi, that was was I expected and tried, but without success.
Perhaps I tried it wrong, but for several tests it didn’t work, and as I didn’t find any information about that, my assumption was, it isn’t designed to work like that.

However, I created a stimulus workaround to refresh the outside frame with new contents from inside the other frame response.

Thanks so far
Philipp

1 Like
4

ArticlesController Create action :

  def create
    @article = Article.new(article_params)
    @article.user = current_user

    respond_to do |format|
      if @article.save
        format.turbo_stream
        format.html { redirect_to articles_url, notice: 'Article was successfully created.' }
      else
        format.turbo_stream { render turbo_stream: turbo_stream.replace('new_article', partial: "articles/form", locals: { article: @article}) }
        format.html { render :new }
      end
    end
  end

The view :

create.turbo_stream.erb

<!-- Show a new flash message -->
<%= turbo_stream.replace "flash", partial: 'shared/flash_item', locals: { message: 'Post was successfully created', color: 'green' } %>

<!-- Refresh preview list -->
<%= turbo_stream.prepend "post_preview_list", partial: 'posts/preview', locals: { post: @post } %>

<!-- Reset form -->
<%= turbo_stream.replace "new_post", partial: 'posts/form', locals: { post: Post.new } %>

Maybe that code can help you.