jquery - Rails 4 ajax acts as votable with turbo links vote counts not updating -


i'm able click on link once, , count update, doesn't update on clicks after that, nor update database (looking @ console).

index.html.haml

.votes   - if current_user.liked? skit     = link_to unlike_skit_path(skit), method: :get, remote: true, class: "unlike-post"       .upvote         %span.upvote-link           %i.fa.fa-caret-up         .vote-count= skit.votes_for.size   - else     = link_to like_skit_path(skit), method: :get, remote: true, class: "like-post"       .upvote         %span.upvote-link           %i.fa.fa-caret-up         .vote-count= skit.votes_for.size 

routes.rb

resources :skits   resources :challenges   member      "like", to: "skits#like"     "unlike", to: "skits#unlike"   end end 

unlike.js.erb

$('.unlike-post').bind('ajax:success', function(){   $(this).find('.vote-count').html('<%= escape_javascript @skit.votes_for.size.to_s %>'); }); 

like.js.erb

$('.like-post').bind('ajax:success', function(){   $(this).find('.vote-count').html('<%= escape_javascript @skit.votes_for.size.to_s %>'); }); 

skits_controller.rb

def   @skit.liked_by current_user   respond_to |format|     format.html { redirect_to skits_path, notice: 'successfully voted!' }     format.js { render layout: false }   end end  def unlike   @skit.unliked_by current_user   respond_to |format|     format.html { redirect_to skits_path, notice: 'successfully voted!' }     format.js { render layout: false }   end end 

edit

after applying bottom, doesn't save database:

enter image description here

when saves database:

enter image description here

to add @max's comment, you'll want @ drying code (using http verbs , actions accordingly):

# config/routes.rb resources :skits   resources :challenges   match :like, via: [:post, :delete], on: :member #-> url.com/skits/:id/like end  # app/controllers/skits_controller.rb class skitscontroller < applicationcontroller    def        @skit.liked_by current_user   if request.post?        @skit.unliked_by current_user if request.delete?        respond_to |format|           format.html { redirect_to skits_path, notice: 'successfully voted!' }           format.js #-> format.js doesn't render layout anyway        end           end end 

you'll able use following:

#app/views/skits/index.html.erb <%= render @skits %>  #app/views/skits/_skit.html.erb .votes    - method =  current_user.liked?(skit) ? :post : :delete    = link_to skit_like_path(skit), method: method, remote: true, id: skit.id       .upvote         %span.upvote-link           %i.fa.fa-caret-up         .vote-count= skit.votes_for.size 

solution

in regards problem of updating, you'll want make sure you're updating correct element through js.erb:

#app/views/skits/like.js.erb $("#<%=j @skit.id %>").find(".vote-count").html('<%=j @skit.votes_for.size.to_s %>'); 

you don't need bind above code ajax:success -- calling format.js run code @ end of request. although may need tweaking, should work.


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -