/jquery-nested_attributes

jQuery plugin that makes it easy to dynamically add and remove records when using ActiveRecord's nested attributes

Primary LanguageCoffeeScript

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

  1. Download your flavor of jquery.nested_attributes (JS or Coffee)
  2. Add it to vendor/assets/javascripts
  3. 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)]);

Credits

Contributors

Sponsor

philosophie