https://github.com/kanety/jquery-nested-form

https://github.com/kanety/jquery-nested-form

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/kanety/jquery-nested-form
• Owner: kanety
• License: mit
• Created: 2018-12-02T02:17:05.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2021-08-21T13:17:57.000Z (over 3 years ago)
• Last Synced: 2024-10-31T17:45:39.075Z (3 months ago)
• Language: JavaScript
• Size: 49.8 KB
• Stars: 7
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jquery-nested-form

A jquery plugin for adding / removing Rails nested form dynamically.

## Dependencies

* jquery

## Installation

Install from npm:

    $ npm install @kanety/jquery-nested-form --save

## Usage

Build nested form using Rails `fields_for` as usual:

```erb

<%= form_with do |f| %>

  


    <%= f.fields_for :assocs do |assoc_form| %>

      


        <%= assoc_form.text_field :text %>

        Remove

      

    <% end %>

    Add

  

<% end %>

```


Then run:

```javascript

$('#container').nestedForm({

  forms: '.nested-form',

  adder: '#add',

  remover: '.remove',

  associations: 'assocs'

});

```

New nested form is added when the `#add` button is clicked.

The last elements of the `.nested-form` are used as a template to be added.

The index of `id` and `name` attributes are incremented automatically.

```html

  


    


      

    

    


      

    

    Add

  


```

### Options

`associations` and `postfixes` are available for finding the index of the nested form.

If your nested form consists of multiple associations such as `assocsA` and `assocsB`, you can set the associations as the following example:

```javascript

$().nestedForm({

  associations: ['assocsA', 'assocsB'],

  postfixes: '_attributes'

});

```

`tags` and `attributes` are available to customize the attributes to be replaced:

```javascript

$().nestedForm({

  tags: $.NestedForm.getDefaults().tags.concat(['a']),

  attributes: $.NestedForm.getDefaults().attributes.concat(['onclick'])

});

```

`max` is useful if you want to disable the add button when the number of nested forms reached to the limit:

```javascript

$().nestedForm({

  max: 10

});

```

### Callbacks

Following callbacks are available to manipulate DOM elements:

```javascript

$().nestedForm({

  afterInitialize: function(instance) {},

  onBuildForm: function($form) {},

  beforeAddForm: function($container, $form) {},

  afterAddForm: function($container, $form) {},

  beforeRemoveForm: function($form) {},

  afterRemoveForm: function($form) {}

});

```

### Multi-level nested form

If you have multi-level nested form, use `nestedForm` as follows:

```erb

<%= form_with do |f| %>

  


    <%= f.fields_for :assocs do |assoc_form| %>

      


        <%= assoc_form.text_field :text %>

        


          <%= assoc_form.fields_for :assocs2 do |assoc2_form| %>

            


              <%= assoc2_form.text_field :text %>

            

          <% end %>

          
Add

        

      

    <% end %>

    
Add

  

<% end %>

```


```javascript

$('#container').nestedForm({

  forms: '.nested-form',

  adder: '.add',

  nestedForm: {

    forms: '.deep-nested-form',

    adder: '.deep-add'

  }

});

```

The `nestedForm` option handles same arguments as the first-level form.

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).