I built a form for a table with mostly boolean values. The form displays well, the bootstrap toggle works well, it saves data well, but it displays all the value as OFF when the edit page is called again.
I have tried playing with the options. Adding checked_value and unchecked_value, but it does not work.
<%= simple_form_for(#setting) do |f| %>
<div class="form-check_boxs">
<div class="row">
<div class="col-md-4">
<%= f.label :open_for_work do %>
<%= t :open_for_work %>
</div>
<div class="col-md-8">
<%= f.check_box :open_for_work, options: {}, checked_value: "true", unchecked_value: "false" %>
</div><% end %>
</div>
<div class="row">
<div class="col-md-4">
<%= f.label :turn_app_local do %>
<%= t :turn_app_local%>
</div>
<div class="col-md-8">
<%= f.check_box :turn_app_local, options: {}, checked_value: "true", unchecked_value: "false" %>
</div><% end %>
</div>
<div class="form-actions">
<%= f.button :submit, class: "btn btn-primary" %>
</div>
<% end %>
Does anyone knows how to actually use the gem 'bootstrap-switch-rails' in rails ?
NB: My site is all in Bootsrap 4, could be the reason why this does not work ?
The bootstrap issue should just affect styling and not the actual params passed through. Try:
<%= f.input :status, :as => :check_boxes, collection: [['true', 'false']] %>
Note that these will pass the strings 'true' and 'false' respectively when selected or not.
Related
I want to be able to performa range search with ransack. I was hoping I could do this with a slider that has two thumbs. I'm thinking that the _in predicate would be perfect for a situation like this. However, I cannot find an example on how to appropriately configure this. Here would be some example code:
CONTROLLER `users_controller.rb:
def index
#page_title = 'Users'
#page_icon = 'store'
#q = User.search(params[:search]).ransack(params[:q])
#retailers = #q.result.order("#{sort_column} #{sort_direction}").paginate(page: params[:page], per_page: 20)
end
VIEW users/index.html.erb:
<%= search_form_for #q, url: users_path, class: 'form' do |f| %>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<%= label_tag :search %>
<%= text_field_tag :search, params[:search], class: "form-control" %>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<%= f.label :first_name_eq, "First Name" %>
<%= f.select :first_name_eq, {include_blank: true}, {class: "chosen-select"} %>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<%= f.label :team_eq, "Team" %>
<%= f.select :team_eq, Team.options_for_select, {include_blank: true}, {class: "chosen-select"} %>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<%= f.label :score_in, "Score Range" %>
<%= f.search_field :score_in, {include_blank: true} %>
</div>
</div>
</div>
<div>
<%= f.submit 'Apply Filters', class: 'btn btn-outline-dark btn-md' %>
<%= link_to 'Reset Filters', users_path(q: {reset: true}), class: 'btn btn-outline-danger btn-md' %>
</div>
<% end %>
I guess where I'm lost is how to start or implement a slider w/ two thumbs that would appropriately pass the parameters when submitted. Or even if I just create a two thumbed slider from a js library, how to connect it then to ransack, or at least pass the values of the two thumbs to ransacks params. Another thing that might be helpful is if someone has an example, both in controller/view, of what the _in predicate should look like.
I need to add a button that persists the data of the following form but that when pressing it resets the view and stays in it, without redirecting to the index of the controller, I have tried an ajax call but I don't know why it didn't work for me.
How can I give a solution and add the button to save and continue?
<%= turbo_frame_tag dom_id(taxonomy) do %>
<%= form_with(model: [:admin, taxonomy], id: dom_id(taxonomy)) do |form| %>
<div class="box">
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<div class="control is-expanded is-relative">
<%= form.text_field :name, placeholder: true, class: "input mt-5" %>
<%= form.label :name, class: "label-hidden required" %>
</div>
</div>
<div class="field is-narrow">
<div class="control mt-5">
<%= form.submit nil, class: "button is-primary" %>
<%= link_to "#{ t '.cancel'}", admin_taxonomies_path, class: "button is-light" %>
</div>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
You need to add a target="_top" attribute to the frame: turbo_frame_tag dom_id(taxonomy), target: :_top
Otherwise Turbo tries to replace the current frame containing the form.
You can also just add data-turbo="false" on your link and the redirection will be working fine.
More info here in the documentation
https://turbo.hotwired.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms
One of my tests is creating a form post via javascript that is dropping the first input field from the form. The tests are obviously failing because of this. When deugging via binding.pry, it looks like a js post is dropping the first parameter [address_by_user] when posting it to my route. This parameter is posted just fine when testing via the ui in localhost but no longer works with rspec. Any idea what could cause this? Tests were passing as of two days ago and the forms haven't been changed. I tried restarting my computer in case it was a zombie process or something being cached, but the behavior continues. Any thoughts?
The form that is submitted via javascript using the following code:
var form_id = "#form-step" + currentIndex;
var my_form = $(form_id);
var url = $(form_id).attr('action');
var form_data = my_form.serialize();
console.log(form_data);
var submission = $.post(url, form_data);
The form looks like this and is submitted after clicking the "Next" button in a wizard, that works fine.
<%= form_with(url:"add_property", scope: :property, class: "form", id:"form-step0") do |f| %>
<div class="form-body" id="step0form">
<h4 class="form-section"><i class="ft-location"></i> <%= t(:property_details) %></h4>
<%= render 'shared/error_messages', object: f.object %>
<div class="row">
<div class="form-group pac-card col-md-8 offset-md-1 required" id='pac-card'>
<div class="field" id='pac-container'>
<%= f.label :address_by_user, t(:address), class:"label-control" %>
<%= f.text_field :address_by_user, :required => true, class: "form-control pac-input google-autocomplete", id:"pac-input" %>
</div>
</div>
<div class="form-group form-row col-md-2">
<div class="field">
<%= f.label :unit_number %>
<%= f.text_field :unit_number, class: "form-control" %>
</div>
</div>
</div>
<div class="form-group form-row">
<div class="field col-md-2 offset-md-1">
<%= f.label :bedrooms %>
<%= f.number_field :bedrooms, :required => true, class: "form-control", in: 1...20 %>
</div>
<div class="field col-md-2 offset-md-1">
<%= f.label :bathrooms %>
<%= f.number_field :bathrooms, class: "form-control", in:1...10 %>
</div>
<div class="field col-md-2 offset-md-1">
<%= f.label :accommodates %>
<%= f.number_field :accommodates, class: "form-control", min: "0" %>
</div>
</div>
<div class="form-group form-row">
<div class="field col-md-2 offset-md-1"><%=label_tag(t(:property_type))%></div>
</div>
<div class="form-group form-row" data-toggle="buttons">
<div class="btn-group col-md-12">
<div class="field col-md-2 offset-md-1">
<%= f.label :room_type, class: 'text-center btn btn-default active' do %>
<%= image_tag('house-icon.png') %>
<br>
<%= f.radio_button :room_type, "entire_place", checked: true %>
<span>Entire Place</span>
<% end %>
</div>
<div class="field col-md-2 offset-md-1">
<%= f.label :room_type, class: 'text-center btn btn-default' do %>
<%= image_tag('room.png') %>
</br>
<%= f.radio_button :room_type, "private_room" %>
<span>Private Room</span>
<% end %>
</div>
<div class="field col-md-2 offset-md-1">
<%= f.label :room_type, class: 'text-center btn btn-default' do %>
<%= image_tag('people.png') %>
</br>
<%= f.radio_button :room_type, "shared_room" %>
<span>Shared Room</span>
<% end %>
</div>
</div>
</div>
<div id="hidden-fields">
<%= f.hidden_field(:latitude, id: 'latitude') %>
<%= f.hidden_field(:longitude, id: 'longitude') %>
<%= f.hidden_field(:street_number, id: 'street_number') %>
<%= f.hidden_field(:street_name, id: 'route') %>
<%= f.hidden_field(:city, id: 'locality')%>
<%= f.hidden_field(:state, id: 'administrative_area_level_1') %>
<%= f.hidden_field(:country, id: 'country')%>
</div>
</div>
<% end %>
When tested directly from the site via localhost, all parameters post fine and I get this: (as expected)
<ActionController::Parameters {"address_by_user"=>"Pura Uvita Vacation Home, Puntarenas Province, Uvita, Costa Rica", "unit_number"=>"", "bedrooms"=>"2", "bathrooms"=>"2.0", "accommodates"=>"6", "room_type"=>"entire_place", "latitude"=>"9.1839769", "longitude"=>"-83.72444630000001", "street_number"=>"", "street_name"=>"", "city"=>"Uvita", "state"=>"Provincia de Puntarenas", "country"=>"Costa Rica"} permitted: false>
When the parameters are obtained via binding.pry from the rspec flow, the following is the result:
<ActionController::Parameters {"unit_number"=>"", "bedrooms"=>"2", "bathrooms"=>"2", "accommodates"=>"6", "room_type"=>"entire_place", "latitude"=>"", "longitude"=>"", "street_number"=>"", "street_name"=>"", "city"=>"", "state"=>"", "country"=>""} permitted: false>
The two most likely causes of this are
The fields are no longer actually being filled in - look at the browser while the tests are running and see if the form is actually being correctly filled in.
You have an error in another JS file causing the JS you think is processing the form not to run. This can happen because JS assets are concatenated in the test environment, allowing an error in on JS file to prevent any files concatenated after it not to be processed.
I have a kind of complex form to build. I am using cocoon and simple-form for building it.
In that application there are contracts and for every contract a user should be able to create multiple distributions of a certain type via that form.
My model structure looks like the following (just so you can imagine it):
class Contract < ApplicationRecord
has_many distributions
accepts_nested_attributes_for :distributions
end
class Distribution
belongs_to :contract
# distribution_type :string // e.g. month or city
# percentage
# value
end
What I want to achieve is to let the user choose a distribution_type via a dropdown that lies inside the "_distribution_fields.html.erb" partial. If a user selects a certain type, for example "month", the predefined 'div' is loaded via javascript and builds multiple fields at once as follows:
<div class="nested-fields">
<div class="row">
<div class="row">
<%= f.input :distribution_type, wrapper_html: {class: 'col-xs-6 col-md-2'}, input_html: {data: {'toggle-select': 'distribution-type-0'}, class: 'distribution_type_select'}, required: true, disabled: #readonly %>
</div>
<div class="row">
<div id="distribution-type-0-event_type" class="distribution-type-selection">
<%= hidden_field_tag 'event_type', false, class: 'distribution_type_hidden_event_type' %>
<% #contract.event_types.each do |event_type| %>
<div class="col-xs-6 col-md-4">
<div class="field">
<%= f.input :distribution_type, as: 'hidden', input_html: { class: 'event_type_distribution_hidden', value: 'event_type' } %>
<%= f.input :value, input_html: { readonly: true, value: event_type } %>
<%= f.input :percentage, required: true, disabled: #readonly %>
</div>
</div>
<% end %>
</div>
</div>
<div class="row">
<div id="distribution-type-0-month" class="distribution-type-selection">
<%= hidden_field_tag 'month', false, class: 'distribution_type_hidden_month' %>
<% #contract.month_date_list.each do |month| %>
<div class="col-xs-6 col-md-4">
<div class="field">
<%= f.input :distribution_type, as: 'hidden', input_html: { class: 'month_distribution_hidden', value: 'month' } %>
<%= f.input :value, input_html: { readonly: true, value: month } %>
<%= f.input :percentage, required: true, disabled: #readonly %>
</div>
</div>
<% end %>
</div>
</div>
<div class="row">
<div id="distribution-type-0-city" class="distribution-type-selection">
<%= hidden_field_tag 'city', false, class: 'distribution_type_hidden_city' %>
<% #contract.location_cities.each do |city| %>
<div class="col-xs-6 col-md-4">
<div class="field">
<%= f.input :distribution_type, as: 'hidden', input_html: { class: 'city_distribution_hidden', value: 'city' } %>
<%= f.input :value, input_html: { readonly: true, value: city } %>
<%= f.input :percentage, required: true, disabled: #readonly %>
</div>
</div>
<% end %>
</div>
</div>
<div class="col-xs-6 col-md-1">
<div class="row">
<div class="col-xs-12">
<%= link_to_remove_association f, class: 'btn btn-danger delete-btn', disabled: #readonly, data: { confirm: 'You are about to delete the internet as well as to remove this kpi distribution? Are you sure?' } do %>
<i class="fa fa-trash"></i>
<% end %>
</div>
</div>
</div>
In the surrounding "_form.html.erb" it is as follows:
...
<%= field_set_tag 'KPI Distribution' do %>
<%= f.simple_fields_for :distributions do |distribution| %>
<%= render 'distribution_fields', f: distribution %>
<% end %>
<div class="links m-b-md">
<div class="text-left">
<%= link_to_add_association f, :kpi_distributions, class: 'btn btn-info btn-sm', disabled: #readonly do %>
<i class="fa fa-plus"></i>
<% end %>
</div>
</div>
<% end %>
...
As you might have already recognized in the above part, there is a "simple_fields_for" instruction looping the "_distribution_fields" partial. Usually only a single field including all its inputs is created inside such an partial, but I want to set multiple at once. Is there a certain way for doing something like this? Are there any best practices to achieve such a thing? Or can I set the ids produced by cocoon manually?
best regards
I have this form:
<fieldset data-model="idea-art" class="idea-edit">
<h2>Artwork Specs</h2>
<%= form_for #idea do |f| %>
<div data-attribute="art_status" class="edit-field">
<%= f.label :art_status, "Art Status" %>
<%= f.select :art_status, Idea::ART_STATUSES %>
</div>
<div data-attribute="artist" class="edit-field">
<%= f.label :artist_id, "Artist" %>
<%= f.select :artist_id, User.artists.collect{|x|[x.full_name, x.id]}, :include_blank =>
true %>
</div>
<div data-attribute="default_size" class="edit-field">
<%= f.label :default_artwork_id, "Default Artwork" %>
<%= f.select :default_artwork_id, #idea.artworks.collect{|x|[x.dimensions, x.id]},
:include_blank => true %>
</div>
<div data-attribute="colors_offered" class="edit-field">
<%= f.label :colors, 'Colors Offered' %>
<%= f.collection_select :color_ids, Color.master_colors.order(:name), :id, :name, {},
{multiple: true}%>
</div>
<div data-attribute="base" class="edit-field">
<%= f.label :base, "Base" %>
<%= f.check_box :base %>
</div>
<div data-attribute="special_instructions" class="edit-field">
<%= f.label :special_instructions, "Special Instructions" %>
<%= f.text_area :special_instructions %>
</div>
<div data-attribute="artwork" class="edit-field">
<%= f.fields_for :artworks do |artworks_f| %>
<%= render 'artwork_fields', f: artworks_f %>
<% end %>
<p>
<%= link_to_add_fields "Click To Add Artwork", f, :artworks %>
</p>
</div>
<%= f.submit %>
<%end%>
</fieldset>
when I click submit my changes are not updated. I have tried many things and nothing seems to work. I am new to ruby and have read the RailsGuide to form helpers and I still can't quite figure it out.
Is there something I am missing?
Thanks
Do you see the request in Rails server log? If so, look for a Rollback in the log, which might indicate that ur models are invalid, perhaps due to strong parameters settings. If the request is not making it to the server, inspect for javascript errors on the page, then make sure you're not using (or intend to use) ajax requests, in which case you might need to require jquery_ujs in application.js along with csrf_meta_tag in you layout.