如何正确设置 ajax button_to 上的路由？

Question

我已经实现了一个基于 ajax 的按钮，用于在用户的“愿望清单”中添加和删除日历事件。该按钮用作拨动开关。如果该活动已经在他们的愿望清单上，它将删除它；如果不是，那么它会添加它。

我的问题是该按钮在首次加载页面时可以正常工作，但是在单击它并通过 AJAX 将其替换为新的 button_to 后，它不再工作了。

我查看了this post，但他的架构略有不同，如果可以避免的话，我不打算完全重构它。我有一个单独的模型来保存事件。这里有三个模型发挥作用：用户、事件和已保存事件。用户和事件之间存在多对多关系，表示为 saved_event。这是模型中的相关代码。

user.rb:

  has_many :saved_events
  has_many :events, :through => :saved_events

event.rb:

  has_many :saved_events
  has_many :watchers, :class_name => "User", :through => :saved_events, :source => :user

saved_event.rb:

  belongs_to :event
  belongs_to :user

我已经配置了相当标准的路线。

routes.rb:

  resources :saved_events, :only => [:index,:create,:destroy]
  resources :users
  resources :events

我最初希望在活动页面中看到此按钮，因此我将其添加到活动的 show.html.erb 中。 （我意识到这还不是很干 - 我正在等待它正常工作才能将其移动到部分）

事件/show.html.erb：

  <% if !@is_watched %>
    <%= button_to "Add to Wishlist", { :action => 'create', :controller => 'saved_events', :id => @event.id }, :remote => true %>
  <% else %>
    <%= button_to "Remove from Wishlist", saved_event_path(@event), :remote => true, :method => 'delete' %>
  <% end %>

events_controller.rb:

  def show
    @event = Event.find(params[:id])
    @is_watched = @event.watchers.exists?(current_user) if !current_user.nil?

    respond_to do |format|
      format.html # show.html.erb
      format.xml  { render :xml => @event }
      format.json { render :json => @event }
    end
  end

saved_events_controller.rb：

  def create
    logger.debug params.to_yaml

    @event = Event.find(params[:id])

    if !current_user.events.exists?(params[:id])
      current_user.events << @event
    end

    respond_to do |format|
      format.js
    end
  end

  def destroy
    logger.debug params.to_yaml

    @event = current_user.events.find(params[:id])
    current_user.events.delete(@event)

    respond_to do |format|
      format.js
    end
  end

我使用 ajax 的目标只是将添加表单替换为删除表单（反之亦然）。所以我有一个 create.js.erb 和一个 destroy.js.erb，它们只使用来自 events/show.html.erb 的相同代码。

saved_events/create.js.erb：

$(".button_to").html("<%= escape_javascript button_to "Remove from Wishlist", saved_event_path(@event), :remote => true, :method => 'delete' %>");

saved_events/destroy.js.erb：

$(".button_to").html("<%= escape_javascript (button_to "Add to Wishlist", { :action => 'create', :controller => 'saved_events', :id => @event.id }, :remote => true) %>");

如果第二次单击按钮是“删除”，这就是我在日志中看到的内容

Started DELETE "/saved_events?id=1" for 127.0.0.1 at 2011-12-02 11:56:58 -0600

ActionController::RoutingError (No route matches [DELETE] "/saved_events"):

如果第二次单击按钮是“添加”，这就是我在日志中看到的内容

Started POST "/saved_events/1" for 127.0.0.1 at 2011-12-02 11:59:12 -0600

ActionController::RoutingError (No route matches [POST] "/saved_events/1"):

在页面初始加载时，添加按钮的操作是“/saved_events?id=1”，所以我很困惑为什么第二次按钮点击会是“/saved_events/1”。

Answer 1

看来问题出在我的 jquery 上。我需要将表单包装在一个 div 中，然后在该 div 上调用 jquery.html() 而不是表单本身。我在控制器中进行了一些其他重构，为简洁起见，我不会在此处发布，但这是我的新 js.erb 文件：

create.js.erb：

<% button_html = button_to( 'Remove from Wishlist', { :action => 'destroy', :id => @saved_event.id }, :remote => true, :method => 'delete' ) %>
$("#toggle_wishlist").html("<%= escape_javascript( button_html ) %>");

destroy.js.erb：

$("#toggle_wishlist").html("<%= escape_javascript( button_to("Add to Wishlist", { :action => 'create', :controller => 'saved_events' }, :remote => true)) %>");
$("#toggle_wishlist .button_to").append("<%= escape_javascript( hidden_field_tag :event_id, @event.id ) %>");