Rails 3 different autocomplete fields - javascript

I have 2 different autocomplete fields on a page each to be populated from different sources in the database. My problem is when I test the page, the two autocomplete behaviors sometimes get switched in each others text fields.
My view partials looks like the following (I followed a railscasts):
<fieldset>
<%= f.text_field :ability_title, {:class => 'autocomplete_field', data: { autocomplete_source: abilities_path } } %>
<%= f.label :points %>: <%= f.text_field :points %>
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>
<fieldset>
<%= f.text_field :mission_title, {:class => 'autocomplete_field', data: {autocomplete_source: missions_path } } %>
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>
My javascript:
jQuery ->
$('fieldset').live 'click', ->
$('.autocomplete_field').autocomplete
source: $('.autocomplete_field').data('autocomplete-source')
And My controllers:
def index
if params[:term].present?
#abilities = Ability.search_titles(params[:term])
else
#abilities = Ability.all
end
respond_to do |format|
format.html # index.html.erb
format.json { render json: #abilities }
end
end
def index
if params[:term].present?
#missions = Mission.search_titles(params[:term])
else
#missions = Mission.all
end
respond_to do |format|
format.html # index.html.erb
format.json { render json: #missions.map(&:title) }
end
end
Thanks

I think you just need to differentiate both text fields by ids, eg:
<fieldset>
<%= f.text_field :ability_title, {:id => 'autocomplete_field1', data: { autocomplete_source: abilities_path } } %>
<%= f.label :points %>: <%= f.text_field :points %>
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>
<fieldset>
<%= f.text_field :mission_title, {:id => 'autocomplete_field2', data: {autocomplete_source: missions_path } } %>
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>
My javascript:
jQuery ->
$('fieldset').live 'click', ->
$('#autocomplete_field1').autocomplete
source: $('#autocomplete_field1').data('autocomplete-source')
$('#autocomplete_field2').autocomplete
source: $('#autocomplete_field2').data('autocomplete-source')
EDIT:
more elegant solution:
jQuery ->
$('fieldset').live 'click', ->
$('#autocomplete_field1, #autocomplete_field2').each (index, element) =>
$(element).autocomplete
source: $(element).data('autocomplete-source')

Try if this works replace source in your js file
source: $(this).data('autocomplete-source')

Related

In Rails how can I tell in my AJAX JS file what button was clicked

In my Rails application I have a view notify.html.erb with multiple forms that are created dynamically based on a few different models, such as Child.rb and Friend.rb.
notify.html.erb
<% #user.children.order("created_at").each do |child| %>
<%= form_for(child, :method => :put, :remote => true)) do |f| %>
<div class="notify-name"><%= child.name %></div>
<%= f.email_field :email, :required => true, :placeholder => "Email Address", :class => "invite-email" %>
<%= f.submit "Invite", :class => "btn btn-primary invite-user-btn" %>
<% end %>
<% end %>
<% #user.friends.order("created_at").each do |friend| %>
<%= form_for(friend, :method => :put, :remote => true)) do |f| %>
<div class="notify-name"><%= friend.name %></div>
<%= f.email_field :email, :required => true, :placeholder => "Email Address", :class => "invite-email" %>
<%= f.submit "Invite", :class => "btn btn-primary invite-user-btn" %>
<% end %>
<% end %>
The forms are set to remote => true so that they are handled by AJAX. In each controller update action, I have:
children_controller.rb
def update
child = Child.find(params[:id])
email = params[:child][:email]
if child.update(child_params)
UserMailer.invite_new_user(current_user, child.name, email).deliver_later
respond_to do |format|
format.html { redirect_back(fallback_location: documents_path) }
format.js
end
end
end
In my update.js.erb file, I want to be able to select the specific button that was clicked. But as you can see in my view above, there is nothing unique about the buttons (they're created dynamically based on the number of children and friends a user has and they each have the same class). How can I get the button that was clicked so I can update the value of that button?
Add a hidden field with child id
<% #user.children.order("created_at").each do |child| %>
<%= form_for(child, :method => :put, :remote => true)) do |f| %>
<div class="notify-name"><%= child.name %></div>
<%= f.email_field :email, :required => true, :placeholder => "Email Address", :class => "invite-email" %>
<%= f.hidden_field :id, value: child.id %>
<%= f.submit "Invite", :class => "btn btn-primary invite-user-btn" %>
<% end %>
<% end %>
This will submit id of a child in params
in controller
def update
child = Child.find(params[:child][:id])
email = params[:child][:email]
if child.update(child_params)
UserMailer.invite_new_user(current_user, child.name, email).deliver_later
respond_to do |format|
format.html { redirect_back(fallback_location: documents_path) }
format.js
end
end
end
Pass a hidden filed, each hard coded with specific value. Then you can get that params in view
% #user.children.order("created_at").each do |child| %>
<%= form_for(child, :method => :put, :remote => true)) do |f| %>
<%= hidden_field_tag 'invitable_type', 'child' %>
<div class="notify-name"><%= child.name %></div>
<%= f.email_field :email, :required => true, :placeholder => "Email Address", :class => "invite-email" %>
<%= f.submit "Invite", :class => "btn btn-primary invite-user-btn" %>
<% end %>
<% end %>
<% #user.friends.order("created_at").each do |friend| %>
<%= form_for(friend, :method => :put, :remote => true)) do |f| %>
<%= hidden_field_tag 'invitable_type', 'friend' %>
<div class="notify-name"><%= friend.name %></div>
<%= f.email_field :email, :required => true, :placeholder => "Email Address", :class => "invite-email" %>
<%= f.submit "Invite", :class => "btn btn-primary invite-user-btn" %>
<% end %>
<% end %>
now in your update.js.erb you can access it like
<% if params[:invitable_type] == 'friend' %>
// you js code to enable button for friend
<% elsif params[:invitable_type] == 'child' %>
// you js code to enable button for child
<% end %>

Implementing AJAX Creation, Missing Template (Create) Error

I am trying to implement AJAX in my to do type app, but am getting a missing template error (Missing template items/create, application/create with {:locale=>[:en], :formats=>[:html], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee]}.) on my create action. There shouldn't be a create.html.erb page because the creation of items happens on a lists#show page:
<div class='new-item'>
<%= render 'items/form' %>
</div>
<div class="js-items">
<% #items.each do |item| %>
<%= div_for(item) do %>
<p><%= link_to "", list_item_path(#list, item), method: :delete, remote: true, class: 'glyphicon glyphicon-ok', style: "margin-right: 10px" %>
<%= item.name %>
<% if item.delegated_to != "" && item.user_id == current_user.id %>
<small>(Delegated to <%= item.delegated_to %>)</small>
<% elsif item.delegated_to != "" && item.user_id != current_user.id %>
<small>(Delegated by <%= item.user_id %>)</small>
<% end %></p>
<% end %>
<% end %>
</div>
And the _form.html.erb partial to which it links:
<div class="row">
<div class="col-xs-12">
<%= form_for [#list, #item], remote: true do |f| %>
<div class="form-group col-sm-6">
<%= f.label :name %>
<%= f.text_field :name, class: 'form-control', placeholder: "Enter Item Name" %>
</div>
<div class="form-group col-sm-6">
<%= f.label 'Delegate To (Not Required)' %>
<%= f.text_field :delegated_to, class: 'form-control', placeholder: "Enter an Email Address" %>
</div>
<div class="text-center"><%= f.submit "Add Item to List", class: 'btn btn-primary' %></div>
<% end %>
</div>
</div>
Here's the create method in the items_controller:
def create
#list = List.friendly.find(params[:list_id])
#item = #list.items.new(item_params)
#item.user = current_user
#new_item = Item.new
if #item.save
flash[:notice] = "Item saved successfully."
else
flash[:alert] = "Item failed to save."
end
respond_to do |format| <<<<ERROR CALLED ON THIS LINE
format.html
format.js
end
end
And here's my create.js.erb file:
<% if #item.valid? %>
$('.js-items').prepend("<%= escape_javascript(render(#item)) %>");
$('.new-item').html("<%= escape_javascript(render partial: 'items/form', locals: { list: #list, item: #new_item }) %>");
<% else %>
$('.flash').prepend("<div class='alert alert-danger'><button type='button' class='close' data-dismiss='alert'>×</button><%= flash.now[:alert] %></div>");
$('.new-item').html("<%= escape_javascript(render partial: 'items/form', locals: { list: #list, item: #item }) %>");
<% end %>
Anyone have any ideas why I am getting this? I tried removing the format.html line from the items_controller but I got an unrecognizable format error.
You can force the form submission to use a JS format, instead of the default HTML format, so that your respond_to block will render the create.js.erb view instead of the create.html.erb view.
<%= form_for([#list, #item], format: :js, remote: true) do |f| %>
Typically, Rails will detect your remote: true option via "unobtrusive JavaScript (ujs)", which will effectively handle the format: :js option for you. There is something unique in your setup that we have not identified, which is requiring you to enforce the format option.
To see that your create.js.erb is working, you can change the line that renders your item partial:
$('.js-items').prepend("<%= escape_javascript(render(#item)) %>");
To render a the item's name, wrapped in a <p> tag:
$('.js-items').prepend("<p>" + <%= #item.name %> + "</p>");
You can customize that line to generate the html that you want to appear for your new list item. Based on your code above, this looks like it will work out for you.
As you finish your to-do app, you can create a partial for your item, and then change that line again so that your partial will be appended to your list of items.

Multiple Summernote text area fields

I have two Rails forms (edit and new) that have multiple text areas. I'm trying to get all of them to use Summernote, but only one of them appears to use the javascript (the last text area if that makes a difference). How can I change it so all text areas use Summernote?
Here's the relevant code:
coffee javascript file:
$ ->
# to set summernote object
# You should change '#med_description' to your textarea input id
summer_note = $('#med_description')
summer_note2 = $('#med_reactions')
summer_note3 = $('#med_interactions')
summer_note4 = $('#med_implementation')
summer_note5 = $('#med_availability')
summer_note6 = $('#med_caution')
summer_note7 = $('#med_warnings')
# to call summernote editor
summer_note.summernote
summer_note2.summernote
summer_note3.summernote
summer_note4.summernote
summer_note5.summernote
summer_note6.summernote
summer_note7.summernote
# to set options
height:300
codemirror:
lineNumbers: true
tabSize: 2
theme: "solarized light"
# to set code for summernote
summer_note.code summer_note.val()
summer_note2.code summer_note.val()
summer_note3.code summer_note.val()
summer_note4.code summer_note.val()
summer_note5.code summer_note.val()
summer_note6.code summer_note.val()
summer_note7.code summer_note.val()
# to get code for summernote
summer_note.closest('form').submit ->
# alert $('#med_description').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note2.closest('form').submit ->
# alert $('#med_reactions').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note3.closest('form').submit ->
# alert $('#med_interactions').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note4.closest('form').submit ->
# alert $('#med_implementation').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note5.closest('form').submit ->
# alert $('#med_availability').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note6.closest('form').submit ->
# alert $('#med_caution').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note7.closest('form').submit ->
# alert $('#med_warnings').code()
summer_note.val summer_note.code()
true
edit.html.erb:
<%= form_for(#med) do |f| %>
<%= f.label :brand_name, "Name of the medicine:" %>
<div><%= f.text_field :brand_name, required: true %></div>
<%= f.label :generic_name %>
<div><%= f.text_field :generic_name, required: true %></div>
<%= f.label :description %>
<div><%= f.text_area :description, as: :summernote, :id => 'description' %></div>
<%= f.label :reactions %>
<div><%= f.text_area :reactions, as: :summernote, :id => 'reactions' %></div>
<%= f.label :interactions %>
<div><%= f.text_area :interactions, as: :summernote, :id => 'interactions' %></div>
<%= f.label :implementation %>
<div><%= f.text_area :implementation, as: :summernote, :id => 'implementation' %></div>
<%= f.label :availability %>
<div><%= f.text_area :availability, as: :summernote, :id => 'availability' %></div>
<%= f.label :caution %>
<div><%= f.text_area :caution, as: :summernote, :id => 'caution' %></div>
<%= f.label :warnings %>
<div><%= f.text_area :warnings, as: :summernote, :id => 'warnings' %></div>
<div><%= f.submit "Save changes", class: "btn btn-primary" %> </div>
<% end %>
new.html.erb:
<%= simple_form_for #med, class: "form-horizontal", method: :post do |f| %>
<div class="form-group">
<%= f.label :brand_name, "Name of the medicine:" %>
<%= f.input :brand_name, required: true %>
</div>
<div class="form-group">
<%= f.label :generic_name %>
<%= f.input :generic_name, required: true %>
</div>
<div class="form-group">
<%= f.label :description %>
<%= f.input :description, as: :summernote, :id => 'description' %>
</div>
<div class="form-group">
<%= f.label :reactions %>
<%= f.input :reactions, as: :summernote, id: 'reactions' %>
</div>
<div class="form-group">
<%= f.label :interactions %>
<%= f.input :interactions, as: :summernote, id: 'interactions' %>
</div>
<div class="form-group">
<%= f.label :implementation %>
<%= f.input :implementation, as: :summernote, id: 'implementation' %>
</div>
<div class="form-group">
<%= f.label :availability %>
<%= f.input :availability, as: :summernote, id: 'availability' %>
</div>
<div class="form-group">
<%= f.label :caution %>
<%= f.input :caution, as: :summernote, id: 'caution' %>
</div>
<div class="form-group">
<%= f.label :warnings %>
<%= f.input :warnings, as: :summernote, id: 'warnings' %>
</div>
<%= f.button :submit, class: "btn btn-primary" %>
<% end %>
Thanks!
EDIT: The Summernote github page (https://github.com/summernote/summernote-rails) shows the following code. I think it might be the best way to fix my issue. It looks like it loops through any field that has as: :summernote:
$ ->
$('[data-provider="summernote"]').each ->
$(this).summernote()
Is this the right answer? If so, how do I implement it?
The following code worked:
$ ->
$('[data-provider="summernote"]').each ->
$(this).summernote()
I placed that code above everything else I had in the coffee file and it worked fine.

Button doesn't update in Ajax on Users Index page - Rails Tutorial 4

TLDR: Trying to add a follow/unfollow button to the Users#Index action but when clicking on the button nothing happens.
I have followed Michael Hartl's Rails Tutorial app and now that it's complete I want to add extra functionality for the Follow/Unfollow button. Currently, you can only follow/unfollow a user after visiting their profile page thru the Users Show action. I've attempted to expand this functionality to the Index page of the Users controller so that instead of having to visit each user's profile page in order to follow/unfollow them, a follow button will also appear next to their name in the Index view.
The code that works initially for the follow/unfollow button on the Users Show action:
users_controller.rb
https://gist.github.com/anonymous/9602598
show.htlm.erb for users view
https://gist.github.com/anonymous/9602616
_follow_form.htlm.erb partial for users view
<% unless current_user?(#user) %>
<div id="follow_form">
<% if current_user.following?(#user) %>
<%= render 'unfollow' %>
<% else %>
<%= render 'follow' %>
<% end %>
</div>
<% end %>
_follow.html.erb partial for users view
<%= form_for(current_user.relationships.build(followed_id: #user.id),
remote: true) do |f| %>
<div><%= f.hidden_field :followed_id %></div>
<%= f.submit "Follow", class: "btn btn-large btn-primary" %>
<% end %>
_unfollow.html.erb partial for users view
<%= form_for(current_user.relationships.find_by(followed_id: #user.id),
html: { method: :delete },
remote: true) do |f| %>
<%= f.submit "Unfollow", class: "btn btn-large" %>
<% end %>
create.js.erb inside of my relationships view
$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#followers").html('<%= #user.followers.count %>')
destroy.js.erb inside of my relationships view
$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>")
$("#followers").html('<%= #user.followers.count %>')
index.html.erb inside of the users view
<%= render #users %>
_user.html.erb partial inside of users view
<li>
<%= gravatar_for user, size: 52 %>
<%= link_to user.name, user %>
<% if current_user.admin? && !current_user?(user) %>
| <%= link_to "delete", user, method: :delete,
data: { confirm: "You sure?" } %>
<% end %>
I've tried a few different approaches that so far have been fruitless
First I tried simply rendering the follow_form partial inside of the _user partial just like it's done for the User Show view
_user.html.erb partial inside of users view
<%= render 'follow_form' if signed_in? %>
this resulted in the following error: NoMethodError in Users#index "undefined method `id' for nil:NilClass" and it hilights the following line of code inside of the follow_form partial
<% if current_user.following?(#user) %>
After mucking around with the variables and the controller for a few hours I finally managed to get the buttons to show properly on the index page with the following code inside of the _user.html.erb partial
<li>
<%= gravatar_for user, size: 52 %>
<%= link_to user.name, user %>
<% if current_user.admin? && !current_user?(user) %>
| <%= link_to "delete", user, method: :delete,
data: { confirm: "You sure?" } %>
<% end %>
<% if current_user.following?(user) %>
<%= form_for(#current_user.relationships.find_by(followed_id: #users),
html: { method: :delete },
remote: true) do |f| %>
<%= f.submit "Unfollow", class: "btn btn-large" %>
<% end %>
<% else %>
<%= form_for(current_user.relationships.build(followed_id: #users),
remote: true) do |f| %>
<div><%= f.hidden_field :followed_id %></div>
<%= f.submit "Follow", class: "btn btn-large btn-primary" %>
<% end %>
<% end %>
</li>
This code however, only shows the correct follow/unfollow buttons for each user but when you click a button nothing happens. I also attempted to edit the JS files with the following code
create.js.erb
$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#user").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#followers").html('<%= #user.followers.count %>')
destroy.js.erb
$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>")
$("#user").html("<%= escape_javascript(render('users/follow')) %>")
$("#followers").html('<%= #user.followers.count %>')
This didn't have any effect.
The more I tinker with different parts of the code the more it's confusing me. Here is my relationships controller for good measure.
relationships_controller.rb
class RelationshipsController < ApplicationController
before_action :signed_in_user
def create
#user = User.find(params[:relationship][:followed_id])
current_user.follow!(#user)
respond_to do |format|
format.html { redirect_to #user }
format.js
end
end
def destroy
#user = Relationship.find(params[:id]).followed
current_user.unfollow!(#user)
respond_to do |format|
format.html { redirect_to #user }
format.js
end
end
end
I know it's alot but if anyone can help shed some light on my situation I would be very grateful. This is my first venture outside of tutorials and I figured it would be a good idea to try and add features to an already working project instead of start something from scratch.
Just in case anybody was on this question and was still looking for the correct Ajax code. This works with the existing controller and nothing else will have to be changed.
create.js.erb
var indexed_form = "follow_form_<%=#user.id%>"
if ( document.getElementById(indexed_form) ){
var jquery_indexed_form = "#" + indexed_form
$(jquery_indexed_form).html("<%= escape_javascript(render('users/unfollow')) %>");
}
else {
$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>");
$("#followers").html('<%= #user.followers.count %>');
}
destory.js.erb
var indexed_form = "follow_form_<%=#user.id%>"
if ( document.getElementById(indexed_form) ){
var jquery_indexed_form = "#" + indexed_form
$(jquery_indexed_form).html("<%= escape_javascript(render('users/follow')) %>");
}
else {
$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>");
$("#followers").html('<%= #user.followers.count %>');
}
_user.html.erb
<div class="col-md-2">
<% unless current_user?(user) %>
<% form_id = user.id.to_s %>
<div id="follow_form_<%= form_id %>">
<% if current_user.following?(user) %>
<%= form_for(current_user.active_relationships.find_by(followed_id: user.id),
html: { method: :delete },
remote: true) do |f| %>
<%= f.submit "Unfollow", class: "btn" %>
<% end %>
<% else %>
<%= form_for(current_user.active_relationships.build, remote: true) do |f| %>
<div><%= hidden_field_tag :followed_id, user.id %></div>
<%= f.submit "Follow", class: "btn btn-primary" %>
<% end %>
<% end %>
</div>
<% end %>
</div>
This is my first post. Yay! Hope it helps someone!
Use the following code in _user.html.erb partial:
<li>
<%= gravatar_for user, size: 52 %>
<%= link_to user.name, user %>
<% if current_user.admin? && !current_user?(user) %>
| <%= link_to "delete", user, method: :delete,
data: { confirm: "You sure?" } %>
<% end %>
<% if current_user.following?(user) %>
<%= form_for(current_user.relationships.find_by(followed_id: user.id),
html: { method: :delete },
remote: true) do |f| %>
<%= f.submit "Unfollow", class: "btn btn-large" %>
<% end %>
<% else %>
<%= form_for(current_user.relationships.build(followed_id: user.id),
remote: true) do |f| %>
<div><%= f.hidden_field :followed_id %></div>
<%= f.submit "Follow", class: "btn btn-large btn-primary" %>
<% end %>
<% end %>
</li>
I made couple of changes to the code in form_for method call in 2 places:
#current_user should be current_user.
Secondly, followed_id: #users should be followed_id: user.id

Dynamically add & remove new but the same fields of a form any amount times

I have a form that has no nested models.
class UserProductsController
def new
#user_product = current_user.user_products.build
end
end
With jquery/javascript i want to add and remove new #user_product fields on the same form. This how it would look normally:
<%= form_for(#user_product) do |f| %>
<%= f.error_messages %>
<%= f.text_field :product %>
<%= f.text_field :address %>
<%= f.text_field :price %>
<%= f.submit %>
<% end %>
And I'm trying to achieve:
<%= form_for(#user_product) do |f| %>
<%= f.error_messages %>
<%= f.text_field :product_name %>
<%= f.text_field :address %>
<%= f.text_field :price %>
---New ID(New generated ID, could be any new number in the database)
<%= f.text_field :product_name %>
<%= f.text_field :address %>
<%= f.text_field :price %>
<%= Remove this Product %> # ajax style, this link removes this product entirely
----ID 3----
<%= f.text_field :product_name %>
<%= f.text_field :address %>
<%= f.text_field :price %>
<%= Remove this Product %>
-----Add link------
<%= Add Another Field %> # ajax style adding
<%= f.submit %>
<% end %>
Notice the new IDs that aren't preset and the one submit button so this way more then one Product can be created at a time by a User. How do i achieve the above?
Thank you.
Answer:
Using the User.rb model you can do what James said. Here is my form that works.
<%= form_for(current_user, :url => user_products_path) do |f| %>
<%= f.error_messages %>
<%= f.fields_for :user_products do |builder| %>
<%= render "user_product_fields", :f => builder %>
<% end %>
<%= link_to_add_fields "Add a UserProduct", f, :user_products %>
<%= f.submit "Create" %>
<% end %>
_user_product_fields.html.erb
<div class="fields">
<%= f.label :product, "Product" %>
<%= f.text_field :product %>
<%= f.label :address, "Address" %>
<%= f.text_field :address %>
<%= f.label :price %>
<%= f.text_field :price %>
<%= link_to_remove_fields "remove", f %>
</div>
As others have suggested (somewhat unhelpfully), use nested forms.
You need the form to be based on the current_user object with fields_for declaration for :user_products. You will need to set the url for the form to post back to the user_product controller not the user controller using url_for and you will need to adjust the user_product controllers update and create actions to make use of params[:user] instead of params[:user_product]
If you have your accepts_nested_attributes configured properly all should be good.
BTW if you follow those railscasts you will find that the javascript to add new will not work for Rails 3.x
You should use something like this for your view helpers
module ApplicationHelper
def link_to_remove_fields(name, f)
f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
end
def link_to_add_fields(name, f, association)
new_object = f.object.class.reflect_on_association(association).klass.new
fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
render(association.to_s.singularize + "_fields", :f => builder)
end
link_to_function(name, "add_fields(this, '#{association}', '#{escape_javascript(fields)}')")
end
end
and something like this for your javascript in your application.js file
// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
function remove_fields(link) {
$(link).previous("input[type=hidden]").value = "1";
$(link).up(".fields").hide();
}
function add_fields(link, association, content) {
var new_id = new Date().getTime();
var regexp = new RegExp("new_" + association, "g")
$(link).up().insert({
after: content.replace(regexp, new_id)
});
}
and obviously your form_for need to be refactored to something like this
<%= form_for(current_user, :url => user_product_path) do |f| %>
<!-- add your f.fields_for :user_products here, probably in a rendered partial -->
<%end%>
That should be enough with the rails casts to get you going
Checkout this:
http://railscasts.com/episodes/196-nested-model-form-part-1
http://railscasts.com/episodes/197-nested-model-form-part-2
You can use cocoon for this.

Categories

Resources