Question

Say I have a formtastic form that creates a Store and allows selection of Services it provides:

<%= semantic_form_for @store do |f| %>
  <%= f.inputs :services, :as => :check_boxes, :collection => Service.all %>
  <%= f.buttons %>
<% end -%>

I want to allow the user to add a new Service in case he doesn’t see it in the options, right from the form.

There are many examples for simple nested form element addition, say of a Task entry to a Project, and even a gem that helps with this, but I haven’t found any that create a new resource so it’ll show as part os checkbox or select options.

Answer 1

Got it working this way:

<%= semantic_form_for @store do |f| %>
  <%= f.inputs :services, :as => :check_boxes, 
                          :collection => Service.all,
                          :wrapper_html => { :id => 'service_fields' } %>  
  <%= f.buttons %>
<% end -%>

Added an id to the parent list item around the checkbox field listing, so it can be accessed by this js after submitting a text field with the new service name:

<input type="text" id="new_service_name" />
<input type="button" value="ok" id="btnSave" />                                

<script type="text/javascript">        
  $(document).ready(function() {
    $('#btnSave').click(function() {
      $.ajax({
        url: '/admin/services.json',
        type: 'POST',
        dataType: 'json',
        data: 'service[name]=' + $('#new_service_name').val(),
          success: function(data) {
            addCheckbox(data);
          }
        });
      });
    });

    function addCheckbox(name) {
      var container = $('#service_fields fieldset ol');
      var inputs = container.find('input');
      var id = inputs.length+1;

      //var html = '<input type="checkbox" id="cb'+id+'" value="'+name+'" /> <label for="cb'+id+'">'+name+'</label>';
      var html = '<li><label for="store_services_'+id+'"><input id="store_services_'+id+'" name="store[services][]" type="checkbox" value="'+id+'" />'+name+'</label></li>';
      container.append($(html));
    }
</script>

Then, in ServicesController:

class ServicesController < ApplicationController  
  respond_to :json

  def create
    service = Service.create!(params[:service])    
    respond_with(service)
  end
end