CODEWITHSUNDEEP
javascriptjqueryruby-on-railsautocompletenested-forms
John Thomas Raphael Dulay
John Thomas Raphael Dulay

Reputation: 155

Rails jQuery autocomplete and dynamic nested fields

I have an application in which I'm using the gems rails3-jquery-autocomplete and nested_form to suggest existing users to be tagged as contributors to a project entry.

The form view:

<%= f.fields_for :contributors do |contributor|%>
    <%= contributor.autocomplete_field :name, autocomplete_user_profile_last_name_projects_path, :update_elements => { :user_id => "#user_id" } %><br>
    <%= contributor.hidden_field :user_id %>
    <%= contributor.radio_button :contributor_type, 'Colleague' %> 
    <%= contributor.radio_button :contributor_type, 'Supervisor' %> 
    <%= contributor.radio_button :contributor_type, 'Client' %> 
    <%= contributor.link_to_remove "Remove this contributor" %>
<% end %>
<%= f.link_to_add "Add a contributor", :contributors %><br>

I have also overwritten the get_autocomplete_function(parameters) function in order to allow more than one column in my autocomplete, namely the columns first_name and last_name

def get_autocomplete_items(parameters)
  items = UserProfile.select("DISTINCT CONCAT_WS(' ', first_name, last_name ) AS full_name, first_name, last_name, id, user_id").where(["CONCAT_WS(' ', first_name, last_name) LIKE ?", "%#{parameters[:term]}%"])
end

I also have the following line in my Projects controller:

autocomplete :user_profile, :last_name, :full => true, :extra_data => [:first_name, :last_name, :user_id ], :display_value => :fullname

With the `fullname' function simply being:

def fullname
    "#{first_name} #{last_name}"
end

What I want to do is to get the value of user_id from the autocomplete items and put its value inside the hidden field, but when I check the server the it outputs something like:

 Parameters: {"utf8"=>"✓", "authenticity_token"=>"DYQ7iJeqdwMQrprSGn0WNHXY5iXDZLA5pUd3OlYJ2so=", "project"=>{"creator"=>"1", "title"=>"lesdodis", "contributors_attributes"=>{"0"=>{"name"=>"Test User the 1st", "user_id"=>"", "contributor_type"=>"Client", "_destroy"=>"false", "id"=>"21"}, "1"=>{"name"=>"Test User the 2nd", "user_id"=>"", "contributor_type"=>"Supervisor", "_destroy"=>"false", "id"=>"22"}, "1393677266696"=>{"name"=>"", "user_id"=>"", "_destroy"=>"1"}, "1393677267518"=>{"name"=>"", "user_id"=>"", "_destroy"=>"1"}}, "description"=>"asdad", "tag_list"=>"sdads", "link"=>"asdasd", "gallery_attributes"=>{"screenshots_attributes"=>{"0"=>{"description"=>"", "_destroy"=>"false", "id"=>"10"}}, "id"=>"16"}}, "commit"=>"Update", "id"=>"16"}

where the user_id field inside contributors is left blank. I have already tried manually assigning ids to the fields by using contributor.object.id to assign a unique number to the field name with limited success, as the new dynamically added fields do not have object ids. I am using this form for both creating and updating a project entry, so I would like to ask for help in how to make this work regardless of editing the field or adding a new one.

Update: After a while of searching I finally got it to work by adding this code

<% field_name = "#{contributor.object_name}[user_id]".gsub(/(\])?\[/, "_").chop %>
<%= contributor.autocomplete_field :name, autocomplete_user_profile_last_name_projects_path, :update_elements => { :user_id => "##{field_name}" } %><br>

I hope this helps anyone who might encounter the same problem.

Upvotes: 2

Views: 1066

Answers (2)

John Thomas Raphael Dulay
John Thomas Raphael Dulay

Reputation: 155

After a while of searching I finally got it to work by adding this code

<% field_name = "#{contributor.object_name}[user_id]".gsub(/(\])?\[/, "_").chop %>
<%= contributor.autocomplete_field :name, autocomplete_user_profile_last_name_projects_path, :update_elements => { :user_id => "##{field_name}" } %>

I hope this helps anyone who might encounter the same problem.

Upvotes: 1

Spock02144
Spock02144

Reputation: 11

I've been wrestling with a similar problem as well. In your case, my feeling is that the nested_form helpers are generating unique identifiers which are defeating the "#user_id" selector passed to :update_elements.

You might be able to workaround it by hooking into the event streams for each gem and then manually updating the hidden :user_id for the specific contributor in the form. For the dynamically added contributors, possibly something like:

$(document).on('nested:fieldAdded', function(nf_event) {
  var ac_input = nf_event.field.find('.ui-autocomplete-input');
  ac_input.bind('railsAutocomplete.select', function(ac_event, data) {
    $(this).next('input[type=hidden]').val(data.item.id);
  });
});

For your contributors generated through existing associations (ie. editing), you can bind to their autocomplete inputs on $(document).ready(). This might at least get you pointed in the right direction.

Upvotes: 1

Related Questions