单击 rails 再添加一组相同的输入
Add one more same set of inputs on click rails
如何为教育对象添加一组相同的输入,以便在提交后我将有 2 个新的教育对象?需要通过单击现有输入集后面的图标来显示首选的新集。
这是我的new
方法:
def new
@user = User.new
@user.educations.build
@user.works.build
end
我对此的看法:
<%= simple_form_for [:admin, @user] do |u| %>
<%= u.error_notification %>
<%= u.input :name, label: "Name" %>
<p><b>Photo</b></p>
<%= image_tag(@user.photo_url, size: "80x90",
class:"img-rounded") if @user.photo? %>
<%= u.input :photo, label: false %>
<%= u.input :tel, label: "Tel.:" %>
<h3>Education</h3>
<hr>
<%= u.simple_fields_for :educations do |e| %>
<%= e.input :name, label: "University" %>
<%= e.input :year_started, label: "Started" %>
<%= e.input :year_finished, label: "Ended" %>
<% end %>
# icon `+`
<i class="fa fa-plus fa-2x"></i>
<h3>Work</h3>
<hr>
<%= u.simple_fields_for :works do |w| %>
<%= w.input :name, label: "Name" %>
<%= w.input :year_started, label: "Started" %>
<%= w.input :year_finished, label: "Ended" %>
<% end %>
<%= u.button :submit, "Надіслати" %>
<% end %>
最简单的解决方案可能是茧 gem - https://github.com/nathanvda/cocoon
如果您想在调用 new
方法时添加额外的对象,您只需要 "build" 更多相关对象:
def new
@user = User.new
2.times do
@user.educations.build
end
@user.works.build
end
这将为您提供两组 education
字段(无需再更改代码)。
如果你想在之后调用额外的objects/fields 你已经呈现了new
方法,你必须动态地进行,按照@Tom Walpole
的建议,使用Cocoon.
之类的东西
有日期,但是good tutorial here。
I've written about it too.
--
动态添加字段依赖于一个简单的模式:
- Button / Icon press
- Ajax call to controller
- Controller builds form with
fields_for
- Ajax response puts new
fields_for
in DOM
此 (ajax) 与 "Railscast"(静态)方法的主要区别在于它在 rails 中正确构建 fields_for
。没有黑客工作...
#app/views/admin/users/new.html.erb
<%= link_to fa-icon("plus 2x"), admin_new_user_path, remote: true %>
如果您使用 font-awesome
,最好使用 font-awesome-rails
gem, as you get the fa-icon
助手。
#app/controllers/users_controller.rb
class UsersController < ApplicationController
respond_to :js, :html
def new
@user = User.new
@user.educations.build
@user.works.build unless request.xhr?
end
end
#app/views/users/new.js.erb
var form = $("<%=j render 'users/new' ");
$("form#new_admin_user [[fields_for_identifier]]").html($(form).html());
这里的大技巧是 child_index: Time.now.to_i
方法。 "static" 方法的大问题是每个新字段的 id
将与上一个字段完全相同,从而弄乱您的参数:
#app/views/users/new.html.erb
<% if request.xhr? %>
<%= simple_form_for [:admin, @user] do |u| %>
<%= u.simple_fields_for :educations, child_index: Time.now.to_i do |e| %>
<%= e.input :name, label: "University" %>
<%= e.input :year_started, label: "Started" %>
<%= e.input :year_finished, label: "Ended" %>
<% end %>
<% end %>
<% else %>
... your code ...
<% end %>
以上 应该 工作,尽管可能需要调整。
如何为教育对象添加一组相同的输入,以便在提交后我将有 2 个新的教育对象?需要通过单击现有输入集后面的图标来显示首选的新集。
这是我的new
方法:
def new
@user = User.new
@user.educations.build
@user.works.build
end
我对此的看法:
<%= simple_form_for [:admin, @user] do |u| %>
<%= u.error_notification %>
<%= u.input :name, label: "Name" %>
<p><b>Photo</b></p>
<%= image_tag(@user.photo_url, size: "80x90",
class:"img-rounded") if @user.photo? %>
<%= u.input :photo, label: false %>
<%= u.input :tel, label: "Tel.:" %>
<h3>Education</h3>
<hr>
<%= u.simple_fields_for :educations do |e| %>
<%= e.input :name, label: "University" %>
<%= e.input :year_started, label: "Started" %>
<%= e.input :year_finished, label: "Ended" %>
<% end %>
# icon `+`
<i class="fa fa-plus fa-2x"></i>
<h3>Work</h3>
<hr>
<%= u.simple_fields_for :works do |w| %>
<%= w.input :name, label: "Name" %>
<%= w.input :year_started, label: "Started" %>
<%= w.input :year_finished, label: "Ended" %>
<% end %>
<%= u.button :submit, "Надіслати" %>
<% end %>
最简单的解决方案可能是茧 gem - https://github.com/nathanvda/cocoon
如果您想在调用 new
方法时添加额外的对象,您只需要 "build" 更多相关对象:
def new
@user = User.new
2.times do
@user.educations.build
end
@user.works.build
end
这将为您提供两组 education
字段(无需再更改代码)。
如果你想在之后调用额外的objects/fields 你已经呈现了new
方法,你必须动态地进行,按照@Tom Walpole
的建议,使用Cocoon.
有日期,但是good tutorial here。
I've written about it too.
--
动态添加字段依赖于一个简单的模式:
- Button / Icon press
- Ajax call to controller
- Controller builds form with
fields_for
- Ajax response puts new
fields_for
in DOM
此 (ajax) 与 "Railscast"(静态)方法的主要区别在于它在 rails 中正确构建 fields_for
。没有黑客工作...
#app/views/admin/users/new.html.erb
<%= link_to fa-icon("plus 2x"), admin_new_user_path, remote: true %>
如果您使用 font-awesome
,最好使用 font-awesome-rails
gem, as you get the fa-icon
助手。
#app/controllers/users_controller.rb
class UsersController < ApplicationController
respond_to :js, :html
def new
@user = User.new
@user.educations.build
@user.works.build unless request.xhr?
end
end
#app/views/users/new.js.erb
var form = $("<%=j render 'users/new' ");
$("form#new_admin_user [[fields_for_identifier]]").html($(form).html());
这里的大技巧是 child_index: Time.now.to_i
方法。 "static" 方法的大问题是每个新字段的 id
将与上一个字段完全相同,从而弄乱您的参数:
#app/views/users/new.html.erb
<% if request.xhr? %>
<%= simple_form_for [:admin, @user] do |u| %>
<%= u.simple_fields_for :educations, child_index: Time.now.to_i do |e| %>
<%= e.input :name, label: "University" %>
<%= e.input :year_started, label: "Started" %>
<%= e.input :year_finished, label: "Ended" %>
<% end %>
<% end %>
<% else %>
... your code ...
<% end %>
以上 应该 工作,尽管可能需要调整。