阿贾克斯：成功不工作的Rails应用程序 [英] Ajax:success not working in rails app

问题描述

在一个轨道4的应用程序，我使用的link_to通过JSON送岗位上的upvote。

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

下面是我在我看来

<%= 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>

当我点击链接，投票经历作为一个JSON请求，我看到在我的日志：

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

但由于某些原因，我的JavaScript的文档片断是行不通的。无论是柜台或图标更新。 我该如何解决这个问题？这是否都与turbolinks，它都与我在哪里放置的JavaScript？

推荐答案

在Rails的，你可以通过让一个JavaScript响应执行类似的任务。添加在的respond_to A format.js 类似于的format.html 然后有一个视图 upvote.js.erb ，看起来像：

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" %>");

})();

我改变了你的电话，以的.html 到的.text ，因为你没有实际设置里面的任何HTML元素，没有理由叫的.html 。

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.

这帖子还假定有某种机制来确定投票的链接所属的职位（本例中的父元素后有后＃，其中＃是后对象的ID的ID）。

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).

修改

两个变化我会做，如果我是在做这个项目。首先，我会附上 voted.png 路径 .vote 元素的数据属性。 数据投票图像-SRC =＆LT;％= asset_pathvoted.png％＆GT;。接下来，我绝不会通过一些的回报，因为没有理由这样做。当投票被点击就可以搞定一切的前端假设请求成功。既节约了所有这些潜在的污秽。虽然我知道，从你目前必须将数据属性变更是不是一个巨大的飞跃，我只是觉得这不是它在JavaScript中更多的语义。

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);
});

现在没有来自服务器的响应是必要的，你可以改变你的JSON响应 {成功：TRUE} 或简单的东西

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

这篇关于阿贾克斯：成功不工作的Rails应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！