Question

我不确定这种特殊的UI模式是否有名称，但我想创建一个看起来像这样的表单：

Company Name: _____
...

Employees:

   Name: _____  Title: _____
   Name: _____  Title: _____

   Add New Employee

Save Company

我正在创建或编辑公司，但在表单中嵌入的是该公司员工的任意数量的“子表单”。如果单击“添加新员工”按钮，则应在按钮之前显示新的员工子表单。

我已经离开Rails一段时间了，我仍然试图了解Rails 3中的事情是如何完成的。在过去，我会做类似的事情：

 button_to "Add Employee", :remote => true, :action => :new_employee_form

然后创建new_employee_form.js.erb，其中包含将新子表单附加到公司员工列表的JavaScript。

但是Rails 3似乎已经改变了很多使得这项工作的管道，并且这个解决方案根本不起作用。

在Rails 3中实现此模式的推荐方法是什么？

Answer 1

确保您在application.js中需要ujs javascript文件，并且在您的布局中包含application.js.

//= require jquery
//= require jquery_ujs
//= require jquery-ui

修改

检查生成的html，它应该类似于：

<%= button_to "Create", :action => "create", :remote => true %>
# => "<form method="post" action="/images/create" class="button_to" data-remote="true">
#      <div><input value="Create" type="submit" /></div>
#    </form>"

方法post，class button_to，data-remote true。

Answer 2

Remote_true必须在button_to参数的html_options部分设置：http://apidock.com/rails/ActionView/Helpers/UrlHelper/button_to。所以下面的剪辑应该有效：

button_to "Add Employee",  {:action => :new_employee_form} , { :remote => true }

修改

好的，正如您刚才所说，问题是，新表单不会通过Ajax提交。原因是，您需要使用“.on”函数将事件处理程序附加到动态元素：http://api.jquery.com/on/

Answer 3

查看这些导演剧集：

http://railscasts.com/episodes/196-nested-model-form-part-1

http://railscasts.com/episodes/197-nested-model-form-part-2

我在我的rails应用程序中广泛使用它。

如何在Rails 3中实现就地“添加项”按钮？

3 个答案: