Ajax发布使用rails 4.0在ForumThread上发表评论

时间:2015-04-24 12:01:06

标签: ruby-on-rails ajax

我正在使用rails 4.0开发一个简单的论坛应用程序。我希望我的评论作为Ajax发布,而不是重新加载整个页面,请帮助我。 这是我的show.html.erb论坛

 <div id="topic_content">
  <h1>
   <%= @topic.title %>
  </h1>
  <p>
    <%= @topic.content %>
  </p>
  <div id="comments">
   <h2>
    <%= @topic.comments.count %>
    Comments
   </h2>
   <%= render @topic.comments %>
   <%if user_signed_in? && current_user.user? %>
   <h3>Reply to thread</h3>
   <%= render "comments/form" %>
  <% end %>
 </div>
 <br/>
 <hr/>
 <br/>
 <%if user_signed_in?%>
 <% if can? :update, @topic %>
  <%= link_to "Edit", edit_topic_path(@topic), class: "button" %> 
 <% end %>


<% if can? :delete, @topic %>
 <%= link_to "Delete", topic_path(@topic), method: :delete, data: {      confirm: "Are you sure you want to do this?" }, class: "button" %>
<% end %>
<% end %>

</div>

这是我的_comment.html.erb部分

<div class="comment clearfix">
<div class="content">
 <p class="comment_content">
   <%= comment.comment %>
 </p>

</div>
<div class="buttons">
<%if user_signed_in?%>
<% if can? :update, @topic => Comment %>
  <%= link_to "Edit", edit_topic_comment_path(comment.topic, comment) %>
<% end %>
<% if can? :delete, @topic => Comment %>
  <%= link_to "Delete", [comment.topic, comment], method: :delete, data: { confirm: "Are you sure?" } %>
  <% end %>
<% end %>
</div>

1 个答案:

答案 0 :(得分:0)

您可以使用服务器生成的JavaScript和远程表单。

  1. remote: true添加到表单
  2. 准备好您的控制器以回复JavaScript:

    # CommentsController
    
    def create
      @comment = @topic.comments.create!(comment_params)
      respond_to do |format|
        format.html { redirect_to @comment } # no js fallback
        format.js   # renders comments/create.js.erb
      end
    end
    
  3. 创建create.js.erb模板:

    # comments/create.js.erb
    
    $('#comments').prepend('<%=j render @comment %>');
    

    这里发生的事情是我们告诉Rails将我们的注释(使用注释部分)呈现为JavaScript-ready字符串(注意<%=j),我们正在创建JS,它将添加这个新注释,渲染,到comments div的开头。尝试使用这个JS响应可以做些什么;它是在带有表单的页面上下文中运行的,因此您可以获得很多乐趣。

  4. 另请阅读https://signalvnoise.com/posts/3697-server-generated-javascript-responses上的文章 - 这是我学习这种技术的地方,您无疑会发现案例的示例代码与其示例代码之间的相似之处。