简体   繁体   中英

Rails 3: javascript to update single div after form submit with .js.erb file

Hi I'm new using javascript with rails, and was hoping I could get some help. I have a like button that I use to like and unlike a post.

home.html:

<%= form_for(current_user.appreciations.
                          build(:liked_id => post.id),
                          :remote => true) do |f| %>
 <div><%= f.hidden_field :liked_id %></div>
 <div class="actions"><%= f.submit "Like" %></div>
<% end %>

I use a js.erb file to render the unlike form after a post has been liked.

create.js.erb:

$("#like_form_<%= @post.id.to_s %>").html("<%= escape_javascript(render(:partial => 'users/unlike', :locals => {:post => @post})) %>")

I want to add a line that will update a div class="like-count<%= "_"+ post.id.to_s%>' afterwards in my view.

home.html:

<div class="like-count<%= "_"+ post.id.to_s%>">
  <%= user_post.likers.count.to_s %>
</div>

I have many posts that display in a feed, and I used the post.id.to_s in order to select the specific post like count to be updated. For testing I've targeted a specific post id=94 and I'm using the code below but it does not seem to work.

new create.js.erb:

$("#like_form_<%= @post.id.to_s %>").html("<%= escape_javascript(render(:partial => 'users/unlike', :locals => {:post => @post})) %>"
$(".like-count_94").reset();

Any input on the right function or where I'm going wrong would be great, thanks a lot.

If your like-count div is unique, why not go with an ID versus a class?

$("#like-count").reset();

If it does need to be a class, and since you are grabbing the first one, you can use this syntax for the first method ( jsfiddle ):

$(".like-count").first().text('NEW TEXT/CONENT TO ADD');

I do not believe this is correct jQuery syntax:

$(".like-count").[0].reset();

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM