Question

我正在为我正在构建的应用创建一个upvote / downvote功能。当用户点击upvote或downvote按钮时，ajax请求被提交给控制器，该控制器更新数据库中的投票计数，然后运行javascript文件，该文件使用jquery更新显示的投票计数并禁用按下的按钮。这是更新显示的jquery：

$('#post-action-<%= "#{@post.id}" %>').html("
                <i class=\"icon-arrow-up arrow-voted\"></i>
                <p class=\"votes_difference\" ><%= (post.upvotes - post.downvotes) %></p>
            <%= link_to raw(\"<i class=\"icon-arrow-down\"></i>\"), post_downvote_path(post.id), method: :put, remote: true %>
                <p class=\"votes_sum\" ><%= (post.upvotes + post.downvotes) %> votes</p>
");

一切正常，除了更新投票显示和更改upvote按钮（换句话说，上面的代码没有运行。数据库已更新，所以我知道控制器已成功运行。）。我也知道问题是上面的jquery，因为当我渲染一个更少的html时它正在工作。这是我以前工作过的简单代码：

$('#post-action-<%= "#{@post.id}" %>').html("<%= @post.upvotes - @post.downvotes %>")

我是积极的，我正在抓住正确的元素。我要替换的html元素内容是：

<div class="post_actions" id="post-action-<%= "#{post.id}" %>" >

...some embedded ruby and other html

</div>

我假设有一些jquery语法错误，但我根本找不到它。我在这里结束了我的智慧。关于此事的任何和所有意见将不胜感激。

修改

正如Trip的回答中提到的那样，我通过改变这个来打印foobar：

$('#post-action-<%= "#{ @post.id }" %>').html("fooooooobar!")

到此：

$('#post-action-<%= @post.id %>').html("fooooooobar!")

然而，当我用更复杂的代码替换foobar时：

$('#post-action-<%= @post.id %>').html("

                <i class='icon-arrow-up arrow-voted'></i>
                <p class='votes_difference' >
                  <%= (@post.upvotes - @post.downvotes) %>
                </p>
            <%= link_to raw('<i class=\"icon-arrow-down\"></i>'), post_downvote_path(@post.id), method: :put, remote: true %>
                <p class='votes_sum' ><%= (@post.upvotes + @post.downvotes) %> votes</p>

");

问题又回来了。用户显示不会更新。但是，这一次，控制台有一个jquery错误：

PUT http://localhost:3000/course/1/upvote_post 500 (Internal Server Error) jquery.js:8241
jQuery.ajaxTransport.send jquery.js:8241
jQuery.extend.ajax jquery.js:7720
$.rails.rails.ajax jquery_ujs.js:99
$.rails.rails.handleRemote jquery_ujs.js:158
(anonymous function) jquery_ujs.js:309
jQuery.event.dispatch jquery.js:3333
jQuery.event.add.elemData.handle.eventHandle

编辑2

在玩了jquery代码之后，我注意到了一些事情。首先，我必须缩小代码。如果我不这样做，jQuery就不会触发。例如，我应该这样做：

$('#post-action-<%= "#{ @post.id }" %>').html("fooooooobar!")

而不是：

$('#post-action-<%= "#{ @post.id }" %>').html("
              fooooooobar!
")

其次，在将每一行输入html方法之后，我已经识别出导致问题的行。这一行：

<%= link_to raw(\"<i class=\"icon-arrow-down\"></i>\"), post_downvote_path(post.id), method: :put, remote: true %>

导致jquery失败。我尝试了没有'raw'的行：

 <%= link_to "<i class='icon-arrow-down'></i>", post_downvote_path(post.id), method: :put, remote: true %>

但仍然没有。

解决方案 - AH YEA

为了让链接线正常工作，我不得不像以下那样逃避它：

<%= escape_javascript(link_to raw("<i class='icon-arrow-down'></i>"), post_downvote_path(@post.id), method: :put, remote: true) %>

最后！终于自由了。

Answer 1

我认为就是这条线：

<%= link_to raw(\"<i class=\"icon-arrow-down\"></i>\"),

这样做：

$('#post-action-<%= "#{@post.id}" %>').html("
                <i class='icon-arrow-up arrow-voted'></i>
                <p class='votes_difference' >
                  <%= (post.upvotes - post.downvotes) %>
                </p>
            <%= link_to raw('<i class=\"icon-arrow-down\"></i>'), post_downvote_path(post.id), method: :put, remote: true %>
                <p class='votes_sum' ><%= (post.upvotes + post.downvotes) %> votes</p>
");

<强>更新

此行失败的原因：

\"<i class=\"icon-arrow-down\"></i>\"),

是因为您正在使用/"来封装另一个/"，因此应用程序认为此处有两个部分：

\"<i class=\"

和

\"></i>\"

您需要区分它们。您已使用"方法html()，因此请使用'

所以它看起来像这样：

'<i class=\"icon-arrow-down\"></i>'),

其次，escape_javascript链接：

<%= escape_javascript(link_to raw("<i class='icon-arrow-down'></i>"), post_downvote_path(@post.id), method: :put, remote: true) %>

Answer 2

看起来你已经错过了html里面的@post，只是把它作为帖子。试试这个。

顺便说一句，你应该使用firebug或chrome inspect元素来计算任何脚本错误。他们甚至在发生时指出了ajax相关的脚本错误。

$（'＃post-action-＆lt;％=“＃{@ post.id}”％＆gt;'）。html（“                                      ＆lt;％=（@ post.upvotes - @ post.downvotes）％＆gt;
              ＆lt;％= link_to raw（\“\”），post_downvote_path（@ post.id），method :: put，remote：true％＆gt;                   ＆lt;％=（@ post.upvotes + @ post.downvotes）％＆gt;投票

“）;

jQuery html方法不起作用

2 个答案: