Facing issue in f.link_to_add in gem "nested_form"

Question

Hi I am using gem "nested_form" and in my view I have given like this

<%= f.fields_for :tasks do |task_form| %>
  <%= task_form.text_field :name %>
  <div class="star-rating" ></div>   
  <%= task_form.text_field :rate %>
<% end %>
<p><%= f.link_to_add "Add a task", :tasks %></p>

In js file I have I have given this

$('.star-rating').raty({
    targetType : 'score',
    targetKeep : true

});

to show star rating I have used

gem 'jquery-raty-rails', github: 'bmc/jquery-raty-rails'
gem 'ratyrate'

so this add row but star rating is not shown I am attaching snapshot enter image description here

I have this type of design but when I click on Add A Task it does not render star-rating div it shows like this

enter image description here

I have included this in my js file

$(document).on('nested:fieldAdded', function(event){
  // this field was just inserted into your form
  var field = event.field; 
  // it's a jQuery object already! Now you can find date input
  var star = field.find('.star-rating');
  // and activate datepicker on it
  star.raty({
    targetType : 'score',
    targetKeep : true
    });
})

but still its not working. Please guide how to render that div in nested-form.

read javascript events section from this doc github.com/ryanb/nested_form. You have to write a js callback function 'nested:fieldAdded' and in that initalize raty for the new field — Pardeep Dhingra
– Pardeep Dhingra, Commented Jun 10, 2015 at 11:18
<%= task_form.text_field :rate %> inside <div class="star-rating" > — Vrushali Pawar
– Vrushali Pawar, Commented Jun 10, 2015 at 11:25

Gaurav Gupta · Accepted Answer · 2015-06-10 12:04:23Z

2

You can do it like this:

<%= f.fields_for :tasks do |task_form| %>
  <%= task_form.text_field :name %>
  <div class="star-rating" ></div>   
  <%= task_form.text_field :rate %>
<% end %>
<p><%= f.link_to_add "Add a task", :tasks, id:"add-fields" %></p>

And in your js file do:

$(document).on('click', '#add-fields', function(){
   $('.star-rating').raty({
   targetType : 'score',
   targetKeep : true
  });
})

This may work for you.

answered Jun 10, 2015 at 12:04

Gaurav Gupta

1,19110 silver badges15 bronze badges

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

4 Comments

Dinshaw Raje Over a year ago

Yes it works but its having an issue when I fill stars and then click on add-a-task then it empty my above filled stars

Gaurav Gupta Over a year ago

It is because there is same class so when you click on "ADD A TASK" then it add raty to all the div those have class "star-rating".You can set dynamic class name for this by using "<%= f.options[:child_index] %>" this will give you inxed value like 0,1,2,3...

user4965201 Over a year ago

@GauravGupta can u please explain how can we use that in the code ?

Gaurav Gupta Over a year ago

To add dynamic id for 'div' we can do like this <div id='<%="star-rating-#{ f.options[:child_index]}"%>' ></div>

Collectives™ on Stack Overflow

Facing issue in f.link_to_add in gem "nested_form"

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related