<%= f.select :id, options_from_collection_for_select(
#rtypes, "id", "typeName"),
{include_blank: true },
:onchange => ShowSubTypes() %>
Here I have options for select, what I want is to pass an id as a parameter to ShowSubTypes() function. My #rtypes variable returns an array, therefore I cant just pass #rtypes.id.
<%= f.select :id, options_from_collection_for_select(
#rtypes, "id", "typeName"),
{include_blank: true },
:onchange => "ShowSubTypes($(this).val())" %>
Basically you can accomplish this via Javascript. this within the context of the onChange is the <select> input. I have assumed jQuery to obtain the value of the selected option which corresponds to "id" of #rtypes.
In plain Javascript, I think it's this.value
Related
I have successfully integrated Jquery-Autocomplete into my rails app, currently users can search more than 5000+ airports and so far the integration works exactly as desired, however...
Any Airport has multiple columns, currently i am returning the airport name but would like to instead show
**
airport_name - airport_city - airport_iata - airport_icao
**
I have so far used Ryan Bates Railscast to get me started
Episode #102
But amended and tweaked thanks to other resources since his video. Sorry i can't reference them right now but will update my question once i've found links to their instructions.
Either way Autocomplete does work as designed and i have managed to populate a hidden field but i would really like to display more than just the Airport name when searching. I will continue to only save the airport ID.
Any help is appreciated, here is my code.
_form.html.erb
<div class="field">
<%= f.label :departure_airport %><br>
<%= text_field_tag nil, nil, :id => 'claim_departure_airport_name', data: {autocomplete_source: Airport.order(:name).map { |t| { :label => t.name, :value => t.id } } }, class: "form-control" %>
</div>
<%= f.hidden_field :d_airport_id, id: 'd_airport_id' %>
<%= f.hidden_field :a_airport_id, id: 'a_airport_id' %>
claims.coffee
jQuery ->
$('#claim_departure_airport_name').autocomplete
source: $('#claim_departure_airport_name').data('autocomplete-source')
select: (event, ui) ->
# necessary to prevent autocomplete from filling in
# with the value instead of the label
event.preventDefault()
$(this).val ui.item.label
$('#d_airport_id').val ui.item.value
$('#claim_arrival_airport_name').autocomplete
source: $('#claim_arrival_airport_name').data('autocomplete-source')
select: (event, ui) ->
# necessary to prevent autocomplete from filling in
# with the value instead of the label
event.preventDefault()
$(this).val ui.item.label
$('#a_airport_id').val ui.item.value
As you can see i am directly reaching the model data without the need for a dedicated controller although i realise this would be much more intelligent than my current solution as i wish to roll this out in other areas of the platform.
I don't fully understand everything that is happening in the jquery code in my coffee file this was obtained from another source although i forget who to give credit. As far as i know it's taking the ID of the airport and populating the hidden field?
If you can spot how to show other airport database columns to the user that would be great.
Thanks
edit
Also wish to restrict autocomplete from loading the data source into html due to seriously long page load times. A screen shot of what i mean is below.
screenshot of data loading
You can modify the autocomplete source to
<%= text_field_tag nil, nil, id: 'claim_departure_airport_name', data: { autocomplete_source: Airport.select(:id, :name, :city, :iata, :icao).order(:name).map { |t| { label: "#{t.name}-#{t.city}-#{t.iata}-#{t.icao}", value: t.id } } }, class: "form-control" %>
To refactor this a bit, you can move the active record query into a helper
def airport_autocomplete_data
Airport.select(:id, :name, :city, :iata, :icao).order(:name).map { |t| { label: "#{t.name}-#{t.city}-#{t.iata}-#{t.icao}", value: t.id } }
end
and your text field becomes
<%= text_field_tag nil, nil, id: 'claim_departure_airport_name', data: { autocomplete_source: airport_autocomplete_data }, class: "form-control" %>
The main point is here data: {autocomplete_source: Airport.order(:name).map { |t| { :label => t.name, :value => t.id } } }
It builds an array of objects, like [{'label': 'BKK', value: 1}, {'label': 'HAM', value: 2}]
So you either need to add something to the label key, or maybe add a different key and use it later in the select callback.
If you are using rails4-autocomlete Gem. You can easily override from controller.
def autocomplete_profile
term = params[:term]
profiles = Profile.where(
'LOWER(profiles.first_name) LIKE ? OR LOWER(profiles.last_name) LIKE ?',
"%#{term}%", "%#{term}%"
).order(:id).all
render :json => profiles.map { |profile| {:id => profile.id, :label => profile.id, :value => profile.id} }
end
I have just started learning rails, html and javascript. I am using a collection_select to allow a user to select other users in the database:
<%= f.collection_select :id, Customer.where(business_id: current_customer.business_id), :id, :full_name, :prompt => 'Select', :html => { :id => "colleageselect", :onChange => "renderColCal(this)"} %>
<div id = colleaguecal> </div>
I have just been trying to test whether onChange works, by using the javascript:
<script type = "text/javascript">
function renderColCal(select){
alert('this is a test' + select.valueOf() );
document.getElementById("colleaguecal").innerHTML = "foo"
}
</script>
But changing the collection_select value when running the page doesn't do anything? Am I missing something here?
check the generated html if it is what you are expecting. I don't see any issues with the js although it would be better if it was unobstrusive. The only thing that may have caused your issue is that you didn't just passed a hash to the html options. Try
f.collection_select :id,
Customer.where(business_id: current_customer.business_id),
:id,
:full_name,
{ prompt: 'Select' },
{ id: "colleageselect", onChange: "renderColCal(this)" }
<%= select_tag "profile", options_from_collection_for_select(#profile, 'id','profile_blip'),:onchange => "window.location.replace('/'+this.value);" %>
In place 'id' want to place some link is it possible in rails
I am trying with below code not getting, please help me out.
<%= select_tag "profile", options_from_collection_for_select(#profile, "profile/publications",'profile_blip'),:onchange => "window.location.replace('/'+this.value);" %>
options_from_collection_for_select create a erb code like this:
<option value="#{profile.id}">#{profile.profile_blip}</option>
Write a method in the model class "Profile" which returns what you want. Then change the select_tag to this:
<%= select_tag "profile", options_from_collection_for_select(#profile, "new_method_name",'profile_blip'),:onchange => "window.location.replace('/'+this.value);" %>
I have a two f.select fields in my form with the same object id. I am changing these fields by selecting the parent field using javascript and CSS.
<%= f.label :Service_Phase, 'Service Phase' %>
<%= f.select :Service_Phase, [], { :prompt => 'None' }, class: 'select_phase', disabled: 'disabled' %>
<%= f.select :Service_Phase, (1..52), { :prompt => 'Select Week' }, class: 'select_week' %>
<%= f.select :Service_Phase, (1..12), { :prompt => 'Select Month' }, class: 'select_month' %>
I want to display the select box disabled with the text 'NONE' by default and will change the select_field by the parent select field value. Is it any other neat way to do this in rails? Because when i try to the check the value after selected the value of week in console, its display the empty string. I don't know where am doing wrong and how can I correct this? Thanks in advance.
I think you might be better off just doing that with javascript/jquery. I don't believe rails has a built in way to enable a secondary select field based off the first.
I have a select Menu with a few options
<p>
<%= f.label :reason %><br />
<%= f.select :reason, Confirmation.reasons.collect {|p| [ p[:name], p[:id] ] }, { :include_blank => true } %>
</p>
The last being id "5" and name = "Other"
If and only if they choose other I want a hidden text_area with a div id = "other" to be shown to allow the user to type...
How can I do this simply?
<%= link_to_function "Show me other" do |page|
page[:other].toggle
end %>
I can toggle it but I want to show it on the selection of the "Other" in the select box? Is this a job for observe_field?
Your own answer is fine, but for future reference, observe_field doesn't have to make an Ajax call. You can use :function to specify JavaScript code to run locally instead.
e.g.
<%=observe_field 'reason', :frequency => 1,
:function => "if ($('reason').value == '5') { $('otherform').show(); } else { $('otherform').hide(); }" %>
<%= f.select :reason, Confirmation.reasons.collect {|p| [ p[:name], p[:id] ] }, { :include_blank => true }, { :onchange => "if (this.value == '5') { $('otherform').show(); }" } %>
Got it!