0

我正在我正在构建的应用程序上创建赞成/反对票功能。当用户点击 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>
");

一切正常，除了更新投票显示和更改投票按钮（换句话说，上面的代码没有运行。数据库已更新，所以我知道控制器运行成功。）。我也知道问题出在上面的 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 失败。我尝试了没有“原始”的行：

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

但还是一无所获。

解决方案 - 是的

为了让链接线工作，我不得不像这样逃避它：

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

最后！终于自由了。

4

2 回答 2

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) %>
于 2012-08-08T07:32:35.953 回答
0

看起来您在 html 中错过了 @post 并且只是将其作为帖子。试试这个。

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

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

<%= link_to raw(\"\"), post_downvote_path(@post.id), 方法: :put, remote: true %> <%= (@post.upvotes + @post.downvotes) %> 票

");

于 2012-08-08T07:31:17.340 回答