[英]Passing Div ID Dynamically from Rails controller to js.erb file
I am creating an application which has tasks and users can like and comment to the tasks. 我正在创建一个具有任务的应用程序,用户可以喜欢并对任务进行评论。 I am bringing the like and comments feature in the index page itself.
我在索引页面本身带来了like和comments功能。
Index page renders comments partial for every task: 索引页面为每个任务呈现部分注释:
tasks/_comments.html.erb 任务/ _comments.html.erb
<div class="comments-div">
<% if comments.present? %>
<% comments.each do |comment| %>
<div class="comment-div">
<div><img src="/assets/user.png" class="comment-img">
<p class='comment-desc'><%= comment.description %></p></div>
<p class="height-10">User: <%= comment.user.name %></span>
<span class="right">Commented On: <%= comment.created_at.strftime("%d %b %y") %></span>
</p>
</div>
<% end %>
<% end %>
</div>
<div class="comments-form">
<%= form_for :comment, url: "comments/add_comments", remote: true, html: { id: 'comment-form' } do |form| %>
<%= form.hidden_field :task_id, value: task_id %>
<div class="search-fields">
<%= form.text_area :description %>
</div>
<div>
<%= form.submit 'Comment', id: 'ad-comment-btn', remote: true, 'data-task-id' => task_id, click: 'form_action(this);' %>
</div>
<% end %>
</div>
This js gets executed on add comment form submit. 这个js在添加评论表单提交时执行。
application.js 的application.js
$('.comments-form form').submit(function(e){
e.preventDefault();
var taskId = this.elements[1].value;
var description = this.elements[2].value;
var comment_params = JSON.stringify({task_id: taskId, description: description});
$.post("/comments/add_comments?comment=" + comment_params);
return false;
})
comments_controller: comments_controller:
def add_comments
comment_params = JSON.parse(params[:comment])
comment_params.merge!({user_id: current_user.id})
@comment = Comment.create(comment_params)
@task_container_id = "task-comments-container_#{comment_params['task_id']}"
@comments = Comment.where(task_id: comment_params["task_id"]).to_a
@task_id = comment_params["task_id"]
if @comment.save
flash[:success] = "Comment created Successfully"
else
flash[:error] = "Something went wrong. Try again"
end
respond_to do |format|
format.js
end
end
I am passing the @task_container_id from controller and trying to use it in js.erb file. 我从控制器传递@task_container_id并尝试在js.erb文件中使用它。
add_comments.js.erb add_comments.js.erb
$('#"<%= @task_container_id %>"').html("<%= escape_javascript(render partial: 'tasks/comments', locals: { comments: @comments, task_id: @task_id } ) %>");
I want to replace the div id here $('#"<%= @task_container_id %>"') which is passed by the controller. 我想替换控制器传递的$('#“<%= @task_container_id%>”')中的div id。 But div is not refreshing as expected.
但div没有像预期的那样令人耳目一新 if I hard code the div id in js.erb file, refresh is happening properly.
如果我在js.erb文件中对div id进行硬编码,则刷新正常。
How do I fix it? 我如何解决它?
In your aplication.js
the elements array is zero based
, so change the value to 0 and 1 respectively while fetching the taskId and description 在
aplication.js
, elements array is zero based
,因此在获取taskId和description时分别将值更改为0和1
var taskId = this.elements[0].value;
var description = this.elements[1].value;
----------------------- UPDATED -------------------------- - - - - - - - - - - - - 更新 - - - - - - - - - - - - -
I guess I found the mistake 我猜我发现了这个错误
in your controller 在你的控制器中
change @task_id = comment_params["task_id"]
to @task_id = comment_params[:task_id]
将
@task_id = comment_params["task_id"]
更改为@task_id = comment_params[:task_id]
Can you please try following, 你可以试试下面的,
escape_javascript
is aliased to j
so you can use it. escape_javascript
别名为j
因此您可以使用它。 I assumed that you are already getting the element with this dynamic ID and already rendering 'tasks/comments'
partial in that div with dynamic ID. 我假设您已经获得了具有此动态ID的元素,并且已经使用动态ID在该div中呈现了
'tasks/comments'
部分。
add_comments.js.erb add_comments.js.erb
$("#'<%= @task_container_id %>'").html("<%= j render(partial: 'tasks/comments', locals: { comments: @comments, task_id: @task_id } ) %>");
Good luck! 祝好运!
It is a very minor mistake that I have done. 这是我犯过的一个非常小的错误。
add_comments.js.erb add_comments.js.erb
$("#<%= @task_container_id %>").html("<%= escape_javascript(render partial: 'tasks/comments', locals: { comments: @comments, task_id: @task_id } ) %>");
Had to remove an extra single quote ("#'<%= @task_container_id %>'") to simply $("#<%= @task_container_id %>") 不得不删除额外的单引号(“#'<%= @task_container_id%>'”)到简单$(“#<%= @task_container_id%>”)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.