Creating a input that is dependent on another - ruby-on-rails

I want associate a Place to an Activity, a Place has the following fields: a country a city, a adress and a name. I want to do something like, as soon as you choose a country the will only and a city, there will only appear (in a dropdown) the Places that have that belong to that city, is there anyway how i can do that? My main problem is the variable :city_name, i know i cant create variables in views like this, but i really dont know how to do it and also how to temporarily save it... Any help would be appreciated :)
This code doesn't work, its just a prototype from what i want to do:
<%= form_for #activity, :html => { :class => "form-horizontal activity" } do |f| %>
<div class="transbox">
<h1><%= "Add Place To activity" %></h1>
</div>
<div class = "box_round">
<div class="row">
<div class="control-group col-lg-10">
<%= f.label "City Name", :class => 'control-label' %>
<div class="controls">
//variable :city_name does not exist
<%= f.text_field :city_name, :class => 'form-control' %>
</div>
<%= error_span(#activity[:resume]) %>
</div>
<% if !:city_name.nil? %>
<div class="control-group col-lg-10">
<%= f.label "City Name", :class => 'control-label' %>S
<div class="controls">
<% place_options = options_from_collection_for_select(#places.where(:city => :city_name).sort { |a,b| a.name <=> b.name }, :id, :name, selected: params[:place_id]) %>
<%= f.select(:place_id, place_options, {prompt: 'Select Sport'},
{prompt: 'Select Place', include_blank: false, class: "Place" }) %>
<%= link_to "Place doesn't exist yet?" , new_place_path %>
</div>
<%= error_span(#activity[:resume]) %>
</div>
<% end %>
</div>
</div>
</div>
<% end %>

What you are looking for is an called an AJAX request. Its a bit much to code out for you, but the gist of it is:
Write JS watcher to look at country field.
On country field change, make a JS call to the server and say: "Give me all the cities in that country"
Return JS that takes the list of cities and overwrites the available options in the city's dropdown field.
You may choose to do the same for Places as well, but the concept/idea is the same. For reference fun, check out this Railscast: http://railscasts.com/episodes/136-jquery-ajax-revised

Related

Rails Ransack gem slider

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.

Adding icon to a search dropdown of semanticui

I would like to add a semantic ui icon to a search dropdown that should be present regardless of the selected option on a ruby on rails application. Basically, it should look something like this:
What I have so far is a working search dropdown with the following code:
= select_tag(:"q[camera_id_eq]", content_tag(:option, "Choose location . . .", value: "") + options_from_collection_for_select(Camera.all, "id", "full_location"), class: 'ui fluid search selection dropdown')
I checked the semantic ui dropdown documentation and I didn't find a solution for this particular problem. They only have one for the button implementation of a dropdown but the same approach didn't work in my case.
I am practically new to Frontend, but I hope and this helps you. I share you the following examples. Assuming you are inside in Form, As far as I know, everything is in the HTML structure, using <div> and <i> for the text_field, but for collection_select I made it in a different way, I did not achieve it in an easier way.
If you use a text_field and a collection_select.
<%= form_with(model: person, local: true, html: { class: "ui form", autocomplete: "off" }) do |form| %>
<div class="field">
<%= form.label :name %>
<div class="ui right icon input">
<%= form.text_field :name %>
<i class="user icon"></i>
</div>
</div>
<div class="field">
<%= form.label :country_id %>
<%= form.collection_select :country_id, #countries,:id, :name, options = {:prompt => 'Select a Country...'}, html_options = {class: "ui fluid search selection dropdown"}%>
</div>
<div class="actions">
<%= form.submit %>
</div>
<% end %>
And I put my Js $('.dropdown').dropdown(); on my application.js
$(document).on('turbolinks:load', function()
{
// Person form dropdown
$('.dropdown').dropdown();
})
Other way for do that:
Skip the html_options on your view.
<div class="field">
<%= form.label :country_id %>
<%= form.collection_select :country_id, #countries,:id, :name, options = {:prompt => 'Select a Country...'} %>
</div>
And in your application.js add the html_options with the next code and the function dropdown(), by the way Just consider having the ID of your element, in my case it is #person_country_id:
$(document).on('turbolinks:load', function()
{
$('#person_country_id').addClass("ui fluid search selection dropdown")
.dropdown();
})
Regards.

Rails: Dependent Fields inside a form

I want to implement dependent fields in my application. For that I'm using the dependent-fields-rails gem. I've set up everything with this tutorial. The good thing: It works. Kind of. In my brand model I have brands listet such as Adidas, Nike, ...
Now my two challenges:
I don't know what I have to fill in to the data-option-value=" " field because I want to show the select form for the category if a Brand is selected at all and not a specific one. If I put a value in the field (hardcoded) like data-option-value="Adidas" the category_select form only appears if I've chosen "Adidas" from the Brand dropdown.
I want to show only the matching categories for the Brand that was selected in step 1. My group model contains also the brand record so I can match a category to the brand.
To make it a bit more clear:
Brand model contains companies like Adidas, Nike, ...
Group model contains categories like Footwear, Shirts, ...
Here's what I got:
<div class="form-group">
<%= f.label :brand %>
<%= f.select(:brand, Brand.pluck(:company).uniq, {prompt:true}, {class: 'form-control'}) %>
</div>
<div class="form-group js-dependent-fields" data-select-id='warehouse_brand' data-option-value="Adidas">
<%= f.label :category %>
<%= f.collection_select(:category, Group.all, :brand, :name1, {prompt:true}, {class: 'form-control'}) %>
</div>
Any Ideas? Thanks a lot in advance!
I assume that a brand has many groups. If you don't want to use hard coded values then put the js-dependent-fields in a loop as shown in the code below.
<div class="form-group">
<%= f.label :brand %>
<%= f.select(:brand, Brand.pluck(:company).uniq, {prompt:true}, {class: 'form-control'}) %>
</div>
<% Brand.all.each do |b| %>
<div class="form-group js-dependent-fields" data-option-value= "#{b.company}" data-select-id="warehouse_brand">
<%= f.label :category %>
<%= f.collection_select(:category, Group.where(brand_id: "#{b.id}"), :brand, :name1, {prompt:true}, {class: 'form-control'}) %>
</div>
<% end %>
To show only the matching categories you can write a query that selects the related to the brand as shown in the code
Group.where(brand_id: "#{b.id}")
this actually works:
<div class="form-group">
<%= f.label :brand %>
<%= f.select(:brand, Brand.pluck(:company).uniq, {prompt:true}, {class: 'form-control'}) %>
</div>
<% Brand.all.each do |b| %>
<div class="form-group js-dependent-fields" data-option-value="<%= b.company %>" data-select-id="warehouse_brand">
<%= f.label :category %>
<%= f.collection_select(:category, Group.where(brand: b.company), :brand, :name1, {prompt:true}, {class: 'form-control'}) %>
</div>
<% end %>

Rendering rails output

I am trying to set up my simple form outputs in my Rails 4 app.
I have a project model, a scope model and a participant model.
Participant belongs to scope. Scope belongs to Project.
The participant model has two attributes - one for 'location_specific', which is a boolean and one for 'location' which is a string.
If location_specific is true, then I want to output the location that is required.
In my participants show partial, I have:
<div class="datasubtextq">Location:
<span class="datasubtext">
<% if #project.scope.participant.location_specific == true %>
<%= #project.scope.participant.location %>
<% else %>
<%= render :text => "Remote participation" %>
<% end %>
</span>
</div>
In my form, I have:
<div class="row">
<div class="col-md-3 col-md-offset-1">
<%= f.label 'Can participants participate remotely?', :class => 'question-project' %>
</div>
<div class="col-md-7">
<%= par.collection_radio_buttons :location_specific, [[true, ' Yes'], [false, ' No']], :first, :last, {:item_wrapper_class => 'fixradio'}, {:class => "response-project"} %>
</div>
</div>
<div id="requiredlocation">
<div class="row">
<div class="col-md-3 col-md-offset-1">
<%= f.label 'Select participation location', :class => 'question-project' %>
</div>
<div class="col-md-7">
<div class="response-project">
<%= par.select :location,
options_for_select(["New York", "Boston", "Florida"]),
label: 'Where will participants take part in this project?',
prompt: "Choose one",
class: 'response-project' %>
</div>
</div>
</div>
</div>
My problem is that each time I try this, I get the 'remote participation alternative. The City option is not displaying as it should. Any ideas on what I've done wrong?
Thank you

reducing url length in rails

i have this form :
<h1> Global data management </h1> </br> </br>
<h2>Enter the conditions and click "find" option to search for users based on conditions. </br> Or click the "List" option to list all the data. </h2>
</br></br></br>
<%= form_for(:find_field, url: find_field_path , method: :get) do |f| %>
<div class="row">
<div class="span8 offset1">
<div class = "row">
<div class = "span4">
<div class="field">
<%= f.label :data_type_choice, "Data type" %>
<%= f.select :data_type_choice, [["all","all"],["2D","2D"],["3D","3D"],["2D3C","2D3C"],["3D3C","3D3C"]] , :name => nil%>
</div>
</br></br>
<h3> COMPLETED WITHIN </h3>:</br>
<div class="field">
<%= f.label :from_date_choice , "From date " %>
<%= f.date_select :from_date_choice , :name => nil%>
</div>
</div>
<div class = "span4">
<div class="field">
<%= f.label :basin_choice, "Basin" %>
<%= f.select :basin_choice, [["all","all"],["Cauvery","Cauvery"],["KG-PG","KG-PG"],["others","others"]] , :name => nil %>
</div>
</br></br>
<h3>&nbsp</h3>
<div class="field">
<%= f.label :to_date_choice , "To date " %>
<%= f.date_select :to_date_choice , :name => nil %>
</div>
</div>
</div>
</br></br>
<%= f.submit " Search ", class: "btn btn-large btn-primary" %>
</div>
</div>
<% end %>
everything works perfectly, all the parameters are passed correctly etc, but in the view where im trying to display the result, i get a HUGE url like so:
http://localhost:3000/global/data/find?utf8=%E2%9C%93&find_field%5Bdata_type_choice%5D=2D&find_field%5Bfrom_date_choice%281i%29%5D=2012&find_field%5Bfrom_date_choice%282i%29%5D=7&find_field%5Bfrom_date_choice%283i%29%5D=9&find_field%5Bbasin_choice%5D=KG-PG&find_field%5Bto_date_choice%281i%29%5D=2012&find_field%5Bto_date_choice%282i%29%5D=7&find_field%5Bto_date_choice%283i%29%5D=9&commit=++Search++
ive tried using the ":name => nil" as shown in this railscast
why is this happening and how can i reduce the url size to just "http://localhost:3000/global/data/find" ?
EDIT:
this is my find method in fields_controller:
def find
#data_type_choice = params[:find_field][:data_type_choice]
#basin_choice = params[:find_field][:basin_choice]
#from_date_choice = params[:find_field][:from_date_choice]
#to_date_choice = params[:find_field][:to_date_choice]
end
i also want to display the data entered in the form through find.html.erb like so:
<h1><%= #data_type_choice %> dsfgdfsg</h1>
if i make it a post request, the erb is not being rendered! what can i do?
thanks :)
Just change your method from GET to POST and change the routes accordingly.
Try
<%= form_for(:find_field, url: find_field_path , method: :post) do |f| %>
Your routing file should match the request as POST.

Resources