1

I would like to implement a simple paging system with turbo

<h1> Title </h1>
<%= turbo_frame_tag "page" do %>
  current page : <%= params[:page] %>
<% end %>
<p> other content </p>
<%= turbo_frame_tag "next" do %>
  <a href="?page=<%= params[:page].to_i + 1 %>">
   Next page
  </a>
<% end %>

and GET ?page=1
return (the controller render a partial when params[:page] is present)

<%= turbo_frame_tag "page" do %>
  current page : <%= params[:page] %>
<% end %>

<%= turbo_frame_tag "next" do %>
  <a href="?page=<%= params[:page].to_i + 1 %>">
   Next page
  </a>
<% end %>

but only the #next element get reload,
and when I add target: "page" to the #next , only the first turbo-frame get reloaded

can we put multiple target to a turbo_frame_tag or whats the right way to do this

thank you in advance

stani gam
  • 57
  • 5

2 Answers2

1

It looks like turbo frame has been replaced just by only one frame (from response) at the time so far. If you want to replace multiple frames, you could use turbo stream.

So either you could move the paging next frame into the page frame and response only the page frame:

<%= turbo_frame_tag "page" do %>
  current page : <%= params[:page] %>

  <p> other content </p>
  
  <a href="?page=<%= params[:page].to_i + 1 %>">
    Next page
  </a>
<% end %>

Or use turbo-stream

<h1> Title </h1>
<%= turbo_frame_tag "page" do %>
  current page : <%= params[:page] %>
<% end %>
<p> other content </p>
<%= turbo_frame_tag "next" do %>
  <%= button_to "next", query_page_path(page: params[:page].to_i + 1) %>
<% end %>

# pages_controller
def query
  # query pages
  respond_to do |format|
    format.turbo_stream { }
  end
end

# pages/query.turbo_stream.erb
<%= turbo_stream.replace "page" %>
<% end %>

<%= turbo_stream.replace "next" %>
<% end %>

reference: https://github.com/hotwired/turbo/issues/56

Lam Phan
  • 3,405
  • 2
  • 9
  • 20
0
<%= turbo_frame_tag "page", target "next" do %> 
current page 
<%= params[page] %> 
<% end %> 
<%= turbo_frame_tag "next" do %> 
<a href="?page=<%= params[page].to_i + 1 %>">Next page</a> 
<% end %>
manibi101
  • 57
  • 1