I have a few select elements in my views that are supposed to fire after the user chooses an item from the dropdown.
My selects look like this:
<%= collection_select(:project, :id, projects, 'id', 'name', { },{:style => "width:150px", :onchange => "document.getElementById('project_btn').click()" }) %>
<span class="control_button_light" style="display:none;"><%= submit_tag 'jump_to_project', :id => "project_btn" %></span>
<%= observe_field("project_id", :frequency => 1, :function => "document.getElementById('project_btn').click()") %>
The problem is that the observe_field function is firing before the select loses focus. In other words, the submit element is "clicked" 1 second after the select gets focus, even if the user hasn't finished choosing from the dropdown.
Anyone know how to delay the observer from clicking the submit until after the select loses focus?
Try this.
<%= observe_field("project_id", :frequency => 1, :function => "submit_it") %>
<script>
function sumbit_it{
setTimeout(function() { $('project_btn').click(); }, 1250);
}
</script>
After rereading the question, I don't think you need the observe_field, since you already have onchange for that field.
Related
I am trying to implement bootstrap multiselect field in my rails app.
Making use of the bootstrap-multiselect_rails gem found here (https://github.com/TrevorS/bootstrap-multiselect_rails)
Have it installed and configured successfully but in my form am not able to select multiple vales. It allows me to select only an single value.
Right now my code looks like this:
<%= f.collection_select :role_pm, User.where(:user_role => 'Project Manager'), :name, :name, {}, {:multiple => 'true'}, {class: "role_pm"} %>
Where am I going wrong?
Finally got this working. I have Update the line of code in this answer which has caused me a lot of agony over the past 2 days or so
<%= f.collection_select :role_pm, User.where(:user_role => 'Project Manager'), :name, :name, {}, :multiple => 'true', :class => 'role_pm' %>
Looks like I have passed both multiple and class attributes as seperate arrays which was really not needed in the first place.
.You need to initialize Multiselect using the js.
here comes my working code:-
###HTML FILE
##my controller has #event_types to autopopulate the values as well for edit action
<label for="events" class="control-label form-group col-md-12">Event Type: </label>
<div class="form_group col-md-12">
<div class="btn-group">
<%= select_tag("event_types", options_for_select(#event_types.pluck(:name),:multiple=>true,:required=>true) %>
</div>
</div>
###js FILE-initialise using id/class for multiselect
$('#event_types').multiselect({
enableFiltering: true,
filterBehavior: 'text',
enableCaseInsensitiveFiltering: true,
nonSelectedText: 'Select the type of events'
});
you can use selected attribute in select tag to select those values during edit action.Just pass it from controller..example
:selected => #event_types.new_record? ? nil : #event_types.pluck(:name)
rewriting your query...
<%= select_tag("event_types", options_for_select(#event_types.pluck(:name),:multiple=>true,:required=>true) %>
changes to :Showing names in select dropdown list
<%= select_tag("role_pm", options_for_select(User.where(:user_role => 'Project Manager').pluck(:name).uniq,:multiple=>true,:required=>true) %>
I have a problem when trying to submit a form with a div (instead of a f.submit button)
<%= form_for #user, url: {action: "submit_user"}, html: {id: "user_submit", class: "form"}, :method => "post" do |f| %>
<%= f.text_field :first name, :required => true, :placeholder => 'first name', :autocomplete => :off %>
<%= f.text_field :last name, :required => true, :placeholder => 'last name', :autocomplete => :off %>
<div id="submituser" class="some very fancy css here" onclick = "document.forms['user_submit'].submit();">
<% end %>
The problem is that the form is sent, but without the validations (causing it to send blank first and last name if nothing is entered)
note that when using
<% f.submit "submit" %>
validations do work.
Thanks
I guess document.forms['user_submit'].submit(); does not trigger the submit event, so You have to launch validation manually. But what is the point of using div instead of button? You could style a button with some very fancy css here too. OR make a 'hidden' submit button and add onclick = "document.form.button.click()" to div :-)
Found my answer here:
Difference between handling $(“form”).submit or an click event?
And i quote #Giovanni Sferro:
The click callback is called only if the user actually click on the submit button. But there are cases in which you would submit the form automatically by javascript, in that case the click callback is not fired while the submit callback is. I would recommend to use always the submit for validation and intrinsic action of the form, while using the click callback for animation or other things related to the action of clicking on the button.
so my (working) code looks like this:
<div id="submituser" class="some very fancy css here" onclick = '$("#user_submit input[type=\"submit\"]").click();'>
I have a multi select list:
<%= select_tag "selectedSuites", options_for_select(#suitesInSystem), {:multiple => true, :class => "chzn-select", :style => "width:100%;", :style => "height:100%"} %>
I now want to add a button to the same view, which will pass the list of selected options in my listbox back to a controller function, for some server side processing:
<button id='SyncButton' onclick="<%=controller.dostuff(selectedSuites_tag_selections)%>">Sync</button>
Can someone advise what I've failed to spot so far?!?
Thanks
I am working on this from a very long time. I want to show the elements of a collection in a drop down, and on click of a value I must reload the page and display its details. This I am able to do easily. The problem is, When the page is reloaded, the selected value of the dropdown is getting reset. So I just want retain the selected value after the reload to use ':selected' attribute so that after relaod the clicked value is shown. So please let me know how to fix this issue ASAP. Pls Help me out with this.
<%= form_tag({},:method => :get, :class => 'formSearch absolute') do %>
<%=select("post", "id", #other_schools.collect {|p| [ p.name, p.id ] }, { :include_blank => true }, :onchange => "this.form.submit();") %>
<%end%>
As per your code,
You are searching based on select box value and you want to populate search option
I will use select_tagmore info here
<%=select_tag("post_id", options_for_colletcion_select(#other_schools,p.name, p.id ,params[:post_id), { :include_blank => true }, :onchange => "this.form.submit();") %>
You can go through docs for syntax options.
In this code where does the this.form.submit(); method will go?
<%=select_tag("post_id", options_for_colletcion_select(#other_schools,p.name, p.id ,params[:post_id), { :include_blank => true }, :onchange => "this.form.submit();") %>
I've built a multi-select form (from within form_for) like this:
<div class="rounded-block quarter-wide radio-group">
<h4>Exclude customers from source:</h4>
<%= f.select :excluded_sources, options_for_select(User.select(:source).group(:source).order(:source).map {|u| [u.source,u.source]}), {:include_blank => false}, {:multiple => true} %>
<%= f.error_message_on :excluded_sources %>
</div>
this works well for what I need. The only problem is that when i go back to the page that displays the choices, I don't see what was previously selected (i.e. what is already in the DB at time of rendering). Is there an easy way to get rails to display what's previously been selected? I'd MUCH prefer not to switch to check boxes.
in my matching profiles model (corresponding to the table that stores excluded_sources), i have this:
serialize :excluded_sources
this ended up being the relevant piece:
:selected => matching_profile.send(:excluded_sources)
here:
<div class="rounded-block quarter-wide radio-group">
<h4>Exclude customers from source:</h4>
<%= f.select :excluded_sources, options_for_select(User.select(:source).group(:source).order(:source).map {|u| [u.source,u.source]}, :selected => matching_profile.send(:excluded_sources)), {:include_blank => false}, {:multiple => true} %>
<%= f.error_message_on :excluded_sources %>