Ajax:success not working in rails app

Question

Within a rails 4 app, I am using a link_to to send an upvote on posts via json.

Here is what I have in my posts controller:

def upvote
  @post = Post.find(params[:id])
  @post.liked_by current_user

    respond_to do |format|
    format.html {redirect_to :back }
    format.json { render json: { count: @post.get_upvotes.size } }
  end
end

Here is what I have in my view

<%= link_to like_post_path(post), method: :put, class: 'vote', remote: true, data: { type: :json } do %>
    <%= image_tag('vote.png') %>
    <%= content_tag :span, post.get_upvotes.size %>
    <% end %>


    <script>

    $(document)
        .on('ajax:send', '.vote', function () { $(this).addClass('loading'); })
        .on('ajax:complete', '.vote', function () { $(this).removeClass('loading'); })
        .on('ajax:error', '.vote', function(e, xhr, status, error) { console.log(status); console.log(error); })
        .on('ajax:success', '.vote', function (e, data, status, xhr) {
        $(this).find("span").html(data.count);
        $(this).find("img").attr("src", '<%= asset_path 'voted.png' %>'); 
        });


    </script>

When I click on the link, the vote goes through as a JSON request, I see this in my log:

Processing by PostsController#upvote as JSON

But for some reason, my snipped of javascript is not working. Neither the counter or the icon update. How can I fix this? Does this have to do with turbolinks, does it have to do with where I am placing the javascript?

Answer 1

In Rails you can perform a similar task by having a JavaScript response. Add in your respond_to a format.js similar to format.html then have a view upvote.js.erb that looks like:

(function() {    

var postId = "#post-<%= @post.id %>";

$(postId).find(".vote").find("span").text("<%= @post.get_upvotes.size %>");
$(postId).find(".vote").find("img").attr("src", "<%= asset_path "voted.png" %>");

})();

I changed your call to .html to .text since you're not actually setting any HTML inside the element, there is no reason to call .html.

This post also assumes there is some mechanism to identify the post the vote link belongs to (in the example the parent post element has an ID of "post-#" where # is the ID of the post object).

EDIT

Two changes I'd make if I were working on this project. First I would attach the voted.png path to the .vote element as a data attribute. data-voted-image-src="<%= asset_path "voted.png" %>". Next, I would never pass a number in the return as there is no reason to do so. When the vote is clicked you can handle everything on the front end by assuming the request is successful. Which saves all this potential nastiness. While I realize that changing from what you current have to adding the data attribute isn't a huge leap I just find it more semantic than having it in the JavaScript.

The click action on the vote link then becomes:

// Assume all posts have a class 'post'
// I'm also using 'one' because once they vote they don't need to anymore
$(".post").find(".vote").one("click", function(e) {
  var count = parseInt($(this).find("span").text()),
      votedSrc = $(this).data("voted-image-src");
  $(this).find("img").attr("src", votedSrc);
  $(this).find("span").text(count + 1);
});

Now no response from the server is necessary, and you can change your JSON response to {success: true} or something simple.