Using jQuery Autocomplete to dynamically create and assign an Object in Rails 4.0

Question

I'm trying to build a form with autocomplete that will add a form element on select using Rails 4. Here are the models (I'm using MongoID):

class Ingredient
  include Mongoid::Document
  field :name
  field :unit
  has_many :recipe_ingredients, validate: false
end

class RecipeIngredient
  include Mongoid::Document
  field :quantity
  embedded_in :recipe
  belongs_to :ingredient
end

class Recipe
  include Mongoid::Document
  field :name
  embeds_many :recipe_ingredients
  accepts_nested_attributes_for :recipe_ingredients, allow_destroy: true
end

Autocomplete Coffeescript

jQuery ->
  $('#ingredients_search').autocomplete(
    source: (request, response) ->
            $.ajax( 
                url: "/ingredients.json",
                dataType: "json",
                data: request,
                success: (data) ->
                    response $.map data, (item) ->
                        label: item.name
                        value: item.name
                        _id: item._id
                        unit: item.unit
            )

    select: (event,ui) -> 
        $('#ingredients').append(ui.item.label)
);

Searching and using autocomplete works fine, but I'm a bit lost on how to create the RecipeIngredient object dynamically and assigning the Recipe and Ingredient to it.

I've tried playing with nested forms (http://railscasts.com/episodes/196-nested-model-form-revised?view=asciicast) but I can't seem to get it working.

Any pointers would really help.

Thanks, Remi

remi · Accepted Answer · 2014-02-07 09:03:08Z

I think I finally got it working!

The trick was to add a data property on the holding div (div.recipe) with the "html template" for the rest I used Ryan Bates' video (http://railscasts.com/episodes/403-dynamic-forms and http://railscasts.com/episodes/196-nested-model-form-revised).

The coffeescript:

jQuery->
    $('#ingredients_search').autocomplete(
    source: (request, response) ->
            #make our request and handle the response as normal
            $.ajax( 
                url: "/ingredients.json",
                dataType: "json",
                data: request,
                success: (data) ->
                    response $.map data, (item) ->
                        label: item.name
                        value: item.name
                        _id: item._id.$oid
                        unit: item.unit
        )
    select: (event,ui) ->
        myDiv = $('div.recipe')
        time = new Date().getTime()
        regexp = new RegExp(myDiv.data('id'), 'g')
        recipe_ingredient_div = myDiv.data('fields').replace(regexp, time)
        myDiv.append(recipe_ingredient_div)
        $("input[name='recipe[recipe_ingredients_attributes][" + time + "][ingredient_attributes][name]']").val(ui.item.label)
        $("input[name='recipe[recipe_ingredients_attributes][" + time + "][ingredient_attributes][id]']").val(ui.item._id)
    );

The helper method:

module RecipesHelper
  def add_data_to_div(f, association)
    new_object = f.object.send(association).klass.new
    new_object.ingredient = Ingredient.new
    new_object.recipe = Recipe.new
    id = new_object.object_id
    fields = f.fields_for(association, new_object, child_index: id) do |builder|
      render(association.to_s.singularize + "_fields", f: builder)
    end
    return {id: id, fields: fields.gsub("\n", "")}
  end
end

The ingredient partial:

<input type="text" id="ingredients_search" />
<%= content_tag_for(:div, f.object, data: add_data_to_div(f, :recipe_ingredients)) do %>
    <%= f.simple_fields_for :recipe_ingredients do |ingredient| %>
        <%= render 'recipe_ingredient_fields', :f => ingredient %>
    <% end %>
<% end %>

and the recipe_ingredient_fields partial:

<%= content_tag_for(:fieldset, f.object) do %>
    <%= f.simple_fields_for :ingredient do |ingredient| %>
        <%= ingredient.input :name, disabled: true %>
        <%= ingredient.input :unit, disabled: true %>
        <%= ingredient.hidden_field :id %>
    <% end %>
    <%= f.simple_fields_for :recipe do |recipe| %>
        <%= recipe.hidden_field :id, :value => f.object.id %>
    <% end %>
    <%= f.input :quantity %>
    <%= f.hidden_field :_destroy %>
    <%= link_to '[remove]', '#', class: 'remove_fields' %>
<% end %>

I had a problem of the field not filling up properly when editing, but that was because I missed the nested_attributes in the RecipeIngredient model

belongs_to :recipe
accepts_nested_attributes_for :recipe, allow_destroy: true
belongs_to :ingredient
accepts_nested_attributes_for :ingredient, allow_destroy: true

Hope this helps!

Remi

Collectives™ on Stack Overflow

Using jQuery Autocomplete to dynamically create and assign an Object in Rails 4.0

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related