【问题标题】:comments not rendering with ajax in rails在rails中没有用ajax渲染的评论
【发布时间】:2016-07-27 20:08:32
【问题描述】:

我尝试在我的 Rails 应用程序中使用 ajax 渲染我的 cmets...但它不工作,并且在我重定向页面后 cmets 显示...所以评论成功创建但问题是渲染 cmets ajax 和 jquery!!!! 我的 application.html.erb 中有这行:

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>

这需要我的 application.js 中的行:

//= require jquery
//= require jquery_ujs

这是我在帖子下的 show.html.erb 文件:

<div id="posts" class="transitions-enabled">
  <div class="box panel panel-default">
    <%= render 'post', post: @post %>
  </div>
</div>

我的_post部分:

<div class="panel-body">
  <%= link_to image_tag(post.user.avatar.url, size: "50x50", class: "img-circle"), profile_path(post.user.user_name) %>
  <ul class="posts-shows">
    <li><strong><%= link_to post.user.user_name, profile_path(post.user.user_name)  %></strong></li>
    <li><small><%= link_to "#{time_ago_in_words(post.created_at)} ago", post_path(post), class: "time-link" %></small></li>
  </ul>
  <p class="disc-posts"><%= post.description %></p>
  <%= link_to image_tag(post.image.url(:large), class: "img-responsive img-in" ) %><br/>
  <% if post.user == current_user %>
    <div><%= link_to "Edit", edit_post_path(post) %> | <%= link_to "delete", post, method: :delete, data: {confirm: "Are you sure?"} %> </div>
  <% else %>                            
    <div><%= link_to "Repost", repost_post_path(post), method: :post, data: { confirm: "Are you sure?"} if user_signed_in? %></div>                 
  <% end %>
</div>

<div class="panel-footer">
  <div class="comment-form">
    <%= form_for([post, post.comments.build], remote: true) do |f| %>
      <%= f.text_field :content, placeholder: 'Add a comment...', class: "form-control comment_content", id: "comment_content_#{post.id}"  %>
    <% end %>
  </div>
  <div class="comments" id= "comments_#{post.id}">
    <% if post.comments.present? %>
      <%= render post.comments, post: post %>
    <% end %>
  </div>
</div>

我在 cmets 文件夹中的 _comment.html.erb:

<% if  comment.user_id.present? %>
  <div id="comment">
    <%= link_to image_tag(post.user.avatar.url, size: "30x30", class: "img-circle img-comments"), profile_path(comment.user.user_name) %>
    <div class="user-name">
        <%= link_to comment.user.user_name, profile_path(comment.user.user_name), class: "username-size" %>
    </div>
    <div class="comment-content">
      <%= comment.content %>
    </div>
  </div>
<% end %>

这里是 cmets 文件夹下的 create.js.erb :

$('#comments_<%= @post.id %>').append("<%=j render 'comments/comment', post: @post, comment: @comment %>");
$('#comment_content_<%= @post.id %>').val('')

和我的 cmets 控制器:

class CommentsController < ApplicationController
  before_action :set_post

  def index
    @comments = @post.comment.all
  end

  def new
    @comment = @post.comments.build(comments_params)
  end

  def create
    @comment = @post.comments.build(comments_params)
    @comment.user_id = current_user.id

    if @comment.save
        respond_to do |format|
            format.html { redirect_to root_path }
            format.js
        end
    else
        flash[:alert] = "Check the comment form, something went horribly wrong."
        render root_path
    end
  end


  def destroy
    @comment = @post.comments.find(params[:id])

    @comment.destroy
    flash[:success] = "Comment deleted :("
    redirect_to root_path
  end

  private

  def comments_params
    params.require(:comment).permit(:content)
  end

  def set_post
    @post = Post.find(params[:post_id])
  end
end

【问题讨论】:

  • 可以这样调试。在铬 - 检查>网络。提交请求并仔细查看响应。您可以在控制台中重试响应以查看 javascript 的运行情况。
  • 我不熟悉 chrome 网络和控制台..但是学习是件好事..我一定会查看一些 youtube 视频...谢谢
  • Chrome 开发工具正是您想要的:developers.google.com/web/tools/chrome-devtools/iterate/…

标签: javascript jquery ruby-on-rails ajax ruby-on-rails-4


【解决方案1】:

我不认为这条线是正确的 -

<div class="comments" id= "comments_#{post.id}">

我认为你需要这个

<div class="comments" id= "comments_<%= post.id %>">

【讨论】:

  • 是的,它现在正在渲染...但是我遇到了另一个问题...当我在索引中的帖子中发表评论时,面板中的页脚位于下面的帖子后面...但是当我重定向它解决了问题......所以ajax仍然存在问题......你知道任何解决方案吗??
  • 在此之前,我要感谢您的帮助;)
  • 可能是你的css。 Chrome 检查也会在这里提供帮助。您可以查看元素及其样式规则。页脚可能位于帖子顶部的原因有很多。你是用砖石的吗?可能需要重新加载(如果需要,请参阅砌体的重新加载方法)。
  • 是的,我在我的应用程序中使用砖石......问题是当我重新加载一切正常......所以它不是 ajax?更清楚地说,我的索引页面中的帖子看起来像 pinterest ......现在 cmets 在帖子面板的页脚中......当我评论页脚时,页脚超出了下面的帖子......类似的东西
  • 是的 - 砌体需要重新计算一切的大小。看看这个。 stackoverflow.com/questions/8722197/… 试试加到create.js.erb 看看是不是这么简单
猜你喜欢
  • 1970-01-01
  • 2012-03-21
  • 1970-01-01
  • 2021-03-13
  • 2022-11-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多