CODEWITHSUNDEEP
ruby-on-railsturbohotwire
Jbur43
Jbur43

Reputation: 1312

Turbo frame not loading html when using src attribute

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.

Upvotes: 4

Views: 3302

Answers (1)

Daniel Batalla
Daniel Batalla

Reputation: 1264

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.

Upvotes: 2

Related Questions