I'm using Bootstrap-sass and formtastic in my Rails application, and I'm not sure why the bootstrap-typeahead feature isn't working.
Form partial:
<%= f.input :tag, :input_html => { :'data-provide' => "typeahead", :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]' } %>
application.js manifest:
//= require bootstrap-typeahead //typeahead is correctly loaded, checked with firebug
result HTML source code:
<input :data-minLength="2" data-provide="typeahead" data-source="["hello", "hellow", "heaven", "helo", "herr"]"
In the end, I will need to customize typeahead to get the performance I want, but even this simple javascript isn't working for some reason. I cant find anything wrong with the code. Could anyone help me?
UPDATE:
I tried it in the javascript way as follows:
<script> //call typeahead
$(function() {
$('input#type_ahead').typeahead({
'source' : ["hello", "heaven", "heythere"]
});
})
</script>
<%= f.input :tag_list, :input_html => { :id => "type_ahead" }, %> //input tag
And still it seems like typeahead fails to work. i.e) typing in "he" does not get me a dropdown of those three items in the above array. Does anyone have an idea?
I think you need to set html_safe for:
{ :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]'.html_safe }
Have you called the typeahead() method when your page loads? You need to do something like this;
$(function() {
$('input').typeahead();
})
You'll need to assign a class or id to your input to bind the typeahead to it specifically (Rails probably has assigned an id to it automatically, I'm presuming you've omitted it specifically)
$(function() {
$('input#my-tag-field-with-a-cool-typeahead').typeahead();
})
edit:
The following worked for me. It'll take a bit of modification to the rails part to fit your situation, but this definitely works.
<script>
$(function() {
$('input#type_ahead').typeahead()
}
</script>
<%= text_field_tag :test_type, '', data: {provide: 'typeahead', source: "['hello','heythere','heaven']"} %>
Related
I have used select2 gem in my rails 6 project to show multiple options to select
<%= select_tag 'skill[]', options_for_select(Course.populate_data, :selected=> "#{params[:skill] rescue nil}"), :prompt => "skill", class: "form-control js-select",id: "js-skill", :style => "width:180px", multiple: "multiple", :style => "width:280px;"%>
I want selectbox to remember my last selections after I submitted the search form
I tried data amd params, but not working for me, can anyone help me with this
I solved the issue, using below code. I was not doing AJAX call, otherwise I would have done this in success response of query
$(".js-select").select2();
if ("<%=params[:skill]%>") {
var a = <%=raw params[:skill]%>
$('#js-skill').select2().val(a).trigger('change');
} else {
$("#js-skill").select2();
}
Posting the answer, if it may help someone
I am trying to implement a dropdown list in a simple_form but the collection of emails appears behind the main box. See image below:
I have already tried to play with z-index but failed. I have also tried to add some javascript code according to select2 documentation regarding common problems (https://select2.org/troubleshooting/common-problems ) and also failed.
Ruby slim code is:
.reveal id="doubt-material-#{material.id}" data-reveal=true
= simple_form_for [:student, trail, component, material, material_student, doubt], html: { id: "doubt" }, remote: true do |f|
= f.input :recipient, :collection => %w[contato#witseed.com suporte#witseed.com], label: "#{t 'students.materials.index.questions.form_send_email'}", include_blank: "#{t 'students.materials.index.questions.form_blank_line'}"
javascript:
$('#select2-doubt_recipient-container').select2({
dropdownParent: $('#doubt-material-#{material.id}')
});
Html is:
Does anyone have any idea of whats is going on ?
Thx.
I want the value to disappear from the list after it is choosed. Why my solution is not working ? My form partial code:
= f.input :value, :collection => ['red', 'blue', 'green'], :disabled => :used_values
You can't do this with pure rails stack, you'll need js/jquery.
Write a js/jquery script with following code,
$(document).ready(function () {
$("#selectBox").change(function(){
$("#selectBox option[value='selected']").remove();
});
I am using tinymce-rails gem for Tinymce and I want to add custom menu option. Right now I am doing what is suggested in the readme of gem like:
<%= f.input :content , :label => false , :placeholder => 'Content', input_html: {class: "tinymce"} %>
<%= tinymce %>
I am using simple-form.
I want to add a drop-down in the editor with a bunch of options (I have an array of names) and when user clicks on an option then the selected name should be inserted in the view of editor. And those names will be dynamic.
I tried to pass many options to the initialiser tinymce but unable to get the result.
Rather than using the default initiator from the gem you could initiate tinymce manually and create the menu item at the same time:
http://www.tinymce.com/tryit/menuitem.php
Something like this:
<script type="text/javascript">
tinymce.init({
selector: '.my-class textarea',
toolbar: "styleselect | bold italic | mybutton",
setup: function(editor) {
<% #my_items.each_with_index do |name, index| %>
editor.addMenuItem('<%= name %>', {
text: '<%= name %>',
context: 'tools',
onclick: function() {
editor.insertContent('<%= name %>');
}
<%= index == (#my_items.count - 1) ? '});' : '}),' %>
< % end %>
});
</script>
We use a ternary operator to choose the correct closing tag based on the index of the names.
Theoretically you can also do this in the config/tinymce.yml file, but due to the dynamic nature it's not really plausible.
Something else you may want to look into is passing the menu to the activeEditor like:
tinyMCE.activeEditor.controlManager.get('my_menu')
I've a problem of compatibility between gmaps4rails gem and google place API
Basically if I put in my view a gmpas4rails like this:
<%=gmaps%>
then this script doesnt work anymore (it normaly activate an autocomplete on user_address field:
$(document).ready(initialize_gmaps_autocomplete_user_address());
function initialize_gmaps_autocomplete_user_address() {
var input = document.getElementById('user_address');
var defaultBounds = new google.maps.LatLngBounds(new google.maps.LatLng(42.71422,-4.222666), new google.maps.LatLng(51.179343,8.47412));
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setBounds(defaultBounds);
autocomplete.setTypes(['geocode']);
}
I've tried to call the script by gmaps4rails.call_back and to change the var names in my scripts...
Any idea?
I guess you make a second call to the google api which mess things up.
Two solutions here:
1) don't include the js from the partial:
<%= gmaps({your_hash}, true, false) %>
And include all the js files manually but be sure to write:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
Here is the original partial so you don't forget any file.
2) Grab the current version on git and add places directly:
<%= gmaps({ "map_options" => { "libraries" => ["places"] } }) %>
I'll update the gem later, so versions above 0.10.2 will have this included.
Actually 2) should be
<%= gmaps({:map_options => {:libraries => ["places"]}}) %>
because in the source code of gmaps4rails symbols are used instead of strings.
To make it work with strings you'd have to use HashWithIndifferentAccess:
<%= gmaps(HashWithIndifferentAccess.new("map_options" => {"libraries" => ['places']}))%>