Turbo frame not loading html when using src attribute

Question

I am trying to load html into a turbo frame using the src attribute, but when I load the page the frame exists on I don't see a network request being issued to get the html.

This is the markup I have written on the rendered page:

<%= turbo_frame_tag "new_message", src: new_room_message_path(@room), target: "_top" do %>
  <div>
    placeholder
  </div>
<% end %>

And the matching turbo frame in the new_room_message_path view:

<h1>New Message</h1>
<%= turbo_frame_tag "new_message", target: "_top" do %>
  <%= form_with(model: [ @message.room, @message ]) do |form| %>
    <div class="field">
      <%= form.text_field :content %>
      <%= form.submit "send" %>
    </div>
  <% end %>
<% end %>

When I visit the new_room_message_path in the browser the route and html look good.

application.js contents:

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"

I am running this on rails 7.0.2.3. I have the gem "turbo-rails" installed. I see turbo being imported in the application.js import "@hotwired/turbo-rails".

Any tips on config or code changes I should try or am outright missing? If there's any more context that would be helpful, im happy to update the question.

Any errors in the console? Check to make sure that you have Turbo actually loaded in the browser: `window.Turbo` — Alex, Mar 26 '22 at 23:37
@Jbur43 Have you sorted this out? I am having the very same issue right now — Daniel Batalla, Apr 11 '22 at 07:14
@DanielBatalla I think my issue ended up being that I didn't specify a bundling option for javascript, I built a new app using the command `rails new pizzawhat -j esbuild --css tailwind` and it worked after that — Jbur43, Apr 12 '22 at 19:10

score 2 · Answer 1 · answered Apr 13 '22 at 15:46

I had the very same problem (with almost the same content in applications.js file) when upgrading from RoR v6.1 with webpacker to RoR v7.0 with importmap.

When I installed importmap-rails gem, I didn't make a step that is stated in the README of the gem:

./bin/rails importmap:install

This task will create all the files and folders required by importmap to run properly in the Rails project, including config/impormap.rb. In this file, I added the following content:

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

After adding that, I restarted the server and everything worked perfectly.

Turbo frame not loading html when using src attribute

1 Answers1