Skip to content

Nested fields using vanilla JavaScript

License

Notifications You must be signed in to change notification settings

ProctorU/parliament

Repository files navigation

Parliament 🔨

Vanilla JavaScript nested form builder. Its name is derived from ProctorU's mascot, which is an owl. A group of owls when assembled is called a parliament, and it was in fact a parliament that created this gem.

Table of contents

Installation

Add this line to your application's Gemfile:

gem 'parliament'

And then execute:

$ bundle

Or install it yourself as:

$ gem install parliament

Note: If you use turbolinks, this should be placed after loading turbolinks.

In your application.js:

//= require parliament

Usage

Models

  • Add accepts_nested_attributes_for to your parent.
  • Add belongs_to to your association.

Controllers

Add the parameters to your controllers for strong params

  • id and _destroy are required for Strong Params.

Example:

# Projects Controller
# app/controllers/projects_controller.rb

private

def project_params
  params.require(:project).permit(:name, :description, tasks_attributes: [:id, :description, :done, :_destroy])
end

Form

  • Add a fields_for loop that you render your fields partial from, passing each object to it.
  • Ensure you call the f.add_association helper where you want the link displayed that a user will press to inject another field onto the DOM.

In the case of a Project/Tasks association:

Example:

# Rest of file omitted
<div class="form-group">
  <%= f.label(:tasks) %>

  <%= f.fields_for :tasks do |task| %>
    <%= render 'task_fields', f: task %>
  <% end %>

  <%= f.add_association 'Add Task',
    'tasks',
    class: 'btn btn-secondary btn-sm' %>
</div>

# Rest of file omitted

Inside of your record's fields partial:

  • Use the f.remove_association helper. This will execute JavaScript to remove the proper element from the page.
  • Ensure the contents of the fields are wrapped in a div with the nested-fields CSS class.

_task_fields.html.erb

<div class="nested-fields">
  <%= f.text_field :description, class: "form-control" %>

  <%= f.check_box :done %>
  <%= f.label :done %>

  <%= f.remove_association 'Remove', { class: 'btn btn-outline-danger' } %>
</div>

Developing

  1. Thank you! We love our contributors!
  2. Clone the repository.
  3. Make your changes in a thoughtfully-named branch.
  4. Ensure 1:1 test coverage.
  5. Submit a Pull Request!
  6. Celebrate! 🎉

License

This project uses MIT-LICENSE.

Credits

Parliament is maintained and funded by ProctorU, a simple online proctoring service that allows you to take exams or certification tests at home.


About

Nested fields using vanilla JavaScript

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •