Warning of running Turbo script from the body, and content wrongly placed above the nav bar

Question

I can't figure out what is causing this. I have searched extensively on this site and elsewhere and can't find an instance of this same problem. This should be a simple blog as part of a Udemy course. However, any content added to the blog is also shown at the top of the page and a warning is in the console.

Here is the warning message in the dev console:

You are loading Turbo from a element inside the element. This is probably not what you meant to do!

Load your application’s JavaScript bundle inside the element instead. elements in are evaluated with each page change.

For more information, see: https://turbo.hotwired.dev/handbook/building#working-with-script-elements

—— Suppress this warning by adding a "data-turbo-suppress-warning" attribute to: Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

" />

<link rel="stylesheet" href="/assets/blogs-24c34aed3f27702e779f75c22507646d115e288bc601f6d2ff6ce647b3266cf6.css" media="all" data-turbolinks-track="reload">
<script src="/assets/application-7de8a6799950933f7cc2794beafb29c8479834d8b156ef8d6f7e76a652154488.js"

data-turbolinks-track="reload">

Here is the message from the Rails Server:

12:37:28 web.1 | Started GET "/blogs/my-blog-post-1" for ::1 at 2022-10-13 12:37:28 -0500 12:37:28 web.1 | Processing by BlogsController#show as TURBO_STREAM 12:37:28 web.1 | Parameters: {"id"=>"my-blog-post-1"} 12:37:28 web.1 | Blog Load (0.2ms) SELECT "blogs".* FROM "blogs" WHERE "blogs"."slug" = $1 LIMIT $2 [["slug", "my-blog-post-1"], ["LIMIT", 1]] 12:37:28 web.1 | ↳ app/controllers/blogs_controller.rb:74:in set_blog' 12:37:28 web.1 | User Load (0.1ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 1], ["LIMIT", 1]] 12:37:28 web.1 | ↳ app/controllers/concerns/current_user_concern.rb:5:in current_user' 12:37:28 web.1 | CACHE Blog Load (0.0ms) SELECT "blogs".* FROM "blogs" WHERE "blogs"."slug" = $1 LIMIT $2 [["slug", "my-blog-post-1"], ["LIMIT", 1]] 12:37:28 web.1 | ↳ app/controllers/blogs_controller.rb:14:in show' 12:37:28 web.1 | Comment Load (0.2ms) SELECT "comments".* FROM "comments" WHERE "comments"."commentable_type" = $1 AND "comments"."commentable_id" = $2 [["commentable_type", "Blog"], ["commentable_id", 1]] 12:37:28 web.1 | ↳ app/controllers/blogs_controller.rb:14:in show' 12:37:28 web.1 | ActionText::RichText Load (0.1ms) SELECT "action_text_rich_texts".* FROM "action_text_rich_texts" WHERE "action_text_rich_texts"."record_id" = $1 AND "action_text_rich_texts"."record_type" = $2 AND "action_text_rich_texts"."name" = $3 LIMIT $4 [["record_id", 1], ["record_type", "Blog"], ["name", "content"], ["LIMIT", 1]] 12:37:28 web.1 | ↳ app/controllers/blogs_controller.rb:17:in `show' 12:37:28 web.1 | Rendering layout layouts/blog.html.erb 12:37:28 web.1 |
Rendering blogs/show.html.erb within layouts/blog 12:37:28 web.1 |
Rendered /home/stuart/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/actiontext-7.0.4/app/views/action_text/contents/_content.html.erb within layouts/action_text/contents/_content (Duration: 0.4ms | Allocations: 374) 12:37:28 web.1 | Rendered comments/_comments.html.erb (Duration: 0.0ms | Allocations: 33) 12:37:28 web.1 | Rendered blogs/show.html.erb within layouts/blog (Duration: 1.0ms | Allocations: 710) 12:37:28 web.1 | Rendered /home/stuart/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/actiontext-7.0.4/app/views/action_text/contents/_content.html.erb within layouts/action_text/contents/_content (Duration: 0.3ms | Allocations: 334) 12:37:28 web.1 | Rendered shared/_blog_nav.html.erb (Duration: 0.2ms | Allocations: 196) 12:37:28 web.1 | Rendered shared/_blog_masthead.html.erb (Duration: 0.1ms | Allocations: 46) 12:37:28 web.1 | Rendered shared/_blog_sidebar.html.erb (Duration: 0.1ms | Allocations: 176) 12:37:28 web.1 | Rendered shared/_blog_footer.html.erb (Duration: 0.0ms | Allocations: 19) 12:37:28 web.1 | Rendered shared/_flash.html.erb (Duration: 0.9ms | Allocations: 876) 12:37:28 web.1 | Rendered shared/_flash_container.html.erb (Duration: 1.0ms | Allocations: 956) 12:37:28 web.1 | Rendered layout layouts/blog.html.erb (Duration: 7.8ms | Allocations: 9085) 12:37:28 web.1 | Completed 200 OK in 15ms (Views: 8.1ms | ActiveRecord: 0.6ms | Allocations: 13668) 12:37:28 web.1 |

Here is a screenshot of the offending page: https://i.sstatic.net/Xf2wv.jpg

Here is the blogs layout app/views/layouts/blog.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title><%= @page_title %></title>
    <%= csrf_meta_tags %>

    <meta name="keywords" content="<%= @seo_keywords %>" />

    <%= stylesheet_link_tag    'blogs', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>

    <%= render 'shared/blog_nav' %>
    <%= render 'shared/blog_masthead' %>

    <div class="container">

      <div class="row">

        <%= yield %>
        <%= render 'shared/blog_sidebar' %>
      </div>

      <%= render 'shared/blog_footer' %>
      <%= source_helper("blog") %>
      <%= render 'shared/flash_container' %>
    </div>
  </body>
</html>

Here is the blogs show page app/views/blogs/show.html.erb:

<div class="col-sm-8 blog-main">

  <h2><%= @blog.title %></h2>

  <%= link_to "Edit this blog", edit_blog_path(@blog) if logged_in?(:admin) %> 

  <p>
  <%= @blog.content %>

  <%= render partial: 'comments/comments', locals: {commentable: @blog} %>

</div>

Here is the blogs controller:

class BlogsController < ApplicationController
  before_action :set_blog, only: %i[ show edit update destroy toggle_status ]
  access all: [:show, :index], user: { except: [:destroy, :new, :create, :update, :edit, :toggle_status] }, admin: :all
  layout "blog"

  # GET /blogs or /blogs.json
  def index
    @blogs = Blog.page(params[:page]).per(5)
    @page_title = "My Portfolio Blog"
  end

  # GET /blogs/1 or /blogs/1.json
  def show
    @blog = Blog.includes(:comments).friendly.find(params[:id])
    @comment = Comment.new
    @page_title = @blog.title
    @seo_keywords = @blog.content
  end

  # GET /blogs/new
  def new
    @blog = Blog.new
  end

  # GET /blogs/1/edit
  def edit
  end

  # POST /blogs or /blogs.json
  def create
    @blog = Blog.new(blog_params)

    respond_to do |format|
      if @blog.save
        format.html { redirect_to blog_url(@blog), success: "Blog was successfully created." }
      else
        format.html { render :new, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /blogs/1 or /blogs/1.json
  def update
    respond_to do |format|
      if @blog.update(blog_params)
        format.html { redirect_to blog_url(@blog), success: "Blog was successfully updated." }
      else
        format.html { render :edit, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /blogs/1 or /blogs/1.json
  def destroy
    @blog.destroy

    respond_to do |format|
      format.html { redirect_to root_path, status: :see_other }
    end
  end

  def toggle_status
    if @blog.draft?
      @blog.published!
    elsif @blog.published?
      @blog.draft!
    end
    redirect_to blogs_url, success: 'Post status has been updated.'
  end

  private
    # Use callbacks to share common setup or constraints between actions.
  def set_blog
    @blog = Blog.friendly.find(params[:id])
  end

    # Only allow a list of trusted parameters through.
  def blog_params
    params.require(:blog).permit(:title, :content, :topic_id)
  end
end

And the model:

class Blog < ApplicationRecord
  enum status: { draft: 0, published: 1 }
  extend FriendlyId
  friendly_id :title, use: :slugged

  validates_presence_of :title, :content

  has_rich_text :content

  has_many :comments, as: :commentable, dependent: :destroy, counter_cache: :commentable_count

  belongs_to :topic

  def self.special_blogs
    all
  end

  def self.featured_blogs
    limit(2)
  end
end

App/views/action_text/contents/_content.html.erb:

<div class="trix-content">
  <%= yield %>
</div>

app/views/shared/_blog_footer.html.erb

<footer class="blog-footer">
  <p>
    <%= copyright_generator %>
  <p>
    <a href="#">Back to top</a>
  </p>
</footer>

app/views/shared/_blog_masthead.html.erb:

<div class="blog-header">
  <div class="container">
    <h1 class="blog-title">My Blog</h1>
    <p class="lead blog-description">An example blog template built with Bootstrap.</p>
    <%= link_to 'Write a New Blog', new_blog_path if logged_in?(:admin) %>
  </div>
</div>

app/views/shared/_blog_sidebar.html.erb

<div class="col-sm-3 offset-sm-1 blog-sidebar">
  <div class="sidebar-module sidebar-module-inset">
    <h4>About</h4>
    <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
  </div>
  <div class="sidebar-module">
  </div>
  <div class="sidebar-module">
    <h4>Elsewhere</h4>
    <ol class="list-unstyled social-links">
      <li><a href="https://github.com/DebakeDSP94"><%= fa_icon "github" %></a></li>
      <li><a href="https://twitter.com/StuartW64954805"><%= fa_icon "twitter" %></a></li>
      <li><a href="https://www.facebook.com/stuart.wilson.16568"><%= fa_icon "facebook" %></a></li>
      <li><a href="https://www.instagram.com/slw2014/"><%= fa_icon "instagram" %></a></li>
    
    </ol>
  </div>
</div>

app/views/shared/_blog_nav.html.erb:

<div class="blog-masthead">
  <div class="container">
    <nav class="nav blog-nav">
      <%= nav_helper 'nav-link', 'span' %>

      <%= login_helper 'nav-link' %>
    </nav>
  </div>
</div>

I am trying to use action_text/trix to have rich text content, and I'm not sure if that could be the source of the problem. Any help that might point me in the right direction would be greatly appreciated. Thank you.

Answer 1

I finally figured it out. It was this line:

meta name="keywords" content="<%= @seo_keywords %>" />

The problem arises from the use of the word "content". I previously had the blog table entry as "body" in the database. However, I was implementing the instructions for ActionText, and in their example, it uses "message.content", so I switched from blog.body to blog.content, thinking that the particular wording my be important for ActionText to work. That caused a conflict in the blogs controller where this line is included in the show controller:

@seo_keywords = @blog.content

This apparently caused the @blog.content to be rendered in the head of the HTML and it showed up at the top of the page. Removing the meta tag from the HTML immediately fixed it. I will change the database back to blog.body and I should be able to put that HTML line back in with no more errors.

Edit to add: I switched the blog table entry back to "body" and it still did the error when I added that meta tag back into the header. So, I'm just leaving that line of code out for now.

Edit to add: The root of the problem was the presence of the "=" in the erb causing the @seo_keywords to render. This was my fault for trusting the github content for the course that I'm doing. I copied and pasted it in.