jQuery plugin for Rails Nested Attributes
jQuery plugin that makes it easy to dynamically add and remove records when using ActiveRecord's nested attributes.
Installation w/ Rails asset pipeline
- Download your flavor of jquery.nested_attributes (JS or Coffee)
- Add it to vendor/assets/javascripts
- Include it in your app's JS manifest
Usage
Markup
<div id="container">
<%= form.fields_for :collection do |collection_fields| %>
<div>
<%= collection_fields.label :field_name %>
<%= collection_fields.text_field :field_name %>
<a href="#" class="destroy">×</a>
</div>
<% end %>
</div>
<a href="#" id="add_another">+ add another</a>All immediate descendants of #container (children) will be considered sets of nested attributes. Don't add anything else as immediate descendents.
JavaScript (in its simplest form)
$("#container").nestedAttributes({
bindAddTo: $("#add_another")
});Options (defaults shown)
{
collectionName: false, // If not provided, we will attempt to autodetect. Provide this for complex collection names
bindAddTo: false, // Required unless you are implementing your own add handler (see API below). The single DOM element that when clicked will add another set of fields
removeOnLoadIf: false, // Function. It will be called for each existing item, return true to remove that item
collectIdAttributes: true, // Attempt to collect Rail's ID attributes
beforeAdd: false, // Function. Callback before adding an item. Returning false from the callback stops the add process.
afterAdd: false, // Function. Callback after adding an item
beforeMove: false, // Function. Callback before updating indexes on an item
afterMove: false, // Function. Callback after updating indexes on an item
beforeDestroy: false, // Function. Callback before destroying an item. Returning false from the callback stops the destroy process.
afterDestroy: false, // Function. Callback after destroying an item
destroySelector: '.destroy', // Pass in a custom selector of an element in each item that will destroy that item when clicked
deepClone: true, // Do you want jQuery to deep clone the element? Deep clones preserve events. Undesirable when using BackBone views for each element.
$clone: null // Pass in a clean element to be used when adding new items. Useful when using plugins like jQuery UI Datepicker or Select2. Use in conjunction with `afterAdd`.
}Example of a helpful beforeDestroy callback to prevent destroy
$("#container").nestedAttributes({
bindAddTo: $("#add_another"),
beforeDestroy: function() {
return confirm("Are you sure?");
}
});API
Adding an item
Should you need to add an item programmatically (rather than when the user clicks the bindAddTo element), jquery.nestedAttributes exposes an add method for this.
Optionally pass a callback as the second parameter for easy access to the newly added element after its been inserted into the DOM.
$('#container').nestedAttributes("add" [, callback($element)]);