2

ユーザーが [お気に入りに追加] ボタンをクリックできるイベント検索結果ページがあります。

ボタンをクリックすると、POST が実行され、イベントがユーザーのお気に入りに追加されます。もう一度検索すると、そのイベントの [お気に入りに追加] ボタンではなく [お気に入りから削除] ボタンが表示されます。

現在、お気に入りコントローラーの作成アクションでは、respond_to を使用しているため、format.js を使用すると、ユーザーはその検索結果ページにとどまることができます。

しかし、「お気に入りに追加」ボタンのパーシャルではなく、「お気に入りから削除」ボタンのパーシャルをレンダリングするにはどうすればよいですか。

そうすれば、必要に応じて、お気に入りの項目の [お気に入りから削除] をクリックできます。

以下のスクリーンショットとコード。前もって感謝します。

スクリーンショット

-------------- 検索結果アイテム レンダラー ---------------

<div id="add_remove_favorite" class="user_event_info_container">
  <% if (signed_in? && current_user && current_user.id != user_event.user_id) %>
    <%= render partial: "shared/add_remove_favorite", 
      locals: { user_event: user_event } %>
  <% end %>
</div>

------------- 共有/_add_remove_favorite.html.erb ---------

<% if current_user.following?(user_event) %>
  <%= render partial: 'shared/remove_favorite', 
    locals: { user_event: user_event } %>
<% else %>
  <%= render partial: 'shared/add_favorite', 
    locals: { user_event: user_event } %>
<% end %>

-------------- shared/_add_favorite.html.erb ----------

<%= form_for(current_user.favorites.build(followed_event_id: user_event.id), remote: true) do |f| %>
  <div class="hidden"><%= f.hidden_field :followed_event_id %></div>
  <%= f.submit "Add to favorites", 
    class: "info_button_small user_event_summary_item" %>
<% end %>

-------------- 共有/_remove_favorite.html.erb ------------

<%= form_for(current_user.favorites.find_by_followed_event_id(user_event),
  html: { method: :delete }, remote: true) do |f| %>
  <%= f.submit "Remove from favorites", class: "info_inline_control info_button_small user_event_summary_item" %>
<% end %>

-------------- views/create.js.erb ------------ ここには何を入れるべきですか? 私はここで魔法を実行すると思います。

-------------- views/destroy.js.erb ------------ ここには何を入れるべきですか? 私はここで魔法を実行すると思います。

4

2 に答える 2

1

フォームが宣言されている追加/削除パーシャルに一意の ID を割り当てる必要があります。これは event_id を使用して行うことができます (イベントがリストされており、一意のイベントがあるため)。フォームを介して隠しフィールドとしてイベント ID を送信し、それを js.erb ファイルで使用して、部分的なものを見つけて置換/変更することができます。

js.erb で以下のコードを使用します。構文はhamlです。

- if @event.favorite? #event is saved as favorite
  $('#event_number_#{event.id}').replaceWith("#{escape_javascript(render(partial: 'shared/remove_favorite', locals: {local_variable: some_variable}))}");
- unless @event.favorite? #event is not fav
  $('#event_number_#{event.id}').replaceWith("#{escape_javascript(render(partial: 'shared/add_favorite', locals: {local_variable: some_variable}))}");

「form_for」の「html」オプションで、追加できます

html:{ id: "event_number_#{event.id}", class: 'some class'}

リンクテキストを変更するだけでよいので、「フォーム」ではなく「リモート」オプションで「link_to」を使用することをお勧めします。リンク URL は同じになり、イベント オブジェクトには「追加」と「削除」の 2 つのアクションしかありません。イベントをお気に入りに 2 回「追加」することはできません。リンク ID を設定し、params でイベント ID を渡し、js.erb ファイルで ID を見つけて、部分的なものを置き換えるのではなく、リンク テキストを変更することができます。フォームを使用してさらにデータが送信されている場合 (提供されたビューに他のデータが表示されない場合)、フォームの使用を続けます。

于 2013-07-01T07:14:44.917 に答える
1

私はこれを解決しました。ボタンがクリックされたときにボタンのパーシャルを切り替える方法については、以下が私の実用的な解決策です。

私のシナリオは、ユーザーが日付、タイトル、会場などの条件に一致するイベントを検索できるユーザー イベント アプリケーションです。ユーザーが [お気に入りに追加] ボタンをクリックできるイベント検索結果ページがあります。その場合、気が変わってそのお気に入りが不要になった場合に備えて、ボタンを「お気に入りから削除」ボタンに置​​き換える必要があります。

私のソリューションでは、コントローラ アクションで format.js を使用して Respond_to を使用します。これにより、ユーザーはページを更新せずにその検索結果ページにとどまることができます。以下のスクリーンショットと関連するコードのみ。

これが他の誰かに役立つことを願っています。ご提案いただきありがとうございます。

スクリーンショット

---------- 検索結果の商品コード部分 -----------

<div id="add_remove_favorite">
  <% if (signed_in? && current_user && current_user.id != user_event.user_id) %>
    <%= render partial: "shared/add_remove_favorite", 
      locals: { user_event: user_event } %>
  <% end %>
</div>

---- 「お気に入りに追加」または「お気に入りから削除」を表示するかどうかを決定する部分 ----

<% if current_user.following?(user_event) %>
  <%= render partial: 'shared/remove_favorite', 
    locals: { user_event: user_event } %>
<% else %>
  <%= render partial: 'shared/add_favorite', 
    locals: { user_event: user_event } %>
<% end %>

------------ 「お気に入りに追加」ボタンの一部 ----------------

<%= form_for(current_user.favorites.build(followed_event_id: user_event.id), 
  html: { id: "event_number_#{user_event.id}" }, remote: true) do |f| %>
  <div class="hidden"><%= f.hidden_field :followed_event_id %></div>
  <%= f.submit "Add to favorites %>
<% end %>

------------ 「お気に入りから削除」ボタンの一部 ------------

<%= form_for(current_user.favorites.find_by_followed_event_id(user_event),
  html: { id: "event_number_#{user_event.id}", method: :delete }, remote: true) do |f| %>
  <%= f.submit "Remove from favorites %>
<% end %>

-------- create および destroy アクションを含む FavoritesController ---------

class FavoritesController < ApplicationController
  before_filter :signed_in_user

  def create
    @user_event = UserEvent.find(params[:favorite][:followed_event_id])
    current_user.follow!(@user_event)
    respond_to do |format|
      format.html { redirect_to user_path(current_user) }
      format.js
    end
  end

  def destroy
    @user_event = Favorite.find(params[:id]).followed_event
    current_user.unfollow!(@user_event)
    respond_to do |format|
      format.html { redirect_to user_path(current_user) }
      format.js
    end
  end
end

------------- create.js.erb -----------

<% if @current_user.following?(@user_event) %>
  $("#event_number_<%= @user_event.id %>").replaceWith('<%= escape_javascript(render(
    partial: 'shared/remove_favorite', locals: { user_event: @user_event })) %>');
<% end %>

------------- destroy.js.erb ----------

<% if !@current_user.following?(@user_event) %>
  $("#event_number_<%= @user_event.id %>").replaceWith('<%= escape_javascript(render(
    partial: 'shared/add_favorite', locals: { user_event: @user_event })) %>');
<% end %>
于 2013-07-02T06:58:41.093 に答える