Rails 3.1 和 ajax 创建的表单不提交答案

【问题标题】：Rails 3.1 and ajax created forms not submittingRails 3.1 和 ajax 创建的表单不提交
【发布时间】：2011-10-05 18:06:45
【问题描述】：

我正在尝试在 rails 3.1 项目中创建内联编辑。我正在创建表单以通过 ajax 编辑副本，然后尝试通过 ajax 发送编辑。

但是表单不想绑定并且表单不会在通过 ajax 创建的表单上提交。

现在有人在创建表单后如何绑定它

我使用edit.js.erb来添加表单：

$("#nutri_<%= @nutritioninfo.id %>").after('<%= escape_javascript(render(:partial=>'admin/products/nutrition_edit',  :locals=>{:nutritioninfo=>@nutritioninfo}))%>');

部分是这样的：

$%tr.hidden.edit-nutri{ :class => cycle('odd', 'even', :name => "nutrition-hidden-rows"), :id=>"nutri_edit_#{nutritioninfo.id}" }
  = simple_form_for [:admin,site,product,nutritioninfo], :remote=>true do |f|
  %td &nbsp;
  %td= f.input :title,:label => false
  %td= f.input :parent_id, :as=>:select, :collection=>nutritioninfo.possible_parents,:label => false
  %td= f.input :per100g, :label => false
  %td= f.input :info, :label => false
  %td= f.input :highlight,:as=>:boolean, :label => false
  %td.edit= f.button :submit, t('admin.general.save').humanize
  %td.remove=link_to t('admin.general.cancel').humanize, "#", :remote => true, :class=>"cancel-toggle"

有人知道如何绑定表单吗？

【问题讨论】：

我已经尝试手动添加遥控器，但它仍然不想使用以下方法工作：$('#nutri_display form').each(function(){ console.log($(this) ) $(this).live('submit', function(e) { alert("testing") $.rails.handleRemote( $(this) ); e.preventDefault(); }); })
绑定是什么意思？当您点击编辑表单上的提交按钮时会发生什么 - 是否有任何东西被发送到 Rails 服务器？如果没有，您是否在浏览器端看到任何错误（使用 Firefox+Firebug 或 Chrome）？
您的控制器是否设置为响应 xhr 请求？
你正在使用简单的表格，那么你为什么要做这些表格的东西？只是我的 2

标签： jquery ruby-on-rails ruby ajax ruby-on-rails-3.1

【解决方案1】：

可能会有一些问题。

首先，也许很明显，但您在 application.js 中需要 jquery_ujs 吗？如果您对 remote: true 没有任何操作，这可能是原因。

其次，它甚至会触发表单提交吗？请记住，当使用 ajax 时，您必须使用 'live()' 而不是 'bind()' 或 'action()' 因为 live 将在每次重新加载表单时对元素进行绑定（'bind' 仅绑定一次操作）。

但是如果提交继续，并且您没有任何响应，那么您可能必须像 Andre Dublin 所说的那样在控制器中实现 xhr 请求。

你可以参考Using Unobtrusive JS and AJAX with Rails 3 也可以参考In place editing RailsCast 吗？

【讨论】：

在看到 railscast 之后，我使用了 Best In Place，它与带有 activeadmin 的 Rails 3.1 配合得很好。您只需要适当的 rails REST 路线。如果您使用继承的资源 gem，也会得到照顾。

【解决方案2】：

就像 Leszek 在他的第二点中所说，“请记住，在使用 ajax 时，您必须使用 'live()' 而不是 'bind()' 或 'action()' 因为 live 会在每次重新加载时对元素进行绑定表单（'bind' 只绑定一次动作）。”。

【讨论】：