Topic: rails3-jquery-autocomplete and nested forms

Hello, I need help with my nested autocomplete fields. I'm using the Cocoon plugin to provide the nested form functionality. The javascript code below will correctly display the id of the selected record in the autocomplete field within each nested form. My knowledge of javascript is lacking so I need help with the code to get the selected id into nested form visual_id field so it will be saved to the appropriate nested record. Any help would be greatly appreciated.Thanks,Ken--------------------------------------------------------------------------------------------------------------------------------------------------------------<div class='nested-fields'>    <div class=

Re: rails3-jquery-autocomplete and nested forms

Surely you meant to show more code than that, right?

Re: rails3-jquery-autocomplete and nested forms

I certainly did. I forgot the code tags. Thanks!

<div class='nested-fields'>
    <div class="tbl">
        <div class="tbl-row">
            <div class="tbl-cell1">
                <%= link_to_remove_association "Remove", f %>
            </div>
            <div class="tbl-cell2">
                <%= f.input :visual_img_file_name, :label => false, :as => :autocomplete, :url => autocomplete_visual_img_file_name_groups_path, :input_html => {:id_element=>'#visual_id'} %>
                <%= f.hidden_field :visual_id, :id => "visual_id" %>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $('input').bind('railsAutocomplete.select', function(event, data){
      alert(data.item.id);
    });
  });
</script>

Re: rails3-jquery-autocomplete and nested forms

I think you need something along the lines of

$('#visual_id').val(data.item.id);

Re: rails3-jquery-autocomplete and nested forms

Thanks for your help Dana. I tried your suggestion without success. It appears that the value of the first nested field is populated but any additional fields are not. Below is an example of the html of two nested fields after selecting a value for each. Notice the second has no value assigned.

<input id="visual_id" type="hidden" name="group[groups_visuals_attributes][1363220602710][visual_id]" value="2881">

<input id="visual_id" type="hidden" name="group[groups_visuals_attributes][1363220618377][visual_id]">

Thanks,
Ken

Re: rails3-jquery-autocomplete and nested forms

Can you post your updated JS? I'm having a little trouble following what exactly you're trying to do. Are you working from a tutorial? And at what point do you expect the hidden fields to get the values assigned to them? Is it when some other field is changed?

Re: rails3-jquery-autocomplete and nested forms

I'm using the " nathanvda / cocoon" plugin to provide nested forms and I'm using the " crowdint / rails3-jquery-autocomplete" plugin to provide autocomplete functionality. The "Add Image" link on the form view adds a partial view each time it is clicked. So if I've clicked the "Add Image" button twice I get two partials on the form each with an autocomplete field. When I enter text in the automcomplete fields and select one of the entries in the dropdown list, the javascript is triggered. I need the javascript to place the id of the list item in the hidden field id (visual_id). What I'm seeing is that the value is only being set for the first hidden field. The visual_id for any subsequent hidden fields are not set.
Of course when I submit the form, the insert into the database fails because of the missing visual_id for the second nested record.

I hope all that makes sense!

---------------------------------
_form.html.erb

    <div>
        <%= f.simple_fields_for :groups_visuals do |groups_visual| %>
            <%= render 'groups_visual_fields', :f => groups_visual %>
        <% end %>
      <div class='links'>
            <%= link_to_add_association 'Add Image', f, :groups_visuals, :class => "edit-heading-l" %>
        </div>
    </div>
-----------------------------------
_groups_visual_fields.html.erb

<div class='nested-fields'>
    <div class="tbl">
        <div class="tbl-row">
            <div class="tbl-cell1">
                <%= link_to_remove_association "Remove", f %>
            </div>
            <div class="tbl-cell2">
                <%= f.input :visual_img_file_name, :label => false, :as => :autocomplete, :url => autocomplete_visual_img_file_name_groups_path, :input_html => {:id_element=>'#visual_id'} %>
        <%= f.hidden_field :visual_id, :id => "visual_id" %>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $('input').bind('railsAutocomplete.select', function(event, data){
      $('#visual_id').val(data.item.id);
    });
  });
</script>

Here is the nested attributes portion of the save parameters after submitting the form. Notice the visual_id for the second nested record is empty.

"groups_visuals_attributes"=>{"0"=>{"_destroy"=>"", "visual_img_file_name"=>"Kansas1.jpg", "visual_id"=>"44"}, "1"=>{"_destroy"=>"", "visual_img_file_name"=>"LedZepp1973HousesHoly.jpg", "visual_id"=>""}}}, "commit"=>"Save", "id"=>"1493"}

Re: rails3-jquery-autocomplete and nested forms

I'm sure there is a better way, but I was able to solve my issue with the following.

    $(document).ready(function() {
    $('input').bind('railsAutocomplete.select', function(event, data){
        $(this).parent().parent().children('input#visual_id').val(data.item.id);
    });
    });

Re: rails3-jquery-autocomplete and nested forms

Hello

First of all, I guess there's a problem due to the fact that you name your field(s) with an ID of 'visual_id'. In HTML the id attribute can and must be used only once by page (classes can be used more than once)...
These fields should have a class  'visual_id' if it convenient for you but their ids have to remain unique,
I think you should add a specific id to your field(s) maybe something like

id = "visual_id_<%= item.id %>" 

(or anything else that is useful for you to identify the right field values, a basic count should be enough )...
Hope this helps a bit even if I don't really  answer to your question
Cheers