Efficient Checkbox Implementation in ActiveAdmin for Rails 3.1

Question

Efficient Checkbox Implementation in ActiveAdmin for Rails 3.1

This query actually encompasses two related inquiries.

Enabling "Select all" functionality - In the realm of formtastic, which is used by Active_admin to render forms, how can I implement a button that selects all checkboxes present on the page? While achieving this using JavaScript is plausible, I am uncertain about the process within formtastic.
Adjusting collection based on selection: Within a dropdown menu offering a list of courses for selection, I aim to dynamically display a checkbox list containing students enrolled in the chosen course. Essentially, the list of students ought to update based on the course selected by the user.

course.rb

has_and_belongs_to_many :students

student.rb

has_and_belongs_to_many :courses

javascript ruby-on-rails-3.1 checkbox formtastic activeadmin

Answer 1

Answer №1

If you're looking to implement a "select all" checkbox with Formtastic and JQUERY, here's how you can do it:

First, in your student.rb model, add the following code:

attr_accessor :select_all_courses

f.inputs "Courses" do
  f.input :select_all_courses, :as => :boolean, :label => 'SELECT ALL', :input_html => {:onclick => "jQuery.each( $('.student_courses_checkboxes'), function() { this.checked = $('.all_selector')[0].checked });", :class => "all_selector"}  
  f.input :courses, :as => :check_boxes, :collection => @courses, :input_html => {:class => 'student_courses_checkboxes'}

However, please note that the only option in active admin with formtastic is:

In your course form

f.input :students, :as => :check_boxes, :collection => @students

Answer 2

If you're looking to implement a "select all" checkbox with Formtastic and JQUERY, here's how you can do it:

First, in your student.rb model, add the following code:

attr_accessor :select_all_courses

f.inputs "Courses" do
  f.input :select_all_courses, :as => :boolean, :label => 'SELECT ALL', :input_html => {:onclick => "jQuery.each( $('.student_courses_checkboxes'), function() { this.checked = $('.all_selector')[0].checked });", :class => "all_selector"}  
  f.input :courses, :as => :check_boxes, :collection => @courses, :input_html => {:class => 'student_courses_checkboxes'}

However, please note that the only option in active admin with formtastic is:

In your course form

f.input :students, :as => :check_boxes, :collection => @students

Answer 3

Answer №2

To streamline the process of adding Select All/Select None buttons to checkbox group inputs, I incorporated a snippet of javascript into active_admin.js (which I renamed from active_admin.js.coffee as CoffeeScript wasn't being utilized).

//= require active_admin/base

$( document ).ready(function() {
    var $select_btns = $('<li class="choice"><div class="select-btn-container"><button class="select_all">Select all</button><button class="select_none">Deselect all</button></div></li>');
    $('.inputs .check_boxes').each(function (i, el) {
        $(el).find('.choices-group').prepend($select_btns.clone());
    });

    $('.inputs')
        .on('click', '.select_all', function () {
            var $check_boxes = $(this).parents('.choices-group').find('input');
            $check_boxes.each(function () {
                this.checked = true;
            });
            return false;
        })
        .on('click', '.select_none', function () {
            var $check_boxes = $(this).parents('.choices-group').find('input');
            $check_boxes.each(function () {
                this.checked = false;
            });
            return false;
        });
});

This implementation has been tested on ActiveAdmin 1.0.0 with Rails 4.0.4. Hopefully, this solution proves beneficial.

Answer 4

To streamline the process of adding Select All/Select None buttons to checkbox group inputs, I incorporated a snippet of javascript into active_admin.js (which I renamed from active_admin.js.coffee as CoffeeScript wasn't being utilized).

//= require active_admin/base

$( document ).ready(function() {
    var $select_btns = $('<li class="choice"><div class="select-btn-container"><button class="select_all">Select all</button><button class="select_none">Deselect all</button></div></li>');
    $('.inputs .check_boxes').each(function (i, el) {
        $(el).find('.choices-group').prepend($select_btns.clone());
    });

    $('.inputs')
        .on('click', '.select_all', function () {
            var $check_boxes = $(this).parents('.choices-group').find('input');
            $check_boxes.each(function () {
                this.checked = true;
            });
            return false;
        })
        .on('click', '.select_none', function () {
            var $check_boxes = $(this).parents('.choices-group').find('input');
            $check_boxes.each(function () {
                this.checked = false;
            });
            return false;
        });
});

This implementation has been tested on ActiveAdmin 1.0.0 with Rails 4.0.4. Hopefully, this solution proves beneficial.

Efficient Checkbox Implementation in ActiveAdmin for Rails 3.1

course.rb

student.rb

Answer №1

Answer №2

Similar questions

Reading properties of undefined in React is not possible. The log method only functions on objects

Vue plugins that emit events

Is there a way to successfully include an apostrophe in a URL?

Troubleshooting issue with displaying favicons in express.js

Unable to locate web element using Selenium in C#

What is the best way to create a JavaScript button that can be clicked to increase a variable by 1?

Steps for assigning distinct identifiers to information entered through an input form

Switching the vertical alignment of grid items in Material UI when the page is collapsed

The module 'NgAutoCompleteModule' was declared unexpectedly by the 'AppModule'. To fix this issue, make sure to add a @Pipe/@Directive/@Component annotation

Arranging elements on a webpage using Javascript

Using the goBack function in React Router does not add the previous location to the stack

The function 'myfunc' was called within a render, however, it is not defined in the instance

Retrieving data from a collection with the find() method in a custom date format

Synchronous AJAX requests do not function properly in IE and Firefox, but they do work in Chrome and Safari

Using a JavaScript if statement to check the height of a specific HTML element

Error: Unable to access the 'map' property of an undefined object......Instructions on retrieving a single post

Tips for transitioning frontend JS to Angular 2 for seamless integration with a PHP MVC backend system

Show a string on different lines

Unable to pass data from a Jquery ajax request to another function

Adding Tooltips to Your Bootstrap 5 Floating Labels Form: A Step-by-Step Guide