I'm using the cocoon gem on my rails app and I have two nested fields inside a form (categories, subcategories). Initially I'm showing the first one only and the second one is hidden. Each time the first select fields has subcategories the second field gets populated and appears.
The nested fields:
<div class="nested-fields">
<%= form.input :category, collection: #categories, as: :grouped_select, group_method: :children, :label => false, :include_blank => true, input_html: { id: "first_dropdown" } %>
<div class="show_hide">
<%= form.input :subcategories, label: false, :collection => [], :label_method => :name, :value_method => :id, required: true, input_html: { multiple: true, id: "second_dropdown" } %>
</div>
<div class="links">
<%= link_to_remove_association "Remove", form %>
</div>
</div>
This is the code to initially hide the second field
$('#first_dropdown').keyup(function() {
if ($(this).val().length == 0) {
$('.show_hide').hide();
}
}).keyup();
This is the code to show the second select input when the first select input has subcategories:
def select_item
category = Category.find params[:category_id]
render json: category.children
end
$('#first_dropdown').on('change', function() {
$.ajax({
url: 'categories/select_item?category_id=' + $(this).val(),
dataType: 'json',
success: function(data) {
let childElement = $('#second_dropdown');
if( data.length === 0 ) {
$('.show_hide').hide();
} else {
$('.show_hide').show();
}
childElement.html('');
data.forEach(function(v) {
let id = v.id;
let name = v.name;
childElement.append('<option value="' + id + '">' + name + '</option>');
});
}
});
});
Everything works well for the initial opened field. But when I add more fields and select a value inside any of the first select fields it populates all of the second fields according to that value. I think it's because I'm using specific id's for this and when I add more fields, all of them end up having the same id's. How can I set this up so I properly populate the second select field each time I add more nested fields to the form?
I'd give your selects classes instead of ids:
<div class="nested-fields">
<%= form.input :category, collection: #categories, as: :grouped_select, group_method: :children,
label: false, include_blank: true, input_html: { class: "first_dropdown" } %>
<% if f.object.category && f.object.category.sub_categories.length > 0 %>
<div class="show_hide">
<%= form.input :subcategories, label: false, collection: form.object.category.subcategories, label_method: :name,
value_method: :id, required: true, input_html: { multiple: true, class: "second_dropdown" } %>
</div>
<% else %>
<div class="show_hide" style="display: none;">
<%= form.input :subcategories, label: false, collection: [], label_method: :name,
value_method: :id, required: true, input_html: { multiple: true, class: "second_dropdown" } %>
</div>
<% end %>
<div class="links">
<%= link_to_remove_association "Remove", form %>
</div>
</div>
then find the second select relative to the first one adding this to a page specific js file:
$(document).on('turbolinks:load cocoon:after-insert', function(){
$('.first_dropdown').off('change').on('change', function(){
let $this = $(this);
let $second = $this.closest('.nested-fields').find('.second_dropdown');
$second.children().remove();
$second.closest('.show_hide').hide();
if ($this.val() !== '') {
$.ajax({
url: 'categories/select_item?category_id=' + $(this).val(),
dataType: 'json',
success: function(data){
if (data.length > 0) {
$second.append('<option value=""></option>');
data.forEach(function(v) {
let id = v.id;
let name = v.name;
$second.append('<option value="' + id + '">' + name + '</option>');
});
$second.closest('.show_hide').show();
}
}
})
}
});
});
Related
I'm learning Turbo Frames and Streams + Stimulus so it's possible I'm not 100% on track. I have a form for creating a new object, but within the form I'd like to have a select component that will display certain fields depending on the selection. It's important to note that due to this, I do not want to submit the form until the user has made this selection.
This is what I have:
_form.html.erb
<div class="form-group mb-3">
<%= form.label :parking, class: 'form-label' %>
<%= form.number_field :parking, class: 'form-control' %>
</div>
<%= turbo_frame_tag "turbo_transactions" do %>
<%= render 'property_transactions' %>
<% end %>
_property_transactions.html.erb
<div class="form-group mb-3" data-controller="property-transaction">
<%= label_tag :property_transactions, 'Property in:', class: 'form-label' %>
<%= select_tag :property_transactions, options_for_select(#property_transactions.collect {|p| [p.name, p.id]}), { data:
{ action: "property-transaction#redraw", property_transaction_target: 'transaction', turbo_frame: 'turbo_transactions' },
class: 'form-control', prompt: '', autocomplete: 'off' } %>
</div>
<% if #property_transaction %>
<%= turbo_frame_tag #property_transaction.en_translation_key do %>
<div class="form-group mb-3">
<%= render #property_transaction.en_translation_key %>
</div>
<% end %>
<% end %>
property_transaction_controller.js
import { Controller } from "#hotwired/stimulus";
import Rails from "#rails/ujs";
export default class extends Controller {
static targets = [ "transaction" ];
redraw() {
const params = { property_transaction: this.transaction };
Rails.ajax({
type: 'post',
dataType: 'json',
url: "/set_property_transaction",
data: new URLSearchParams(params).toString(),
success: (response) => { console.log('response', response) }
});
}
get transaction() {
return this.transactionTarget.value;
}
}
property_controller.rb
def set_property_transaction
respond_to do |format|
format.json
format.turbo_stream do
if #property_transactions
#property_transaction = #property_transactions.select { |p| p.id == property_transaction_params }
else
#property_transaction = PropertyTransaction.find(property_transaction_params)
end
end
end
end
set_property_transaction.turbo_stream.erb
<%= turbo_stream.replace #property_transaction.en_translation_key %>
_rent.html.erb
<%= turbo_frame_tag "rent" do %>
<!-- some input fields -->
<% end %>
_rent_with_option_to_buy.html.erb
<%= turbo_frame_tag "rent-with-option-to-buy" do %>
<!-- other input fields -->
<% end %>
_sale.html.erb
<%= turbo_frame_tag "sale" do %>
<!-- more input fields -->
<% end %>
When selecting the option, this error happens:
Started POST "/set_property_transaction" for ::1 at 2022-09-07 19:49:03 -0600
Processing by PropertiesController#set_property_transaction as JSON
Parameters: {"property_transaction"=>"2"}
Completed 406 Not Acceptable in 223ms (ActiveRecord: 0.0ms | Allocations: 1879)
ActionController::UnknownFormat (PropertiesController#set_property_transaction is missing a template for this request format and variant.
request.formats: ["application/json", "text/javascript", "*/*"]
request.variant: []):
My understanding to this is that I'm missing the set_property_translation template, but I do have it. Not sure what else could I do to make it recognizable.
Les Nightingill's comment definitely sent me in the right direction. I'll put the changes needed here.
_property_transactions.html.erb
<div class="form-group mb-3" data-controller="property-transaction">
<%= label_tag :property_transactions, 'Propiedad en:', class: 'form-label' %>
<%= select_tag :property_transactions, options_for_select(#property_transactions.collect {|p| [p.name, p.id]}), { data:
{ action: "property-transaction#redraw", property_transaction_target: 'transaction', turbo_frame: "turbo_transactions" },
class: 'form-control', prompt: '', autocomplete: 'off' } %>
</div>
<%= turbo_frame_tag "dynamic_fields" %>
property_transaction_controller.js
import { Controller } from "#hotwired/stimulus";
import { post } from "#rails/request.js";
export default class extends Controller {
static targets = [ "transaction" ];
async redraw() {
const params = { property_transaction: this.transaction };
const response = await post("/set_property_transaction", {
body: params,
contentType: 'application/json',
responseKind: 'turbo-stream'
});
if (response.ok) {
console.log('all good', response); // not necessary
}
}
get transaction() {
return this.transactionTarget.value;
}
}
set_property_transaction.turbo_stream.erb
<%= turbo_stream.update "dynamic_fields" do %>
<%= render partial: #property_transaction.en_translation_key %>
<% end %>
I have a simple has_many and belongs_to relationship in my rails app. I'm using simple_form and want to dynamically change the dropdown options based on the value chosen by the user.
Models
class Processor < ApplicationRecord
has_many :processor_bank_accounts
end
class ProcessorBankAccount < ApplicationRecord
belongs_to :processor
end
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 %>
So essentially, I need the processor_bank_account dropdown to populate based on the processor chosen by the user. In the console, this would just be: ProcessorBankAccount.where(processor: processor).
Need to load options using JS and think I need to use JSON but not sure where to go from here
One way to do this would be to use jQuery to make an AJAX call to a controller action and then let Rails handle the rest through an erb template.
So on your page, with the form, invoke the action via AJAX using something like:
<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>
NB, #processor_id is the id for your dropdown control.
Next, instantiate the bank accounts within your action in your controller:
def get_processor_bank_accounts
#processor_bank_accounts = ProcessorBankAccount.where(processor_id: params[:processor_id])
end
And finally simply create a view that will be responsible for repopulating your dropdown:
$select_list = $('#processor_id');
$select_list.empty();
<% #processor_bank_accounts.each do |pba| %>
$select_list.append($('<option value="<%= pba.id %>"><%= pba.name %></option>'));
<% end %>
I came up with the following solution:
1) Add a new method to my processors controller to render the inputs for the second (dynamic) dropdown in JSON format:
def processor_bank_accounts
render json: #processor.processor_bank_accounts.each do |bap|
{ id: bap.id, name: bap.name }
end
end
2) Assign this new function to a new route in config/routes:
get 'api/bankaccounts', to: 'processors#processor_bank_accounts', as: 'bankaccounts'
3) Create a JS function to access the route with the id of the processor selected in the first dropdown and populate the second dropdown with items from the JSON array:
// select first dropdown
const processor = document.getElementById("transaction_processor");
// select second dropdown
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) => { // go through all the BAPs
const elem = `<option value="${bap.id}">${bap.bank_name}</option>`; // create option elements to insert into the second dropdown, bank_name is the chosen label method in the form
bapSelect.insertAdjacentHTML("beforeend", elem); // insert options into the dropdown
});
});
}
4) Trigger the JS when the first dropdown field is changed:
processor.addEventListener('change', function () {
update_baps(parseInt(processor.value));
});
You should add an id to the selects so you can identify them form the script.
$('select#processor').on('change', function() {
var processor_id = this.value;
var processor_bank_account = $('select#processor_bank_account')
$.ajax({
type: "GET",
url: <%= your_path %> ,
data: { processor_id: processor_id },
success: function(data, textStatus, jqXHR){
processor_bank_account.empty();
var option = new Option(data.bank_name, data.id, false, false);
processor_bank_account.append(option);
},
error: function(jqXHR, textStatus, errorThrown){...}
})
});
How do js get the selected value in a dropdown and pass it to the controller so that it returns a list of names for the other dropdown?
What I've done so far:
salmonellas.js
$(function () {
$('body').on('change', "#mode_change", function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
if (selectedText) {
$.get('/salmonellas/find_stages?mode_title='+ selectedText, function(selectedText) {
return $(selectedText).html();
});
}
});
});
salmonellas/form.html.erb
<div class="process_salmonellas">
<% f.simple_fields_for :process_salmonellas do |process_salmonella| %>
<%= render 'process_salmonella_fields', :f => process_salmonella %>
<% end %>
</div>
salmonellas/_process_salmonella_fields.html.erb
<div class="mode_change" id="mode_change">
<%= f.collection_select :title, Mode.order(:name), :id, :name, class: 'mode_change', id:'mode_change', include_blank: true, "data-content": :mode_id%>
</div>
<h4>Stage</h4>
<div class="stage">
<% f.simple_fields_for :stages do |stage| %>
<%= render 'stage_fields', :f => stage %>
<% end %>
</div>
salmonella/_stage_fields.html.erb
<div class="form-inputs">
<%= f.grouped_collection_select :title, Mode.order(:name), :steps, :name, :id, :name, class: "step_selection" %>
</div>
salmonellas_controller.rb
def find_stages
#mode = Mode.where("name = ?", params[:mode_title])
#steps = #mode.steps
end
Is looking for another model, why the fields have to be pre-registered. I'm using cocoon to let it nested.
Updating
salmonellas/_process_salmonella_fields.html.erb
<div class="form-inputs">
<%= f.collection_select :title, Mode.order(:name), :id, :name, class: 'mode_change', id:'mode_change', include_blank: true, "data-content": :mode_id%>
</div>
<h4>Stage</h4>
<div class="stage">
<% f.simple_fields_for :stages do |stage| %>
<%= render 'stage_fields', :f => stage %>
<% end %>
</div>
Updating 2
salmonellas/_process_salmonella_fields.html.erb
<div class="form-inputs">
<%= f.collection_select :title, Mode.order(:name), :id, :name, id:'mode_change', include_blank: true %>
</div>
salmonellas.js
$(function () {
$('body').on('change', ".mode_change", function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
if (selectedText) {
$.get('/salmonellas/find_stages?mode_title='+ selectedText, function(selectedText) {
return $(selectedText).html();
});
}
});
});
Updating 3
salmonellas.js
$(function () {
$(document).on('change', "#mode_change", function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
alert("Selected Text: " + selectedText);
});
});
IDs must be unique on your DOM. You are duplicating them for div and select tag. First change them and use this to get the value of selected option
$(document).on('change', ".mode_change", function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
...
I have a nested form with checkboxes and text fields. I would like to be able to have the text fields only be enabled if the text box for that specific nested form is clicked/enabled. It is currently hard coded to enable/disable fields if the "custom" text box is set. How can I have javascript update these textbox attributes on the fly?
Form.erb now
<%= simple_nested_form_for #client do |f| %>
<%= f.fields_for :client_prices do |def_price_form| %>
<div class="controls controls-row">
<div class='span10'>
<% if def_price_form.object.custom == true %>
<%= def_price_form.input :custom, :wrapper_html => { :class => 'span1' } %>
<% end %>
<%= def_price_form.input :visit_type, :wrapper_html => { :class => 'span2' } %>
<%= def_price_form.input :price, :wrapper => :prepend, :wrapper_html => { :class => 'span2' }, :label => "Price" do %>
<%= content_tag :span, "$", :class => "add-on" %>
<%= def_price_form.input_field :price %>
<%= def_price_form.link_to_remove '<i class="icon-remove"></i>'.html_safe, :class => 'btn btn-danger', :wrapper_html => { :class => 'span3 pull-left' } %>
<%end%>
<% else %>
<%= def_price_form.input :custom, :hidden => false, :wrapper_html => { :class => 'span1' } %>
<%= def_price_form.input :visit_type, disabled: true, :wrapper_html => { :class => 'span2' } %>
<%= def_price_form.input :price, :wrapper => :prepend, :wrapper_html => { :class => 'span2' }, :label => "Price" do %>
<%= content_tag :span, "$", :class => "add-on" %>
<%= def_price_form.input_field :price, disabled: true %>
<%end%>
<%end%>
</div>
</div>
<% end %>
<%= f.link_to_add "Add a custom price", :client_prices, :class => 'btn btn-success' %>
<p> </p>
<div class="controls">
<%= f.button :submit, :class => 'btn btn-primary' %>
</div>
<% end %>
HTML generated by RoR here
http://jsfiddle.net/59AXJ/
This gets the attribute name from the checkbox that is clicked. Then finds inputs that have similar names, those are the inputs that we will toggle "disabled".
$("input[type='checkbox']").click(function () {
var thisCheckbox = $(this);
var id = $(this).attr("id");
var text = $("label[for=" + id + "]").text().toLowerCase();
var name = $(this).attr("name").replace("[" + text + "]", "");
$("input[name*='" + name + "']").each(function () {
var thisInput = $(this);
if (thisInput.attr("disabled")) {
thisInput.removeAttr("disabled");
} else {
thisInput.attr("disabled", "disabled");
thisCheckbox.removeAttr("disabled");
}
})
});
http://jsfiddle.net/Sbw65/ <-- test it out
As I know, it's impossible to make this on fly, but you can write some unique function on javascript, wich will connect some input with some checkbox by their css class. Something like this (code on CoffeeScript):
changeCheckbox: (class_value) =>
$('[type=checkbox] '+class_value)). on 'check', (e) ->
$input = $(e.currentTarget)
if !$input.prop("checked")
$("input "+class_value).prop('disabled', false)
else
$("input "+class_value).prop('disabled', true)
After that, you just need to add some class for connected checkbox and inputs.
I have a select Menu with a few options
<p>
<%= f.label :reason %><br />
<%= f.select :reason, Confirmation.reasons.collect {|p| [ p[:name], p[:id] ] }, { :include_blank => true } %>
</p>
The last being id "5" and name = "Other"
If and only if they choose other I want a hidden text_area with a div id = "other" to be shown to allow the user to type...
How can I do this simply?
<%= link_to_function "Show me other" do |page|
page[:other].toggle
end %>
I can toggle it but I want to show it on the selection of the "Other" in the select box? Is this a job for observe_field?
Your own answer is fine, but for future reference, observe_field doesn't have to make an Ajax call. You can use :function to specify JavaScript code to run locally instead.
e.g.
<%=observe_field 'reason', :frequency => 1,
:function => "if ($('reason').value == '5') { $('otherform').show(); } else { $('otherform').hide(); }" %>
<%= f.select :reason, Confirmation.reasons.collect {|p| [ p[:name], p[:id] ] }, { :include_blank => true }, { :onchange => "if (this.value == '5') { $('otherform').show(); }" } %>
Got it!