So I have multiple checkboxes made using simple form a Ruby Gem. But the issue is that they are not appearing checked even when I have checked and set them "true" and pressed the update button. I have three examples, all of them do not work, and I have tried doing different code for all three.
<%= f.input :same_as_client_email,
inline_label: "Same as Client Email",
as: :boolean %>
The first example
<%= f.input :same_as_client_name,
inline_label: "Same as Client Name",
as: :boolean, checked_value: true,unchecked_value: false
%>
Second example
<%= f.input :active,
as: :boolean,
checked_value: true, unchecked_value: false,
input_html: { value: '1', checked: true },
inline_label: "Active"%>
Final example.
None of these actual work or stay checked. I have other inputs and they are saving when I press the update button. But the check boxes are not. Any help would be appreciated.
It was a javascript problem just in case anyone else comes along and sees this. Be carful using jquery and simpleform together. My problem was that we had jquery code to make our buttons more aesthetically appealing.
//$(function checkbox() {
// 'use strict'
//
// var originalElement = $('input[type="checkbox"]');
// var overlay = '<div class="checkbox-overlay"><div class="inner"></div></div>';
//
// function swapCheckbox() {
// originalElement.replaceWith(overlay);
// }
//
// function toggleCheckbox() {
// $(this).toggleClass('checked');
//
// }
//
// function initialize() {
// swapCheckbox();
// $('body .checkbox-overlay').on('click', toggleCheckbox);
// }
//
// initialize();
//});
But in reality this was making it so simpleform was receiving only 0, and never 1's. In ohter words even if you checked the box it would never actually work because this Jquery code was manipulating the variables as they were sent to simpleform. In the future Ill update this post if i fix the checkboxes so they can look "pretty" while not messing with the functionality. This problem took a long time to solve, considering i was unaware of this file till a SimpleForm developer pointed out their might be a js file messing with my code.
Edit: I hope this explains the problem better!
Related
I have a model that has a boolean field and an array field that gets the values populated from another model (foreign key, not really relevant to my question).
In ActiveAdmin, I have a form like such:
form do |f|
f.semantic_errors
f.inputs do
f.input :boolean_field_name
f.input :array_field_name,
as: :searchable_select,
ajax: true,
input_html: { disabled: true }
end
f.actions
end
The disabled: true works, but I would like to replace the true with something that evaluates whether or not the input checkbox for boolean_field_name has been checked on the form (which by default it isn't).
I've tried params[:boolean_field_name], params.key?[:boolean_field_name], f.object.boolean_field_name, f.object[:boolean_field_name], resource[:boolean_field_name] and resource.boolean_field_name, but they all do nothing and evaluate to nil as far as I can tell.
I've even tried ModelName.find(params[:id]).boolean_field_name but of course since params[:id] is nil that doesn't work, and it wouldn't find a record with that id anyway because the record hasn't been created yet.
I've tried looking through the ActiveAdmin repository but I can't find the information I'm looking for in the source code either.
Is this even possible?
Did you mean like this?
form do |f|
f.semantic_errors
f.inputs do
f.input :boolean_field_name
f.input :array_field_name,
as: :searchable_select,
ajax: true,
input_html: { disabled: f.object.boolean_field_name # <= does not work }
end
f.actions
end
Since the information is a bit ambiguous to me, I would firstly like to know:
From the description:
The disabled: true works, but I would like to replace the true with
something that evaluates whether or not the input checkbox for
boolean_field_name has been checked on the form (which by default it
isn't).
Did you mean that you wanna change the disabled attribute depending on the other form field after the page loads? If that's true, then you have to do it with javascript as something like this:
let booleanField = document.querySelector('booleanField'),
arrayField = document.querySelector('arrayField');
booleanField.addEventListener('change', function(e) {
arrayField.setAttribute('disabled', booleanField.value);
})
Or if you mean you just wanna set the value of the disabled attribute to what boolean_field initially is on page loads, it will bring us more information if you can debug with the tools like debug, debugger or binding.pry. It will be helpful to checkout what f.object.boolean_field_name returns. According to the information you provides, I guess it could really be nil.
I have a form element that is using Chosen to render a multi-select input, like so
<%= f.collection_select :application_regions, ApplicationRegion.all, :identifier, :name, {}, { class: 'chosen_select', multiple: true } %>
The value of ApplicationRegions.all is an array with a single value
[#<ApplicationRegion:0x007fc61aeb3100 #identifier="FOO", #name="BAR">]
I am initializing chosen like so:
$(document).on 'turbolinks:load', ->
$('.chosen-container').remove()
$('.chosen_select').chosen
allow_single_deselect: true
width: '100%'
The input correctly displays a list with a single option BAR but the output array is ["", "BAR"] - where is that extra "" coming from, and how do I get rid of it?
I had thought that taking out the allow_single_deselect: true would take care of this, but the behavior remains (I did a spring stop just to be sure)
Зелёный was on the right track. Adding include_hidden: false to the collection_select solves the issue of the extra '' in the output.
I have a form with this collection_select
<%= collection_select :bmp, :bmpsublist_id,
Bmpsublist.where(:bmplist_id => #bmp.bmp_id), :id,
:name,{ :required => false,
:selected => #bmp.bmpsublist_id, } %>
I would like to be able to get the value of this collection_select so that lower down in the same form, I can check to see which list I should use when displaying another collection_select
Something like this partial pseudocode here:
if earlier result == 2 then
use this list: Irrigation.where(:id != 8)
else
use this other list: Irrigation.all
and they would be updating the collection_select:
<%= collection_select :bmp, :irrigation_id, the_chosen_list_from_above, :id, :name,
{:prompt => 'Select Irrigation Type'}, {:required => true} %>
How can I do that?
Based on what you've asked, there are two ways to query and apply the value of the collection: static and dynamic.
Static occurs at the time that the ERB view is rendered, and this will apply the logic at the time that the page is initially rendered and loaded. Dynamic occurs after the page is loaded, and as the user interacts with the elements on the page. Which approach you choose to go with depends entirely on your application's design and intended level of interaction with the user.
Static Detection
You're already specifying the selected item in the initial collection_select, so you can reuse that in your later code. Try this, based on your pseudocode example:
<% if #bmp.bmpsublist_id == 2 %>
<% irrigation_list = ["Sprinkle", "Furrow/Flood", "Drip", "Furrow Diking"] %>
<% else %>
<% irrigation_list = ["Sprinkle", "Furrow/Flood", "Drip", "Furrow Diking", "Pads and Pipes - Tailwater Irrigation"] %>
<% end %>
<%= select :bmp, :irrigation_id, options_for_select(irrigation_list),
{ :prompt => 'Select Irrigation Type'}, { :required => true } %>
Why will this work? The :selected option for the initial collection_select is where you provide which option will be initially chosen. Since this value is typically taken from the model value, it's supplied in a separate param from the actual collection values. So, it's queued up and ready for you, simply by virtue of sticking to the Rails conventions.
The subsequent select builds the HTML <select> element and uses the options_for_select to turn the array of options into HTML <option> elements. This way, you can use the variable list of options to select from, based on which element from the original collection_select was chosen.
Best thing of all: with the static approach, you don't have to drop into Javascript (or jQuery) to do this; it gets rendered directly by the ERB template (or the HAML template, if that's your bag).
Dynamic Detection
If you actually wanted dynamic behavior, you can drop into Javascript / jQuery and get it done. You can create your "Irrigation Types" select just like with the static approach (above), except that you initialize it with all of the options, like this:
<%= select :bmp, :irrigation_id,
options_for_select(["Sprinkle", "Furrow/Flood", "Drip", "Furrow Diking", "Pads and Pipes - Tailwater Irrigation"]),
{ :prompt => 'Select Irrigation Type'}, { :required => true } %>
Then, edit the Javascript source associated with your view (let's call it Product). Open the app/assets/javascripts/product.js (if you use CoffeeScript, it's the product.coffee file in the same directory).
Edit that Javascript file to include this code:
function OnProductEditForm() {
// Edit the selectors to match the actual generated "id" for the collections
var bmp_collection = $("#product_bmp");
var drip_collection = $("#product_irrigation_type");
var drip_option = drip_collection.find("option")[2];
function select_available_drip_options() {
var value = bmp_collection.val();
if (value == 2) {
drip_option.attr("disabled", "disabled");
} else {
drip_option.removeAttr("disabled");
}
}
bmp_collection.change(function() {
select_available_drip_options();
});
select_available_drip_options();
}
This identifies the HTML element of the collection and installs a change event handler. You'll need to verify the collection element's id, as per the code comment, and the rest happens from there. When the collection is changed (a new value is chosen), the event handler will hide or show the third select <option> (specified as find("option")[2]), as appropriate for the #product_bmp selection.
Next, in the app/views/products/_form.html.erb, include this at the end of the file:
<script>
jQuery(document).ready(OnProductEditForm);
// Uncomment the next 2 lines for TurboLinks page refreshing
//jQuery(document).on('page:load', OnProductEditForm);
//jQuery(document).on('page:restore', OnProductEditForm);
</script>
This will automatically load the OnProductEditForm method when the page loads, and will result in the afore-mentioned event handler getting installed. Note that the last 2 lines are necessary if you have TurboLinks enabled, as TurboLinks initiates events for page loading independently of the standard $(document).ready.
And that's all there is to it. Adding dynamic behavior is just that easy!
You're gonna have to use some javascript (jquery and ajax, I would suggest). When the value of the first select change (jquery), it requests (ajax) the collection (passing the current value selected) to a controller action that returns the collection that should be used. With the collection returned, you populate the options (jquery) for the second select. It's not quite simple, but if you ever did something like that, you shouldn't have problems. If never did, do some research about it... it's quite useful and improve user experience a lot!
I have two inputs, both use the same field in the database. The difference between them is simple, one is just text input while the other makes it possible for the user to pick something from dropdown list. Might look like this:
= f.input :age, :label => false, input_html: {class: "textfield"}
= f.input :age, :label => false, input_html: {class: "dropdown"}, collection: [1,2,3]
in this case, only the second input will send information.
My question is: How can I prevent input from sending anything WITHOUT removing it from HTML?
(my purpose is to enable user pick option "custom age" which will enable them to fill the field with, well, custom value. tricky part is both input must be there all the time)
If you disable an input, its value is not sent when you submit the form. So you could use an onSubmit event on the form to disable the right input before the form is submitted.
With jQuery, it would look like this:
$('form').on('submit', function() {
var textInput = ...;
var dropdownInput = ...;
if (textInput.val() == '') {
textInput.prop('disabled', true);
} else {
dropdownInput .prop('disabled', true);
}
});
I thought this would be fairly easy, but I'm not finding any help by Googling.
I have a form (simple_form) with numerous inputs with select lists (collections) that are populated from the database, so many it is slowing down the initial page load. I thought I could speed it up by only populating those drop down lists as the user selects them using Ajax. Is there something built in like remote => true for the form itself? Can someone point me in the right direction?
EDIT:
I found this SO question but I cannot figure out how to implement the answer.
Currently, my form looks like this;
= simple_form_for(#account)
= f.input :account_number
= f.input :area, collection: #areas
= f.submit nil, :class => 'btn btn-primary'
Based on the answer in the linked question, I should add something like this, but of course it is not working
= simple_form_for(#account)
= f.input :account_number
= f.input :area, collection: #areas, :input_html => {"data-remote" => true, "data-url" => "/my_areas", "data-type" => :json}
= f.submit nil, :class => 'btn btn-primary'
I can think of two ways to go about this if you don't want to load the contents initially when the page loads. One way is to run a script after the DOM has loaded to change the options for the select tag and the other is to collect the options when you click on the drop-down on the select element. I might go for the first way because there wouldn't be latency when a user clicks on the select element--they wouldn't have to wait for the options to populate.
So you'd run a jQuery script on document ready that makes an AJAX call to a method in your controller, which then returns the collections you want, then you iterate through the select elements you want to change with JQuery scripts. It might look something like this.
# in view with the select options to be changed
$(document).ready(function() {
$.get(change_selects_path, function(response) {
$.each(response, function(args) {
// code for each select element to be changed
$('.class_of_select_element').html(<%= j options_from_collection_for_select(args) %>);
});
});
)};
# in controller
def change_selects
# make db calls and store in variables to feed to $.get request
end
Note that this not tested but should give you a good start towards a solution. For further info on the each loop, you can check out this documentation.
Not sure if this fits your exact use case (please clarify if not), but I also have a few collection selects that have a large amount of database rows behind them. I use the select2-rails gem to take care of this. Users can begin to type in the name and the relevant results will show up (it will also show a few initially if they don't type something).
Check it out here: https://github.com/argerim/select2-rails
Edit: For a cascading dropdown, I recommend this gem: https://github.com/ryanb/nested_form