Creating a dynamic dropdown in a Rails application using the simple_form gem

Question

Creating a dynamic dropdown in a Rails application using the simple_form gem

In my Rails application, I have a straightforward has_many and belongs_to relationship. Using simple_form, I am looking to dynamically adjust the dropdown options based on the selection made by the user.

Models

 class Processor < ApplicationRecord
   has_many :processor_bank_accounts
 end

 class ProcessorBankAccount < ApplicationRecord
   belongs_to :processor

Form inputs

<%= simple_form_for [@customer, @transaction] do |f| %>
<%= f.error_notification %>

<div class="form-inputs">
  <%= f.input :status, :collection => ["payment request"], include_blank: false %>
  <%= f.input :processor, collection: @processors ,label_method: :name,value_method: :id,label: "Processor" , include_blank: false %>
  <%= f.input :processor_bank_account, collection: @bank_accounts , label_method: :bank_name, value_method: :id, label: "Processor Bank Account" , include_blank: true %>
  <%= f.input :tcurrency, collection: @currencies, include_blank: false, label: 'currency' %>
  <%= f.input :amount, as: :decimal, label: 'amount' %>
</div>

<div class="form-actions text-center">
  <%= f.button :submit, "Add transaction", class: "form-button"%>
</div>
<% end %>

To clarify, I would like the processor_bank_account dropdown to be populated based on the processor selected by the user. The console command for this is: ProcessorBankAccount.where(processor: processor).

I believe I need to use JSON and implement JavaScript to load the options accordingly, but I'm uncertain about the next steps. Any guidance in this matter would be greatly appreciated.

javascript ruby-on-rails json ajax

Answer 1

Answer №1

To simplify the process, you can utilize jQuery for an AJAX call to a controller action in Rails and then generate the necessary content with an erb template.

On your website, trigger the action through AJAX when the form is submitted:

<script>
    $(document).ready(function() {
        $('#processor_id').on('change', function() {
            $.ajax({
                url: '/transactions/get_processor_bank_accounts',
                type: 'GET',
                data: {
                    processor_id: this.value
                },
                dataType: 'script',
                error: function() {
                    alert('An error occurred retrieving bank accounts for the selected processor.');
                }
            });
        });
    });
</script>

Note that #processor_id corresponds to the ID of your dropdown element.

In the controller action, retrieve and assign the bank accounts:

def get_processor_bank_accounts
  @processor_bank_accounts = ProcessorBankAccount.where(processor_id: params[:processor_id])
end

Lastly, design a view that will populate your dropdown with the retrieved bank account options:

$select_list = $('#processor_id');
$select_list.empty();

<% @processor_bank_accounts.each do |pba| %>
  $select_list.append($('<option value="<%= pba.id %>"><%= pba.name %></option>'));
<% end %>

Answer 2

To simplify the process, you can utilize jQuery for an AJAX call to a controller action in Rails and then generate the necessary content with an erb template.

On your website, trigger the action through AJAX when the form is submitted:

<script>
    $(document).ready(function() {
        $('#processor_id').on('change', function() {
            $.ajax({
                url: '/transactions/get_processor_bank_accounts',
                type: 'GET',
                data: {
                    processor_id: this.value
                },
                dataType: 'script',
                error: function() {
                    alert('An error occurred retrieving bank accounts for the selected processor.');
                }
            });
        });
    });
</script>

Note that #processor_id corresponds to the ID of your dropdown element.

In the controller action, retrieve and assign the bank accounts:

def get_processor_bank_accounts
  @processor_bank_accounts = ProcessorBankAccount.where(processor_id: params[:processor_id])
end

Lastly, design a view that will populate your dropdown with the retrieved bank account options:

$select_list = $('#processor_id');
$select_list.empty();

<% @processor_bank_accounts.each do |pba| %>
  $select_list.append($('<option value="<%= pba.id %>"><%= pba.name %></option>'));
<% end %>

Answer 3

Answer №2

Here is the solution I devised:

1) Implemented a new method in my processors controller to generate JSON formatted inputs for the dynamic dropdown:

def processor_bank_accounts
 render json: @processor.processor_bank_accounts.map { |bap| { id: bap.id, name: bap.name } }
end

2) Linked this method to a new route in config/routes:

get 'api/bankaccounts', to: 'processors#processor_bank_accounts', as: 'bankaccounts'

3) Developed a JavaScript function to call the route with the selected processor's ID from the first dropdown and populate the second dropdown with data from the JSON array:

// select elements
const processor = document.getElementById("transaction_processor");
const bapSelect = document.getElementById("transaction_processor_bank_account");

function update_baps(processor_id) {
 const url = `INSERTWEBURLHERE/api/bankaccounts?id=${processor_id}`;
 fetch(url)
 .then(response => response.json())
 .then(data => {
  bapSelect.innerHTML = ""; // clear second dropdown
  data.forEach(bap => { // iterate through all BAPs
  const elem = `<option value="${bap.id}">${bap.bank_name}</option>`; // create option elements for the second dropdown using bank_name as the label
  bapSelect.insertAdjacentHTML("beforeend", elem); // insert options into the dropdown
  });
 });
}

4) Set up the JS event listener to trigger the function when the first dropdown field is changed:

processor.addEventListener('change', () => {
 update_baps(parseInt(processor.value));
});

Answer 4

Here is the solution I devised:

1) Implemented a new method in my processors controller to generate JSON formatted inputs for the dynamic dropdown:

def processor_bank_accounts
 render json: @processor.processor_bank_accounts.map { |bap| { id: bap.id, name: bap.name } }
end

2) Linked this method to a new route in config/routes:

get 'api/bankaccounts', to: 'processors#processor_bank_accounts', as: 'bankaccounts'

3) Developed a JavaScript function to call the route with the selected processor's ID from the first dropdown and populate the second dropdown with data from the JSON array:

// select elements
const processor = document.getElementById("transaction_processor");
const bapSelect = document.getElementById("transaction_processor_bank_account");

function update_baps(processor_id) {
 const url = `INSERTWEBURLHERE/api/bankaccounts?id=${processor_id}`;
 fetch(url)
 .then(response => response.json())
 .then(data => {
  bapSelect.innerHTML = ""; // clear second dropdown
  data.forEach(bap => { // iterate through all BAPs
  const elem = `<option value="${bap.id}">${bap.bank_name}</option>`; // create option elements for the second dropdown using bank_name as the label
  bapSelect.insertAdjacentHTML("beforeend", elem); // insert options into the dropdown
  });
 });
}

4) Set up the JS event listener to trigger the function when the first dropdown field is changed:

processor.addEventListener('change', () => {
 update_baps(parseInt(processor.value));
});

Answer 5

Answer №3

Make sure to assign unique identifiers (IDs) to your select options in order to easily target them with your script.

$('select#cpu').on('change', function() {
      var cpu_id = this.value;
      var cpu_bank_account = $('select#cpu_bank_account');

      $.ajax({
        type: "POST", 
        url: <%= api_path %> ,
        data: { cpu_id: cpu_id },
        success: function(response, status, xhr){
          cpu_bank_account.empty();
          var new_option = new Option(response.bank_name, response.id, false, false);
          cpu_bank_account.append(new_option);
        },
        error: function(xhr, status, error){...}
      });
 });

Answer 6

Make sure to assign unique identifiers (IDs) to your select options in order to easily target them with your script.

$('select#cpu').on('change', function() {
      var cpu_id = this.value;
      var cpu_bank_account = $('select#cpu_bank_account');

      $.ajax({
        type: "POST", 
        url: <%= api_path %> ,
        data: { cpu_id: cpu_id },
        success: function(response, status, xhr){
          cpu_bank_account.empty();
          var new_option = new Option(response.bank_name, response.id, false, false);
          cpu_bank_account.append(new_option);
        },
        error: function(xhr, status, error){...}
      });
 });

Creating a dynamic dropdown in a Rails application using the simple_form gem

Models

Form inputs

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting an issue with Laravel's Bootstrap 5.2 dropdown functionality

Discover how to efficiently load and display a JSON array or object using JavaScript

The issue I'm facing is that the ng-click functionality in Angular JS is not functioning properly when the

Issue with decodeURI function causing hyperlinks to display as plain text

The application monitored by nodemon has halted - awaiting modifications in files before restarting the process

Validation messages in an Angular application using Typescript are failing to display or disappear sporadically when applied to an HTML form that has

Remove text from input field and deactivate button upon clicking in AngularJS

Having trouble passing a jQuery variable containing a string value to PHP through the jQuery AJAX function?

A guide on updating the SQL order value through a select option using PHP and jQuery

Adding new users to the Ajax Chat Script is an essential process that can enhance communication

Asynchronous handling of Three.JS geometry operations

Guide on uploading a file to Amazon Glacier with Node.js

What are the steps to implement string interpolation within a template element in Vue.js?

Steering clear of using relative paths for requiring modules in Node.js

Custom value in Field for radio type in Redux form

Button to close Jquery Dialog

Display XML information when a row in the table is selected

Implement a functionality where data is fetched from a MYSQL database using JSON when an item is clicked on the list

At times, Mongoose may return null, while other times it returns data frequently

After refreshing the page, the ngRoute white page is displayed