3

そこで、5 つの評価の質問があり、1 回評価 (作成) して、いつでも評価を更新できる星評価ページで遊んでみたいと思いました。評価フォームは ajax 化されていますが、問題はフォーム要素が送信後に更新メソッドではなく Create メソッドのままであることです。

私は80-bによるかなりクールなチュートリアルに従いましたが、フォームが適切な方法に更新されていることについて1つの部分が欠けています.

ここにコードがあります

rating_questions/_quick_form.html.erb評価フォームごとにネストされたフォームを持つ部分的なフォームがあります。フォーム ルートはヘルパーを使用して、作成または更新アクションであるかどうかを定義していることに注意してください。

<div class="rating_questions">
    <% @rating_questions.each do |rating_question| %>
        <%= render partial: "rating_questions/rating_form", :locals => {:rating_question => rating_question} %>
    <% end %>
</div>

rating_form.html.erbパーシャル_

# EDIT: I added the temporary random id in an instance variable to make sure the form id and hidden_field have the same reference

<% @rand_id = SecureRandom.hex %>
<%= form_for(rating_ballot(rating_question), :remote => true, :html => { :class => 'rating_ballot', :id => @rand_id}) do |f| %>
   <div class="rq"><%= rating_question.title %></div>
   <%= hidden_field_tag :temp_id, @rand_id %>
   <%= f.label("value_#{rating_question.id}_1", content_tag(:span, '1'), {:class => "rating", :id => "1"}) %>
   <%= radio_button_tag("rating[value]", 1, current_user_rating(rating_question) == 1, :class => 'radio_button', :id => "rating_value_#{rating_question.id}_1") %>
            ... (the other rating radio buttons) ...    
   <%= f.hidden_field("rating_question_id", :value => rating_question.id) %>
   <%= f.submit :Submit, :id => "rating_submit" %>
<% end %>

次にcreate.js.erb、フォームを部分的に置き換える行を追加しました

$('#<%= params[:temp_id] %>').replaceWith("<%= j render(partial: 'rating_questions/rating_form', locals: {:rating_question => @rating_question}) %>");

既存のレコードがある場合にフォームを作成するか更新するかを定義するためのヘルパー メソッド

def rating_ballot(rating_question)
    if @rating = current_user.ratings.find_by_rating_question_id(rating_question.id)
      [rating_question, @rating]
    else
      [rating_question, current_user.ratings.new]
    end
  end

  def current_user_rating(rating_question)
    if @rating = current_user.ratings.find_by_rating_question_id(rating_question.id)
      @rating.value
    else
      "N/A"
    end
  end

そして私のratings_controller.rbそれはcreate.js.erbupdate.js.erb

def create
    @rating_question = RatingQuestion.find_by_id(params[:rating_question_id])
    @rating = Rating.new(params[:rating])
    @rating.user_id = current_user.id
    if @rating.save
      respond_to do |format|
        format.html { redirect_to rating_questions_path, :notice => "Your rating has been saved"}
        format.js
      end
    end
  end

  def update
    @rating_question = RatingQuestion.find_by_id(params[:rating_question_id])
    @rating = current_user.ratings.find_by_rating_question_id(@rating_question.id)
    if @rating.update_attributes(params[:rating])
      respond_to do |format|
        format.html { redirect_to rating_questions_path, :notice => "Your rating has been updated"}
        format.js
      end
    end
  end

明らかに、送信されたばかりのフォームのみを更新し、他のフォームは更新したくありません。create.js.erb と update.js.erb で Javascript を使用して適切な方法でフォームをリロードする方法についてのアイデアはありますか?

どうもありがとうございました!

編集~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

私はあなたの提案を進め、ランダムIDをフォームに追加し、create.js.erbを変更しましたが、問題が発生しました:

1) 評価フォームが置き換えられた後、Javascript はその部分で機能しなくなります。

星の動的な相互作用のためのコーヒー スクリプトもここにあります (実際にはラジオ ラベルの形式)。

$ ->
   # Add the "Bright class" to the stars for each checked radio button before the document is ready.
   $("form.rating_ballot").each ->
      checkedId = undefined
      checkedId = $(this).find("input:checked").attr("id")
      $(this).find("label[for=" + checkedId + "]").prevAll().andSelf().addClass "bright"

$(document).ready ->
   # makes stars glow on hover.
   $("form.rating_ballot > label").hover (-> # mouseover
      $(this).prevAll().andSelf().addClass "glow"
   ), -> # mouseout
      $(this).siblings().andSelf().removeClass "glow"

   # makes stars stay glowing after click.
   $("form.rating_ballot > label").click ->
      $(this).siblings().removeClass "bright"
      $(this).prevAll().andSelf().addClass "bright"

   # Submits the form (saves data) after user makes a change.
   $(".rating_ballot").change ->
      $(this).submit()

EDIT 2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~アクションはすべてのフォームを送信していましたが修正されました。

4

1 に答える 1