<input-many>

Creates a sub-section of the form which the user can repeat using (+) and (-) buttons, in order to allow an entire has_many collection to be created/edited in a single form.

This tag is very different from tags like <select-many> and <check-many> in that:

  • Those tags are used to choose existing records to include in the association, while <input-many> is used to actually create or edit the records in the association.

Parameters

  • li
    • default
      • field-list
    • remove-item
    • add-item
  • li
    • empty-message
    • remove-item
    • add-item
  • li
    • default
      • field-list
    • remove-item
    • add-item
  • li
    • default
      • field-list
    • remove-item
    • add-item

Example

Say you are creating a new Category in your online shop, and you want to create some initial products in the same form, you can add the following to your form:

<input-many:products fields="name, price"/>

which is the same as

<input-many:products><field-list fields="name, price"/></input-many>

The body of the tag will be repeated for each of the current records in the collection, or will just appear once (with blank fields) if the colleciton is empty.

Attributes

  • fields: If you do not specify any content for the input-many, a <field-list> is rendered. This attribute is passed through to the <field-list>

  • skip: Passed through to the <field-list>. If not specified, it defaults to the parent association.

  • minimum: the minimum number of items in the collection. Currently only ‘0’ and ‘1’ are supported values. The default is ‘0’.

  • template: the default values for new items. Normally this functionality is better provided by Model.new, but it’s here if you need it.

  • add-hook, remove-hook: javascript hooks which work similarly to the events described below.

Events

  • rapid:add: fired after the element is inserted

  • rapid:remove: fired before the element is inserted. Returning false will cancel the removal.

  • rapid:change: fired after an element has been removed or inserted.

  • hide, show: passed to jquery-ui’s hide and show functions.

Example javascript:

  var last_added;
  var last_removed;
  $(document).ready(function() {
    $('.stories').on('rapid:add', function(ev) {
      last_added = this;
    });
    $('.stories').on('rapid:remove', function(ev) {
      last_removed = this;
      if(!confirm("really?")) return false;
    });
  });

Example

Say you are creating a new Category in your online shop, and you want to create some initial products in the same form, you can add the following to your form:

<input-many:products fields="name, price" />

You’ll often want to provide the item parameter:

<input-many:products><item:><field-list fields="name, price" /></item:></input-many>

A fully worked up example of nested input-many’s may be found in agility/jquery-test

Show Source

Related Tags


Edit this page