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

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

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.

Answer 1

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.