How do I send dynamic paramters with a nested form using jquery and rails 3?

Question

I'm new to rails and I'm trying to implement my own dynamic fields using jquery. I've got the fields adding to the form fine, but my parameters are not being sent the way I want them to. Here is my jQuery:

$('form').on('click', '#add_ingredient', function(){
    count = 1;
    field = $('#ingredient_list li').first()
        .clone()
            .find('input')
                .val('')
                    .end()
                        .find('input')
                            .prop({id: 'entry_ingredients_attributes_' + count + '_name', name: 'entry[ingredients_attributes][' + count +'][name]'  })
                                .end();
    $('#ingredient_list').append(field);
    count += 1;
})

This allows me to add multiple list items and their id's and name get incremented so they are unique.

I've got the models setup correctly to use accepts_nested_attributes_for, I'm creating a baking journal which has models Entry, Ingredient, and the association EntryIngredient. My problem is as follows:

When I submit the form, I am only sending one of the ingredients even if I've added multiple fields, only the last one gets submitted. This is the output of my paramters when I submit a form with anything more than 1 ingredient:

"ingredients_attributes"=>{"0"=>{"name"=>"Flour", "_destroy"=>"false"}, "1"=>{"name"=>""}}}}

Here is my form as well in case you are interested to see how its being created:

  <div id="ingredients">
      <%= f.fields_for :ingredients, @entry.ingredients.build do |builder| %>
      <%= render 'ingredient_fields', :f => builder %>
      <% end %>
  </div>
  <div id='add_ingredient'>Add Ingredient</div>
  <div class="actions">
    <%= f.submit %>

#_ingredient_fields
<ul id="ingredient_list">
    <li>
      <%= f.label :name %>
      <%= f.text_field :name %>
      <%= f.hidden_field :_destroy %>
      <%= link_to "Remove", "#", :class => "remove_fields" %>
    </li>
</ul>

Can anyone point me in the right direction?

SOLUTION

Following Zaid Crouch's suggestion in the answer below, it turned out that my selectors were not doing the right thing. My JS is now like so:

$('form').on('click', '#add_ingredient', function(){
    count = $('#ingredient_list li').length;
    field = $('#ingredient_list li').first()
        .clone()
            .find('input')
                .val('')
                    .end()
                        .find('input :first')
                            .prop({id: 'entry_ingredients_attributes_' + count + '_name', name: 'entry[ingredients_attributes][' + count +'][name]'  })
                                .end()
                                    .find('input :last')
                                        .prop({id: 'entry_ingredients_attributes_' + count + '__destroy', name: 'entry[ingredients_attributes][' + count +'][_destroy]', value: 'false'  })
                                            .end();
    $('#ingredient_list').append(field);
})

If anyone can recommend a better way to select those elements I'm changing the properties on I'd appreciate the feedback.

zkcro · Accepted Answer · 2013-03-17 23:07:04Z

3

If you're only getting the last value submitted, that's probably a good hint that you have inputs with duplicate names. You should be able to verify that this is happening by inspecting the html added by your .js (using firebug or webkit inspector).

Looking at your function, you're initialising the count variable within the function; once the function returns it falls out of scope, and so every time the function gets called it will use count = 1. You should be able to fix this by changing

count = 1;

to

count = $('#ingredient_list li').length;

(you can also get rid of the increment at the end of the function, as it does nothing).

You'll also want to make sure that you update the name and id of the _destroy hidden field too.

answered Mar 17, 2013 at 23:07

zkcro

4,3441 gold badge26 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

GiH Over a year ago

ah good catch, although now I'm getting more than 1 which is good, but they are still empty values. Here are my results now with your revised count "ingredients_attributes"=>{"0"=>{"name"=>"Flour", "_destroy"=>"false"}, "1"=>{"name"=>""}, "2"=>{"name"=>""}}}}

zkcro Over a year ago

That seems a little weird. Have you inspected the HTML added by the js to check that it is what you'd expect?

GiH Over a year ago

Thanks! It turned out that my JS was not working properly, the .find('input') was selecting all inputs so the hidden field was getting messed up just as you said.. I fixed that and its submitting them all now :). Thanks so much Zaid, I've updated my question to include the solution code

GiH Over a year ago

Actually, if you can recommend a better way to select those elements without css selectors, I wasn't able to do it using next(), or first()

zkcro Over a year ago

You could always just add a specific CSS class to the hidden field and text field, eg. <%= f.text_field :name, class: "name-field" %> and then do a find() using those class names, which would be a little less brittle. I suspect that's going to be a better option than trying to do it strictly through traversal methods like next(), although it may be slightly less performant (but I'd doubt enough to really be an issue).

|

Collectives™ on Stack Overflow

How do I send dynamic paramters with a nested form using jquery and rails 3?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related