How does one reset a Chosen plugin field after resource is created by Javascript?
I create a dog and can get the regular form fields to reset but not the select menu using the Chosen plugin:
dogs/create.js.erb
$('#dogs').prepend('<%= escape_javascript(render(#dog)) %>');
$('.add-dog-form > form')[0].reset();
This is successful reset, just not with the chosen menu which is called from my application.js:
jQuery( function($) {
// Chosen Select Menu
$('.category-select').chosen().trigger("liszt:updated");
});
Than my form:
<%= form_for(#dog, :remote => true) do |f| %>
<%= f.label :name, "Name" %>
<%= f.text_field :name %>
<%= f.label :category, "Categories" %>
<%= f.select :category_ids, Category.all.collect {|c| [c.name, c.id]}, {}, { :multiple => true, :class => "category-select" } %>
<% end %>
So again, how does one reset a Chosen plugin field after resource is created by Javascript?
Try this:
dogs/create.js.erb
$('#dogs').prepend('<%= escape_javascript(render(#dog)) %>');
$('.add-dog-form > form')[0].reset();
$('.category-select').chosen().trigger("liszt:updated");
You basically have to trigger the reset again inside create.js.erb.
Related
I have a 'country' model in my app with attributes name and status. If a country is activated, its status will be 1. Admin type of user can toggle this so I have given a multiple select dropdown for the same. My problem, how to update all the selected/unselected countries at one hit of submit button ?
My form on settings page for Admin user -
<%= simple_form_for #country do |form| %>
<%= form.collection_select :name, Country.order(:name), :id, :name, {:selected => #selected}, {:multiple => true, :class =>"ui fluid selection dropdown"} %>
<%= form.submit 'Submit' %>
<% end %>
Controller -
def settings
#country = Country.new
#selected = Country.where(status: '1').pluck(:id)
end
And the script -
<script>
$(document).on('turbolinks:load', function() {
$('.ui.dropdown').dropdown();
});
In my rails project I have two models, Car Make & Car Model, with a 1:M relationship (i.e. one Audi has many Audi models).
In my Views page, I want a form with two input fields for car make & car model. Ideally, I will be able to input a car make (i.e. Audi) and the second input field will have a drop down menu with all the models available for the make (2016 Audi A6, 2017 Audi A7).
I've set up all the relations and in the models I have saved a foreign key of the make.
currently in _form.html.erb I have
<div class="field">
<%= f.label :make_id, "Make:"%><br>
<%#= f.number_field :make_id %>
<%= f.collection_select :make_id, Make.all,
:id,:makes_info, {:include_blank => 'Please Select'} %>
</div>
<div class="field">
<%= f.label :model_id, "Model:" %><br>
<%= f.collection_select :model_id, Model.all,
:id,:model_info, {:include_blank => 'Please Select'} %>
</div>
If you want it to truly be dynamic, you would need to use an AJAX request to update the second select after the first is picked. You'd also need to use the options_for_select method inside of the select tag
Some more info to accompany what was already provided.
It's known as dynamic select boxes:
#config/routes.rb
resources :makes do
get :models, on: :collection #-> url.com/makes/models
end
#app/controllers/makes_controller.rb
class MakesController < ApplicationController
def models
#make = Make.find(params[:make][:make_id])
respond_to do |format|
format.js
end
end
end
#app/views/makes/models.js.erb
$select = $("select#models");
$select.empty();
<% #make.models.each do |model| %>
$select.append($('<option>').text(<%=j model.name %>).attr('value', <%= model.id %>));
<% end %>
#views
<%= f.collection_select :make_id, Make.all, :id, :makes_info, {include_blank: 'Please Select'}, { data: { remote: true, url: make_models_path }} %>
<%= f.collection_select :model_id, Model.all, :id,:model_info, {include_blank: 'Please Select'}, { id: "models" } %>
I am trying to implement a dropdown menu to display all the names I have in my database. I tried unsuccessfully the following code:
<%= form_for #airline, remote: true do |f| %>
<%= f.select :name, [#airlines.names] %>
<%= f.submit %>
<% end %>
Controller:
def index
#airlines = Airline.all
#airline = Airline.new
end
I assume the solution is quite straight forward but I couldn't find it.
This should do
<%= f.select(:name, #airlines.collect { |airline| [airline.name,airline.id] }, {:include_blank => 'Choose 1'},:class=>"class_name") %>
I dint even understand how to search for my problem scenario in google.
Problem : When a user selects from a drop-down, the below form fields should change accordingly.
Example : If a user selects "Human" from Drop-down , then below form_fields should be shown like "age" field ,"ethnicity" field etc..
If a user selects "Event" from drop-down, below form fields should show "Date", "venue" etc..
and By default we will have "SUBMIT" button.
Can anyone tell how to achieve this ? Any help with simple_form ruby gem also would be helpful.
You can do this with some simple javascript. Lets say you have a form with the following fields
<%= f.select :some_field, %w[Human Cat], {}, {:class => 'my-select'} %>
<div class="human">
<%= f.label :age %><br>
<%= f.text_field :age %>
</div>
<div class="cat" style="display:none;">
<%= f.label :sub_species %><br>
<%= f.text_field :sub_species %>
</div>
Now add some javascript to make it dynamic
<script>
$(".my-select").change(function(){
if($(".my-select").val() == "Human"){
$(".human").css('display', 'block');
$(".cat").css('display', 'none');
}else{
$(".human").css('display','none');
$(".cat").css('display', 'block');
}
})
</script>
This is quite easy to achieve with the simple_form gem and some simple javascript.
View
<%= simple_form_for #object do |f| %>
<%= f.input :attribute_name, :collection => ['Human', 'Event'], :input_html => { :class => 'dropdown' %>
<div class="toggle human" style="display:none;">
<%= f.input :age %>
</div>
<div class="toggle event" style="display:none;">
<%= f.input :date %>
</div>
<%= f.button :submit %>
<% end %>
The key here is wrapping the fields you want to toggle in div with specific selectors.
Then we look for a change event on the dropdown field, and toggle our divs accordingly.
Javascript
$('.dropdown').change(function() {
// hide divs first
$('form .toggle').hide();
// get value from dropdown
var divClass = $('.dropdown').val().toLowerCase();
// show necessary div
$('.' + divClass).show();
});
Using this approach, you don't need to write the specific case for every value of the dropdown, but can use the lower case value of the dropdown as the selector for the div.
Here is a simple example with static markup.
Iam new to ruby on rails.I want to show the selected values from drop down and checked radio button in page reload.
When the page is reloaded, the selected value of the drop down and radio button are getting reset.So please let me know how to fix this issue.Here is the code i'am using.
<%= form_tag :action => 'show' do%>
<strong>Select device: </strong> <%= collection_select(:device, :id, #devices, :id, :name, options ={:prompt => "-Select a device"}) %>
<br></br>
<strong>Chose:</strong><%= radio_button_tag :name,:time, false, :onclick => "this.parentNode.submit();"%>Time
<%= radio_button_tag :name,:graph%>Graph
<% end %>
Try:
collection_select(:device, :id, #devices, :id, :name, {:selected => #your_selected_value, :prompt => "-Select a device"})
see radio_button_tag(name, value, checked = false, options = {})
<%= radio_button_tag :name,:time, #your_checked_value.eql?('time'), :onclick => "this.parentNode.submit();"%>Time
<%= radio_button_tag :name,:graph, #your_checked_value.eql?('graph') %>Graph