jquery - 如何正确设置 ajax Button_to 上的路由？

Question

我实现了一个基于 ajax 的按钮，用于在用户的“愿望列表”中添加和删除日历事件。该按钮充当切换开关。如果该事件已在他们的愿望 list 上，则会将其删除；如果没有，则会添加它。

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

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

用户.rb:

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

事件.rb:

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

保存的事件.rb:

  belongs_to :event
  belongs_to :user

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

路线.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() 而不是表单本身。我在 Controller 中进行了一些其他重构，为简洁起见，我不会在此处发布这些重构，但这是我的新 js.erb 文件:

创建.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 ) %>");