jquery append在Rails ajax视图中不起作用
我的应用程序在Rails 4.1.1和jquery上 该页面显示一个活动列表,每个活动包含在一个分部中 对于每个活动,用户都可以添加一条新的注释-链接到新注释方法的id是基于活动id动态生成的,即newcomment_185 对于每个活动,注释显示在一个列表中。ul的id基于活动id动态显示,即commentslist_185jquery append在Rails ajax视图中不起作用,jquery,ajax,ruby-on-rails-4,Jquery,Ajax,Ruby On Rails 4,我的应用程序在Rails 4.1.1和jquery上 该页面显示一个活动列表,每个活动包含在一个分部中 对于每个活动,用户都可以添加一条新的注释-链接到新注释方法的id是基于活动id动态生成的,即newcomment_185 对于每个活动,注释显示在一个列表中。ul的id基于活动id动态显示,即commentslist_185 _activity.html.erb (my activity partial) <p>The activity content is here. <%
_activity.html.erb (my activity partial)
<p>The activity content is here.
<%= link_to t('new_comment'), new_activity_comment_path(activity_id: activity.id), :id => "newcomment_#{activity.id}", remote: true, :class => "button tiny " %></p>
<ul id="commentslist_<%= activity.id %> "> Comments: <%= activity.comments.count %>
<% activity.comments.each do |comment| %>
<li> <%= comment.body %> (par <%= comment.commenter.name %>) </li>
<% end %>
</ul>
comments_controller.erb
class CommentsController < ApplicationController
load_and_authorize_resource
def new
@comment = Comment.new commenter: current_user, activity_id: params[:activity_id]
respond_to do |format|
if request.xhr?
format.js
format.html { render layout: false }
else
format.js { render :action => 'new' }
format.html { render 'new' }
format.json { render json: @comment }
end
end
end
def create
@comment = Comment.new(comment_params)
@comment.commenter = current_user
respond_to do |format|
if @comment.save
format.js
format.html { redirect_to root_path, notice: 'Commentaire ajouté' }
else
format.js { render 'update' }
format.html { render 'new' }
format.json { render json: @comment.errors, status: :unprocessable_entity }
end
end
end
private
def comment_params
params.require(:comment).permit(:body, :activity_id, :commenter_id)
end
end
/app/views/comments/new.js.erb
$('#newcomment_<%= @comment.activity_id.to_s %>').hide().after('<%= j render("form") %>');
$('#commentform').slideDown(350);
/app/views/comments/create.js.erb
$('#commentform_<%= @comment.activity_id.to_s %>').remove();
$('#newcomment_<%= @comment.activity_id.to_s %>').show();
$('#commentslist_<%= @comment.activity_id.to_s %> ul').append('<%= j render(@comment) %>');
问题是这最后一行,除了这一行,一切都正常。li元素未添加到ul中
在Chrome控制台预览中,已解析的js似乎正常:
$('#commentform_188').remove();
$('#newcomment_188').show();
$('#commentslist_188 ul').append('<li> test 1 (by John Doe) <\/li>');
任何地方都没有错误消息。我尝试了最后一行的不同版本,没有ul,交替单引号和双引号,等等。我不知道。感谢您的指点。我认为您添加了一个额外的空格,使选择器中断:
<="commentslist_<%= activity.id %> ">
<="commentslist_<%= activity.id %>">
我没有意识到名称后面的额外空格会破坏选择器。抢手货谢谢