Created
April 3, 2011 06:42
-
-
Save carpeliam/900241 to your computer and use it in GitHub Desktop.
jQuery template solution for nested forms in rails
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- app/views/project_roles/_form.html.erb --> | |
<div class="projectRole"> | |
<%= form.label :name %> | |
<%= form.text_field :name %> | |
<!-- etc etc etc --> | |
<!-- the JS down below relies on the following two lines being next to each other --> | |
<%= form.hidden_field '_destroy' unless form.object.new_record? %> | |
<a href="#" class="removeNestedItem">Delete</a> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- app/views/project_roles/_template.html.erb --> | |
<script type="text/x-jquery-tmpl"> | |
<%= render :partial => '/project_roles/form', :locals => {:form => form} %> | |
</script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
$('.addNestedItem').click(function() { | |
var template = $(this).prevAll('script[type=text/x-jquery-tmpl]:first').tmpl({index: new Date().getTime()}); | |
$(this).before(template); | |
return false; | |
}); | |
$('.removeNestedItem').live('click', function() { | |
var hiddenField = $(this).prev('input[type=hidden]'); | |
if (hiddenField.length != 0) | |
hiddenField.val('1').appendTo($(this).closest('form')); | |
$(this).closest('div').remove(); | |
return false; | |
}); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- app/views/projects/edit.html.erb --> | |
<% form_for @project do |f| -%> | |
<% form.fields_for :project_roles, ProjectRole.new, :child_index => '${index}' do |tmpl_form| %> | |
<%= render :partial => '/project_roles/template', :locals => {:form => tmpl_form} %> | |
<% end %> | |
<div id="projectRoles"> | |
<% form.fields_for :project_roles do |pr_form| %> | |
<%= render :partial => '/project_roles/form', :locals => {:form => pr_form} %> | |
<% end %> | |
</div> | |
<a href="#" class="addNestedItem" rel="#tmplProjectRole">Add a Project Role</a> | |
<% end %> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class Project < ActiveRecord::Base | |
has_many :project_roles | |
accepts_nested_attributes_for :project_roles, :allow_destroy => true | |
end |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class ProjectRole < ActiveRecord::Base | |
belongs_to :project | |
end |
In your
edit.html.erb
on lines 4 and 8 should it bef.fields_for
instead ofform.fields_for
?
@tekHudson maybe! Honestly this is from so long ago, and probably relies on whatever conventions existed for Rails 3 or whichever version of Rails existed 9 years ago when I originally wrote this. If f.fields_for
works in your version of Rails, then yes! I've moved away from this type of server-rendered client-side code myself, for better or for worse. Best of luck! Sorry I couldn't be more sure of my answer.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In your
edit.html.erb
on lines 4 and 8 should it bef.fields_for
instead ofform.fields_for
?