[英]Rails - Drop down list with 'other' that allows creation of new model object
我目前有一个相当复杂的_request_form
用于在我的网站中创建新Requests
。 当前,在创建请求时,员工必须从下拉菜单中选择他们的姓名,如下所示:
<%= f.collection_select :name, Employee.all(:order => 'name'), :name, :name %>
这选择将正确的Employee
放入Request
。 但是,如果该员工不在数据库中,我希望在collection_select
中使用other
选项,该选项会生成两个文本框(用于Employee name
和email
),并在提交表单时创建新Employee
。
我认为这需要某种精美的Ajax
,但是我有限的Rails知识不会延伸那么远!
编辑:
这是我的全貌:
<%= javascript_include_tag :defaults, "nested_form" %>
<div class="request_form">
<% if !@request.errors.empty? %>
<div class="alert alert-error">
<ul>
<% @request.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="well">
<%= nested_form_for @request, html: { multipart: true } do |f| %>
<%= f.label :title %><br />
<%= f.text_field :title %><br /><br />
<%= f.label :name, 'Submitted By' %><br />
<%= f.select :name, Employee.sorted_employees_list.map { |value| [ value, value ] }, :id => "employee_box" %><br />
<div id="new_employee_data">
</div>
<%= f.label :description %><br />
<%= f.text_area :description %><br /><br />
<%= f.label :attachment_uploader, 'Attachments' %><%= f.file_field :attachment_uploader, :multiple => true, name: "data_files[attachment_uploader][]" %><br />
<% unless @request.data_files.empty? %>
<%= f.label :attachment_uploader, 'Current Attachments:' %><br />
<% end %>
<%= f.fields_for :data_files do |attachment| %>
<% if !attachment.object.new_record? %>
<%= attachment.label :attachment_uploader, 'Delete: ' + attachment.object.attachment_uploader_url.split("/").last %>
<%= attachment.check_box :_destroy %>
<% end %>
<% end %>
</div>
</div>
<script>
$(document).ready(function(){
$('#employee_box').append("<option>Other</option>");
});
$('#employee_box').change(function() {
if( $('#employee_box').val() === 'other' ) {
$('#new_employee_data').append("<input type='text' id='employee_name' placeholder='Employee Name'> <br/> <br /></input><input type='email' id='employee_email' placeholder='Employee Email'> </input>");
}else {
$('#employee_name').remove();
$('#employee_email').remove();
}
});
</script>
这包括@Kirti的建议。 但是,我似乎无法使其正常运行!
我认为,弹出对话框是不错的选择!
1)添加到您的Gemfile中,然后运行bundle:
gem 'jquery-ui-rails'
2)激活jquery-ui javascript(application.js):
//= require jquery.ui.dialog
3)链接jquery-ui样式表(application.css):
*= require jquery.ui.dialog
4)准备要选择的数据(employees_controller.rb)
def new
@prices = Price.all.map{|p| [p.price, p.id] }
@prices << ['Create New', 'new_id']
end
5)在视图上显示选择组件(employees / new.html.erb):
<%= select_tag :employee, options_for_select(@employees) %>
<div id="new_employee_dialog">
<label for="name" type="text">Employee name:</label>
<input name="name" type="text"/>
<label for="email" type="text">Employee email:</label>
<input name="email" type="email"/>
</div>
6)此javascript与对话窗口一起使用,并发送ajax请求(assets / javascripts / employees.js.coffee):
$ ->
$("#new_employee_dialog").dialog
modal: true
width: 400
height: 300
autoOpen: false
draggable: false
dialogClass: "without-header"
buttons: [
text: "Cancel"
click: ->
$(this).dialog "close"
,
text: "Ok"
click: ->
modalForm = $(this)
$.post "/users/form_create",
employee_name: $(modalForm).find("input[name='name']").val()
employee_email: $(modalForm).find("input[name='email']").val()
, (data, status) ->
if data['status'] == 'ok'
modalForm.dialog "close"
alert "Ok"
else
alert "Oops"
]
$('#employee').change ->
selected_employee_id = jQuery("#employee").val()
console.log('selected id: ' + selected_employee_id )
if selected_employee_id == 'new_id'
$("#new_employee_dialog").dialog("open");
7)创建方法以在服务器端(employees_controller.rb)捕获ajax请求:
def form_create
employee_name = params[:employee_name]
employee_email = params[:employee_email]
# create new user..
respond_to do |format|
format.json { render :json => {status: 'ok'} }
end
end
8)将其添加到routes.rb:
post 'users/form_create' => 'users#form_create'
在要生成两个输入字段的位置添加一个空的div
标签(占位符):
<div id="new_employee_data">
</div>
在视图底部添加以下jQuery
:
<script>
$(document).ready(function(){
$('#request_name').append("<option value='other'>Other</option>");
});
$('#request_name').change(function() {
if( $('#request_name').val() === 'other' ) {
$('#new_employee_data').append("<input type='text' id='employee_name' placeholder='Employee Name'> <br/> <br /></input><input type='email' id='employee_email' placeholder='Employee Email'> </input>");
}else {
$('#employee_name').remove();
$('#employee_email').remove();
}
});
</script>
在其中,将#request_name
替换为为collection_select
生成的id
。
您还需要在提交表单时执行的action
添加用于创建新员工的代码。
注意:我不是AJAX专家,但是您可以改写上面的jQuery,然后从那里获取它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.