CODEWITHSUNDEEP
ruby-on-railsajax
Eli Sparow
Eli Sparow

Reputation: 1

How do I reload my comments partial with ajax?

So I'm a beginner in Rails and I'm trying to reload a partial when I create a Comment. I am creating a sort of forum where I have Posts and Comments on Posts.

Here is the situation :
/views/posts/show.html.erb

<% @posts.each do |post| %>
  <%= post.title.capitalize %>
  <%= post.content %>

  <%= render 'comments/comment', post: post, comments: post.comments %>

  <%= form_tag(category_forum_post_comments_path(@category, @forum, post), :method => :post, class: 'form newtopic') do  %>
    <%= text_field_tag :content, nil, placeholder: 'Commenter', class: 'form-control' %>
    <%= submit_tag "Envoyer", class: "btn btn-primary" %>
  <% end %>
<% end %>

<%= form_tag(category_forum_posts_path(@category, @forum), :method => :post, class: 'form newtopic') do  %>
  <%= text_field_tag :title, nil, placeholder: 'Titre de votre Post', class: 'form-control' %>
  <%= text_area_tag :content, nil, placeholder: 'Description', id: 'desc', class: 'form-control' %>
  <%= submit_tag "Envoyer", class: "btn btn-primary" %>
<% end %>

and then in /views/comments/_comment.html.erb

<% comments.each do |comment|%>
  <%= comment.content %>
  <%= link_to 'Supprimer', category_forum_post_comment_path(@category, @forum, post, comment),
    method: :delete, class: "btn-danger btn-sm", data: { confirm: 'Etes-vous sûr?' } %>
<% end %>

I would like to reload my comment partial on post.
I tried to understand so many posts on stackoverflow and tutorial that I could find online and still have no idea how to do it.

If someone would be kind enough to help me get through this it would be great.

Upvotes: 0

Views: 44

Answers (1)

arieljuod
arieljuod

Reputation: 15838

What's the action that you want to trigger that reload? you are showing forms, links, it's not too clear.

Basically, you need to use remote: true on the form/link, then add a view for that action with .js.erb extension, and, on that view, use javascript to change the content of an specific element.

Something like:

1st, you need to give some unique way to reach the element you want with javacsript:

<% @posts.each do |post| %>
  <div id="post_<%= post.id -%>">
    <%= post.title.capitalize %>
    <%= post.content %>

    <div class='comments'>
      <%= render 'comments/comment', post: post, comments: post.comments %>
    </div>

    <%= form_tag(category_forum_post_comments_path(@category, @forum, post), :method => :post, class: 'form newtopic') do  %>
      <%= text_field_tag :content, nil, placeholder: 'Commenter', class: 'form-control' %>
      <%= submit_tag "Envoyer", class: "btn btn-primary" %>
    <% end %>
  </div>
<% end %>

<%= form_tag(category_forum_posts_path(@category, @forum), :method => :post, class: 'form newtopic') do  %>
  <%= text_field_tag :title, nil, placeholder: 'Titre de votre Post', class: 'form-control' %>
  <%= text_area_tag :content, nil, placeholder: 'Description', id: 'desc', class: 'form-control' %>
  <%= submit_tag "Envoyer", class: "btn btn-primary" %>
<% end %>

Note the div with id=post_x and the div with class comment

Now you can locate it using javacsript:

#your_view.js.erb
post = document.getElementById('post_<%= @post.id -%>');
comments = post.querySelector('comments');

And finally, also on your view, render the partial and replace comments' innerHTML

comments.innerHTML = '<%= j(render partial: "comments/comment", post: @post, comments: @post.comments) -%>';

Just a suggestion, use "comments" (in plural) for the name of the partial, since you are rendering all the comments and not just one.

Upvotes: 1

Related Questions