0

構築中のアプリに賛成票/反対票機能を作成しています。ユーザーが賛成票または反対票のボタンを押すと、ajax リクエストがコントローラーに送信されます。コントローラーはデータベースの投票数を更新し、jquery を使用して表示された投票数を更新し、押されたボタンを無効にする JavaScript ファイルを実行します。表示を更新する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>
");

投票表示の更新と賛成ボタンの変更を除いて、すべてが機能します (つまり、上記のコードは実行されていません。データベースが更新されているため、コントローラーが正常に実行されていることがわかります)。また、はるかに少ないhtmlをレンダリングしていたときに機能していたため、上記のjqueryに問題があることもわかっています。これは、以前に作業していたより単純なコードです。

$('#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>\"),

/"別のものを囲むために使用して/"いるため、アプリはここに2つの部分があると考えています：

\"<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), method: :put, remote: true %> <%= (@post.upvotes + @post.downvotes) %> 票

");

于 2012-08-08T07:31:17.340 に答える