jQuery selecting multiple form fields in a Rails one to many nested model form

Question

I'm sorry that this question is somewhat complicated. Hopefully someone has the patience to read this.

I have a nested model form much like the one from this Railscast: http://railscasts.com/episodes/196-nested-model-form-revised

My model is very similar to the nested form field in the Railscast. There is a survey with many questions which has many answers.

I am applying a jQuery-UI "Autocomplete" element to make all of the answer form fields an autocomplete element. However, because it is a nested form field, there are many answer fields in my document. This wouldn't be a problem typically but I need to apply this solution in displaying the label but submitting the ID of the autocomplete selection. Autocomplete applying value not label to textbox

What happens when I employ the solution in the link above, is that the label gets applied to every single "Answer Form Field" in my document rather than just the one that I want. Because I'm using nested forms and I have to apply autocomplete logic to every single "Answer Form Fields," I have to select them by this selector '[type="text"][name*="[answer]"]' which isn't very specific but its as specific as I can be.

I'm racking my brain to figure out how I can use a jQuery selector to select a specific answer field rather than all of the answer fields.

Thank you in advanced for any help at all.

score 0 · Accepted Answer · answered Oct 30 '12 at 06:17

0

Assuming your Question model accepts_nested_attributes_for your Answer model, you can set up your template as follows:

<%= form_for @question do |question_builder| %>
  <% @question.answers.each_with_index do |answer, i| %>
    <% question_builder.fields_for :answers, answer do |answer_builder| %>
      <%= answer_builder.text_field :content, :id => "answer-#{i}" %>
    <% end %>
  <% end %>
<% end %>

Having loaded the previously saved answers (or built new ones) associated with @question, you can use this to iterate through the answers with an index i and render the input for each one with a unique html id of "answer-i", which you can use to uniquely identify your answers from jQuery.

Hope that's what you're looking for.

answered Oct 30 '12 at 06:17

cdesrosiers

8,862
2
28
33

Thank you for the answer. I think this should work but I'm just trying to make it work with my form partials. Mine are structured like in the Railscast example for nested field forms. Will report back when I have it working – Hung Luu Oct 30 '12 at 15:51
actually, I realize that I'm already generating unique ID's for my "Answers" text_fields based on the timestamp (per the link_to_add_fields helper method per Railscasts). Now that I have unique ID's how do I use jQuery selectors to apply the .autocomplete feature to all of the "Answer" text-fields but apply the specific label to only 1 "Answer" text-field. So this becomes more of a jQuery selector question – Hung Luu Oct 30 '12 at 21:43
I was able to figure it out. I'm applying my .autocomplete logic to all text fields with [answer] in its name. Then I'm using $(this) to apply the follow up jQuery logic. I'll add an answer with the code block to explain further – Hung Luu Oct 30 '12 at 23:11

score 0 · Answer 2 · edited May 23 '17 at 12:21

$('[type="text"][name*="[answer]"]').autocomplete
source: $('[type="text"][name*="[answer]"]').data('autocomplete-source')
select: (event, ui) ->
  event.preventDefault()
  $(this).val ui.item.label
  $(this).siblings('[name*="[hidden]"]').val ui.item.value
focus: (event, ui) ->
  event.preventDefault()
  $(this).val ui.item.label

This is coffeescript code that I ended up using. Thanks @cdesrosiers for your answer. I realized that I was already getting unique IDs for each answer text field already. So as the 2nd part of my question, I needed a way to use jQuery selectors in a way that allowed me to apply the .autocomplete jQuery method to all text fields containing the name [answer].

Then related to this question ( Autocomplete applying value not label to textbox ), I needed a way to select a specific answer text field since I had a form with many answer text fields. The answer was to use the jQuery selector $(this) to refer to "this" specific answer text field. Hope this helps someone else trying to learn jQuery selectors.

jQuery this selector was a helpful question in helping me figure this out.

@cdesrosiers, Can you update your answer with my addition and I can mark your response as the answer?

jQuery selecting multiple form fields in a Rails one to many nested model form

2 Answers2