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.
Related
This is _login.html.erb partial from Spree github page:
<%= form_for Spree::User.new, as: :spree_user, url: spree.create_new_session_path do |f| %>
<fieldset id="password-credentials">
<div class="form-group">
<%= f.email_field :email, class: 'form-control', tabindex: 1, placeholder: Spree.t(:email) %>
</div>
<div class="form-group">
<%= f.password_field :password, class: 'form-control', tabindex: 2, placeholder: Spree.t(:password) %>
</div>
<div class="checkbox">
<label>
<%= f.check_box :remember_me %>
<%= f.label :remember_me, Spree.t(:remember_me) %>
</label>
</div>
<div class="form-group">
<%= f.submit Spree.t(:login), class: 'btn btn-lg btn-success btn-block', tabindex: 3 %>
</div>
</fieldset>
<% end %>
but in reality when go to that page that form is built-in in panel with heading "Login as Existing customer".
from where it comes?
That comes from a different template, located here: https://github.com/spree/spree_auth_devise/blob/master/app/views/spree/user_sessions/new.html.erb.
If you search Spree's code for the sentence 'Login as Existing Customer', you'll see it's present in their locales with the key login_as_existing.
A little more digging, and I found the key on line five of the template linked above (as well as a couple of other locations). You can replace this in the same way you have the login form, or adjust the locale if you'd prefer different terminology. And a final third option, you can use Spree's deface overrides.
Tricky to track down these views sometimes, though search the main repo and any of the included extensions and you should be able to track anything down :)
there is a way to put an input dynamically from button?
Example:
this is the form:
<%= form_for(#order) do |f| %>
.
...
<div class="field">
<%= f.label :productlist %><br>
<%= f.select :productlist, #products, :prompt => 'Select one!' %>
<%= link_to 'Add More', '#', id: 'products-link' %>
</div>
<div id="newproduct">
<p>load here the new input on Add more link</p>
</div>
<div class="field">
<%= f.label :status %><br>
<%= f.text_field :status %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
so i thinked up to ajax and a way to load a partial input into the form, but im not understanding the correct way to do this.
Thank you
In your javascript file add:
$("a#products-link").click(function(){
$.get('/partials/products_form', function(data){
$("div#newproduct").append(data);
}, 'html');
});
Essentially what is happening is that you are going to send a get request via ajax to a form in /partials/products_form or wherever you choose to keep your form partial. And then this html will be appended to whatever div/identifier you choose in this case div#newproduct.
The edit view page has the following dropdown:
<%= select_tag "Voiture", options_from_collection_for_select(#vehicles, :id, :model, params[:id].to_i) %>
When used, I would like to reload the page with the Vehicle chosen in the dropdown. I don't know whether to use :onchange => submit() or :action => 'edit'. Thanks.
Let's say we have a form like this(which is common for edit & new action)
and dynamically we are assigning ID to this form, hence for edit action this forms id will
Be 'edit_customer_form'
#_form.html.erb
<%= form_for(#customer, html: {id: params[:action] + '_' +'customer_form'}) do |f| %>
<div class="field">
<%= f.label :name %><br>
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :vehicle_id %><br>
<%= f.select :vehicle_id,
options_from_collection_for_select(#vehicles, :id, :name) %>
</div>
<%= f.submit %>
<% end %>
Now, we want when the value in the selection box is altered the edit form(#edit_customer_form) should get submitted.
#application.js
$(document).ready(function(){
$('#edit_customer_form').on('change', '#customer_vehicle_id', function(){
$('#edit_customer_form').submit();
});
});
Here #edit_customer_form is the edit forms ID and #customer_vehicle_id is the ID of the selection box.
Check the complete code in below gist link:
https://gist.github.com/AjayROR/0a633ee493d78ff30332
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
So, I have a form that uses 'date-select', which renders three select boxes per used date-select (year, month and day).
Instead I want to use datepicker, and I've followed the instructions here. However, I don't have a clue how to actually implement the datepicker in the form in the view.
I'm using the following line in application.js...
$('.datepicker').datepicker()
...so I guess I need to give the select boxes the class .datepicker?
<%= form_for #project do |f| %>
<div class="text_field">
<%= f.label :title%>
<%= f.text_field :title%>
</div>
<div class="text_field">
<%= f.label :description%>
<%= f.text_field :description%>
</div>
<div class="dropdown">
<%= f.label :start_date%>
<%= date_select :start_date, :startdate %>
</div>
<div class="dropdown">
<%= f.label :end_date%>
<%= date_select :end_date, :enddate%>
</div>
<div class="select">
<%= f.label :title%>
</div>
<div class="submit">
<%= f.submit "Spara" %>
</div>
<% end %>
Try :
<%= date_select :start_date, :startdate , :class => 'datepicker' %>
EDIT: I have replicated your code on my machine and found the possible mistakes:
This gem selects the date in a text field, not in a date-select . The input should be text_field and it looks like this:
<%= f.text_field :date, :class => 'datepicker' %>
As described in the gem's install guide , you should be sure to require it both in your application.css and application.js . One more important thing : in your projects.js.coffee make sure that the DOM is loaded , like this :
jQuery ->
$('.datepicker').datepicker()