ajaxでの無限のリクエスト

Question

私はストーリーのようなストーリーができるアプリに取り組んでいます。私はそれをAjaxで実装しようとしています。私はHeartアクションでStoriesControllerを持っています。心臓（のような）がクリックされるたびに、私はheart.js.erbで応答し、投稿要求を送信します。私はユーザーが心臓リンクをクリックすると心の数を更新するように取り組んでいます。しかし、私が得ているのは、ajaxによる無限のリクエストです。以下は、心臓活動のスニペットです。

# Give your heart to someone 
    def heart 
    respond_to do |format| 
     format.js 
     format.html 
    end 
    end 

とAJAX要求は次のとおりです。

$('#heart-story-<%= j params[:id]%>').html('<%= @hearts %>') 
$.post("/stories/<%= j params[:id]%>/heart", <%= j params[:id] %>) 
console.log("<%= j params[:id] %>") 

私は無限の要求を取得していそうな理由は何ですか？ ルートは次のとおりです。

#Stories 
resources :stories, only: [:show, :create, :destroy] do 
member do 
    get :heart, :unheart 
    post :heart, :unheart 
end 
# Comments 
resources :comments, only: [:index, :new, :create, :destroy] 
end 

Answer 1

あなたはheart.js.erbに次のコードを指定した場合、それは無限になります。

$('#heart-story-<%= j params[:id]%>').html('<%= @hearts %>') 
$.post("/stories/<%= j params[:id]%>/heart", <%= j params[:id] %>) 
console.log("<%= j params[:id] %>") 

POSTリクエストはドン一度のためのボタンのクリックでトリガーされなければなりません」 heart.js.erbで使用する

Answer 2

このアクションに対するAJAXリクエストが成功すると、heart.js.erbビューがレンダリングされます。それをAJAXリクエストのコールバックとみなし、AJAXリクエストのロジックを記述する場所ではないと考えてください。このビューでは、AJAXリクエストが成功した後にUIを更新するロジックを実装する必要があります。

あなたは次のように、リモートリンクを使用する必要があります。そして、あなたはあなたの中にheart.js.erbをAJAX呼び出しを削除する必要があり

<%= link_to '<3', heart_story_path(@story), remote: true %> 

。次のようになります。

$('#heart-story-<%= j params[:id]%>').html('<%= @hearts %>')