0

_request_form私は現在、自分のウェブサイトで新しいものを作成するのがかなり複雑ですRequests。現在、リクエストを作成するとき、従業員は次のようにドロップダウン メニューから自分の名前を選択する必要があります。

<%= f.collection_select :name, Employee.all(:order => 'name'), :name, :name %>

これにより、 に権利が選択EmployeeされRequestます。ただし、従業員がデータベースにない場合は、 2 つのテキスト ボックス (従業員と用) を生成し、フォームの送信時に新しい を作成するotherオプションが必要です。collection_selectnameemailEmployee

これにはある種の凝ったものが必要だと思います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 の提案が含まれます。しかし、私はそれを機能させることができないようです！

4

2 に答える 2

0

2 つの入力フィールドを生成する場所に空の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ここで、id生成されたに置き換えますcollection_select。

actionまた、フォーム送信時に実行される新しい従業員を作成するためのコードを追加する必要があります。

注: 私は AJAX の専門家ではありませんが、上記の jQuery を適応させてそこから取得することができます。

于 2014-03-08T21:50:33.347 に答える