如何在 Rails 7 中将 ruby 代码与 javascript 结合起来

Question

I need to combine ruby code with javascript, to show something which depends on the server's response.

app/views/posts/index.html.erb

<h1 class="text-center m-4 text-success">Posts</h1>
<div id="posts" data-controller="like" data-like-url-value="<%= like_posts_path %>">
    <div class="row">
        <% @posts.each do |post| %>
            <%= render post %>
        <% end %>
    </div>
</div>
<script>
    if(some condition){
       console.log("All Posts has been loaded successfully.")
    }
</script>

app/controllers/posts_controller.rb

def index
   @posts = Post.all.order(id: :desc)
   if @posts.length > 0
     session[:post] = true
   end
end

I have to use the index action session variable in the index template, I don't have any idea about how to combine ruby code with javascript.

Answer 1

The condition is set and can be checked on the server and the view is rendered on the server. That means you can simple use ERB to check the condition and then add a <script> block when it is true . The script block will run on the client.

# in the controller
def index
  @posts = Post.all.order(id: :desc)
  @post_loaded = @posts.length > 0
end

# in the view
<h1 class="text-center m-4 text-success">Posts</h1>
<div id="posts" data-controller="like" data-like-url-value="<%= like_posts_path %>">
  <div class="row">
    <% @posts.each do |post| %>
        <%= render post %>
    <% end %>
  </div>
</div>

<% if @post_loaded %>
<script>
  console.log("All Posts has been loaded successfully.")
</script>
<% end %>

Answer 2

I have a solution for the above question, Which you have asked.

app/controllers/posts_controller.rb

def index
   @posts = Post.all.order(id: :desc)
   if @posts.length > 0
     session[:post] = "some value"
   end
end

app/views/posts/index.html.erb

<h1 class="text-center m-4 text-success">Posts</h1>
<div id="posts" data-controller="like" data-like-url-value="<%= like_posts_path %>">
    <div class="row">
        <% @posts.each do |post| %>
            <%= render post %>
        <% end %>
    </div>
</div>
<script>
   let post = "<%= session[:post] %>";
   console.log(post);
</script>

Answer 3

You can also try this; if your application has a lot of code, it will become easier to handle that and improve code quality as well.

app/controllers/posts_controller.rb

def index
   @posts = Post.all.order(id: :desc)
   if @posts.length > 0
     session[:post] = true
   end
end

app/views/posts/index.html.erb

<%= javascript_include_tag "my_javascript" %>
<h1 class="text-center m-4 text-success">Posts</h1>
<div id="posts" data-controller="like" data-like-url-value="<%= like_posts_path %>">
    <div class="row">
        <% @posts.each do |post| %>
            <%= render post %>
        <% end %>
    </div>
</div>

app/javascript/my_javascript.js

if(some condition){
  console.log("All Posts has been loaded successfully.")
}