Which template file extension provides support for Rails 7.1 and turbo-frames?

82 Views Asked by At

I can't seem to get the correct format of data returned to the browser for turbo processing.

app/views/the_form.html.erb

<%= turbo_frame_tag "dog_quick_search" do %>
    <% form_tag quick_search_via_form_dogs_path(format: :turbo_stream) do %>
    blah
    blah
    <%= submit_tag('Go', class: 'btn-warning') %>
<% end %>

app/controllers/dogs_controller.rb

def quick_search_via_form
    do stuff...
    render 'xxxx'
end

app/views/dogs/xxxx.....

<%= turbo_frame_tag "dog_quick_search" do %>
  Bring back ujs
<% end %>

Based upon the file extensions of xxxx I get:

xxxx.html.erb:

ActionView::MissingTemplate (Missing template dogs/xxxx, application/xxxx with {:locale=>[:en], :formats=>[:turbo_stream], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :jbuilder]}.

xxx.erb:

The contents of xxxx.erb replace the entire webpage in the browser

xxx.turbo-stream.html.erb

ActionView::MissingTemplate (Missing template dogs/xxxx, application/xxxx with {:locale=>[:en], :formats=>[:turbo_stream], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :jbuilder]}.

From reading around Turbo it seemed that all I had to do was have matching turbo-frame id in source and rendered template, with an extension of the usual .html.erb and it would replace the turbo-frame with the content of the one returned. As I'm unable to return the .html.erb template I'm wondering if that's the issue but can't see how to stop the error regarding not being able to find that particular template.

Update:

By adding an explicit format to the render instruction it works:

render 'xxxx' formats: :html

I don't understand this to be honest - if the template has the extension .html.erb surely that tells rails that it's an html template as it used to do in previous rails versions?

2

There are 2 best solutions below

2
Alex On

all I had to do was have matching turbo-frame id

That's exactly what you need to do, but you probably want to keep your form outside of the frame:

# app/views/the_form.html.erb

# don't add `format: :turbo_stream`
<%= form_with url: quick_search_via_form_dogs_path, method: :get,
  data: {turbo_frame: :dog_quick_search} do |f| %>

  <%= f.text_field :search %>
  <%= f.submit "Go", class: "btn-warning" %>
<% end %>

<%= turbo_frame_tag "dog_quick_search", data: {turbo_action: :advance} %>
# app/controllers/dogs_controller.rb

def quick_search_via_form
  render "search"
end
# app/views/dogs/search.html.erb

<%= turbo_frame_tag "dog_quick_search" do %>
  <%= params[:search] %>
<% end %>
0
Houdi On

Solved.

The issue was determined to be that the form submit wasn't being intercepted by Turbo.

This was because bootstrap needed to be pinned by running

$ bin/importmap pin bootstrap

Now the form is being submitted as a TURBO-STREAM. The tag content isn't being replaced mind but thats an issue for tomorrow!