ajax - Rails 3 form_for :remote => true does not submit via AJAX

Question

我正在尝试通过 AJAX 提交表单。我认为这应该是一件简单的事情，但它坚持以常规形式发布......

更新

此表单存在于另一个表单中，该表单不是 AJAX 化的或相关的？这会导致问题吗？

我得到的错误

ArgumentError in LinkWidgetsController#create

There was no default layout for LinkWidgetsController in [/Users/victorstan/Sites/portrait/app/views, /Users/victorstan/.rvm/gems/ruby-1.9.2-p290@portrait/gems/devise-1.5.1/app/views]

相关代码:

路线

  resources :profiles do
    resource :link_widgets #this handles the form requests for create
    member do
      get 'new_link_widget' #this handles the form requests for new
    end
    resources :pages
  end

Controller

class LinkWidgetsController < ActionController::Base
  before_filter :authenticate_user!
  load_and_authorize_resource

  def create
    @link_widget = LinkWidget.new(params[:link_widget])

    respond_to do |format|
      if @link_widget.save
        format.js { render :js => @link_widget, :status => :created, :layout => !request.xhr? }
      else
        logger.debug @link_widget.errors.inspect
        format.js { render :js => @link_widget.errors, :status => :unprocessable_entity }
      end
    end
  end
end

部分

%hr
= form_for [@profile, @link_widget], :remote => true, :format => :js do |f|  
  .field
    = f.label :provider
    = f.select(:provider, options_for_select(f.object.providers, f.object.provider))
  .field
    = f.label :link
    = f.text_field :link, size: 37, class: 'input-width'
  .field
    = f.label :title
    = f.text_field :title, size: 37, class: 'input-width'
    %div
      %small.form-help-text If you set an optional title, it will show up beside the icon as a link
  .field
    = f.label :order
    = f.text_field :order, size: 2
  - unless f.object.new_record?
    .field
      = f.label :delete
      = f.check_box :_destroy
  = f.hidden_field :profile_id
  .actions
    = f.submit 'Save', class: 'right'
  .clear

Answer 1

如果我理解你所说的 This form exists in another form 的意思，那么你有嵌套的表单标签(如下所示):

<form> <!-- this is a standard form -->
    ...
    <form> <!-- this is the remote/AJAXified form -->
        ...
    </form>
    ...
</form>

HTML 规范不允许嵌套表单标签。您应该将内部表单移动到文档中的另一个位置。如果那不可能，您可以尝试在单个表单中使用两个提交按钮，然后根据按下的按钮采取适当的操作(您可以在服务器上执行此操作)。