I have been looking around and cannot find a good example of implementing Chosen, http://harvesthq.github.com/chosen/, into a Rails app. I am trying to convert my existing multi-select into a chosen styled multi-select box.
I tried inserting the files manually, copying chosen.jquery.js into my assets/javascripts folder along with adding chosen.css. Also added //= require chosen-jquery to application.js along with the following code
jQuery(function($){
$('.chzn-select').chosen();
})
Also have *= require chosen in application.css.scss
I added :class => "chzn-select" in a collection_select in a form_tag.
Also tried using the 'chosen-rails' gem (here is an example http://choppingbloc.tumblr.com/post/24894460392/multiple-select-boxes-with-chosen-jquery) but had no luck.
Anything I might be overlooking? The collection_select is working, but it is not styled like Chosen. I am a beginner so if there is anything obvious I may have overlooked, please tell - everything above is what I have done.
Set it up like this
You have to include both the css file and the js file
in you application.css.scss, (because it is sass, do not use /* require)
#import "chosen";
in you application.js
//= require chosen.jquery
You should give your selects a different class or id than
$('.chzn-select').chosen();
because, it might make things messy when you debug the html. Chosen gives classes with this prefix like .chzn-done, .chzn-single, chzn-drop, chzn-search.
If you have a railscasts pro account.
look at this
token-fields-revised
You should really drop the chosen plugin and go for the select2 plugin. It is based on the chosen plugin, but is way better.
Related
I want a text input to select the given options in my rails form.
f.collection_select(:user_id, User.all, :id, :name)
is the closest to what I want, but there are too many users to show as a dropdown.
I've tried rails-jquery-autocomplete, and I've written ajax to insert search results to the view before, but it all seems too much and verbose in 2019 just to convert a select box to a text input.
If there is a best practice for filtering the given object collection in a rails form, I would like to know. Thank you.
I guess chosen js library might be a good option to consider and there is also a rails wrapper gem available for this (https://github.com/tsechingho/chosen-rails)
Include the gem in your gemfile and run bundle install
gem 'chosen-rails'
Include the following to application.js
//= require chosen-jquery
Include the following to application.scss
*= require chosen
Example usage:
Once the setup is complete you can use it as follows
<%= select_tag :users, options_for_select(User.all),class:"form-
control",multiple:true id:chosen-select" %>
And initialise it in java script as follows
$('#chosen-select').chosen();
You can refer to various options library provides in their official page (https://harvesthq.github.io/chosen/) and customise it to your use case.
I hope everyone is having a great day. In my pursuit of knowledge, I've ran into a huge stumbling block.
I'm following this tutorial. I'm using the most up to date everything, I think he is in rails 4 and I'm in rails 5.
https://youtu.be/GY7Ps8fqGdc?t=703
By no means is watching the tutorial necessary to understand my question. Right where I linked, the only thing he has done besides generate a simple rails app, is generate a controller like this:
rails generate controller welcome index
Then right where I linked into the video, he goes into the routes file and uncomments a line that isn't present in my rails app, so I just wrote it by hand
root 'welcome#index'
And it fails when I try to load localhost:3000, throwing a jsexception "TypeError: Object doesn't support this property or method"
Is there some functionality that has been deprecated or something? Why isn't this working? I've done the tutorial up to where I've linked at least 5 times. I have tried very hard to resolve this with no avail.
Oh, and before someone tells me you shouldn't route like that, I've read that before, but he's just trying to get the viewers to the point where they can execute ruby code on a web page, he covers routing in detail later, but I can't get there without beating this because the lesson relies on me getting this first.
Please, oh great forum, grace me with some answer and I will imbue you with an upvote and great thanks.
Also, on a side note, if anyone could recommend learning resources that have helped you get past beginner with this framework, I'd be happy to accept advice in addition to this question being answered.
EDIT: to include requested information
the routes.rb file
Rails.application.routes.draw do
get 'sausage/tuna'
root 'sausage#tuna'
end
One last piece of information, probably obvious, I call my things funny names so the generic "welcome" and "index" don't confuse me. I draw inspiration from the new boston and called mine 'sausage tuna' instead of 'welcome index'.
Thanks again for helping me out. I really want to learn this.
Ok the problem seems to come from ExecJS, which is basically the gem that deals with JS within Ruby.
The offending line is : <%= stylesheet_link_tag 'application', media: 'all' %>
(as you can see I am missing the turbolinks bit because I am not using turbolinks)
What this means? Basically this line is for a dedicated sheet of JS code attached to this page.
where is this code located ? In application.html.erb. application.html.erbis the default view layout. It means that every view triggered by your code inherits from this 'master' view.
So basicaly your routing is good if the error goes to this stage. Your Sausage#tuna action is triggered and then the `tuna.html.erb" view is rendered but with an error on this master view.
Basically because you have an error on application.html.erb, you will get the same error for every action of any controller and every view triggered.
Now what the problem ? Well I never encoutered this error but skipping coffee seems to solve your problem. Though in my case I have gem 'coffee-rails' and some of my JS files are actually "coffee.erb" files and I don't get the same error. So i guess it is kinda more complex than this..
But in order for you to understand Rails better , this line, as I said earlier, is compiling some JS and attaching it to the master view file (then to every view of your application)
Now if you want to know what JS will be compiled into this separate sheet, looks at the file app/assets/javascrips/application.js.
You should get something like :
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require jquery_ujs
//= require bootstrap
//= require cable
//= require rails.validations
//= require footer.js
//= require serviceworker-companion
Everything looks like it is commented out, but actually the last lines with //= require are actually gathering some JS from different gems. (Jquery, ...)
In my case : Jquery, Bootstrap, actioncable .. which is the Js I need on every page of my app...
Regarding your question about a good tutorial, the one I prefer is the getting started tutorial on Rails website : https://guides.rubyonrails.org/getting_started.html
EDIT
My mistake. It is the stylesheet that creates a problem. Which I am even less sure what could cause this because ExecJS is dealing the Js code in your app, not the CSS.
The stylesheet work exactly the same as said above for application.js. It links some CSS stylesheets to every of your application pages.
Here is mine app/assets/stylesheets/application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require navbars.css.scss
*= require footer.css.scss
*= require cookiewarning.css.scss
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
As you can see, there is the navbar css and the footer css plus some other CSS that appends on everypage of my app.
(And thanks for accepting my answer as the answer but it is definitely not, just wanted to explain you what were things doing :) )
For anyone experiencing this issue, reinstalling node seemed to solve my problem.
this post has half the process for using font awesome in a project. The steps are:
download font-awesome zip and extract into grails-app/assets/fonts dir.
modify build.gradle to add includes = ["fonts/*"] under assets
?
Use the font in your code, e.g.
< i class="fa fa-camera-retro fa-4x"> fa-4x
The question is, what is step 3? I assume there are two options:
put something like < link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> at the top of your gsp page, but what is the path? I tried guessing, e.g. href="/assets/fonts/css/font-awesome.min.css" but this does not work even after restart.
Put something in application.css. I have no idea what this could be, as it currently only refers to files in its own directory. I even read the manual, but could not figure it out. The manual mentions "*= require font-awesome" but presumably this requires more code somewhere as it doesn't work.
Any suggestions? Grails certainly makes some very hard things easy, but it also makes some easy things hard.
You may have to change the directory references inside the fontawesome.css file. Try for a replace of all the references to ../fonts/fontawesome for fontawesome and check if it works.
This assumes having the font-awesome.css file inside the assets/stylesheets directory and the fonts inside the fonts directory. Then, in build.gradle you should have something like:
assets {
minifyJs = true
minifyCss = true
includes = ["fonts/*"]
}
In your layout GSP file's (main.gsp) <head> you should have something like:
<asset:stylesheet src="application.css"/>
Finally, in your application.css you should have something like:
*= require font-awesome
The require should have the same name as the CSS file without the .css extension. So, if you have the minified version of font-awesome it should look like this instead:
*= require font-awesome.min
Note that by doing that you don't need to add the CSS include to GSP pages.
Alternatively you can just generate an embedding code on the website of fontawesome (http://fontawesome.io/get-started/) and add it to your main.gsp file
<script src="https://use.fontawesome.com/xxxxxxxxxx.js"></script>
I got the answer to step number 3 from here:
The answer is to add the following to application.css
"*= require css/font-awesome"
Surprisingly, this will pull on font-awesome.min.css from the fonts/css/ dir where the files are exploded from the zip distribution.
Jordi and klocker also supplied valid solutions, but the above one is what I was looking for.
How to reference the assets directly via a link is still a mystery.
I have a rails app at 4.1.5. There are some score sheet pages which need printing and which need to printed at an exact font size and td border thickness (thin). I am using the bootstrap-sass gem.
I have just updated my code to bootstrap 3 and now find that bootstrap is interfering with my score sheet css. What is my best strategy?
Place my scoresheet css file in either lib/assets or vendor/assets. I have read that there is a descending load order with vendor/assets loaded last but can't confirm if that's true.
Put my score sheet css (or sass) into my bootstrap overrides css after the #import bootstrap directive.
Remove require_tree from my application.css and require each file explicitly in order. I understand require_tree will load files in random order.
None of the above?
require_tree will load alphabetically. You could prefix each file with a number, but that's not my recommendation.
You can explicitly require files, then follow that with a require_tree, which is a catch-all for the rest, which I recommend.
Regarding order, if you want to affect all sass variable based items such as font-size across the entire site:
declare values for matching variables (see bootstrap/variables.scss)
import bootstrap
require specifics, then catch-all with require_tree
I noticed that some jquery effects requires that scripts are loaded in proper order.. in my case it is working if they are loaded like this:
jquery 1.4.4
jquery-ui-1.8.16.custom.min.js
autocomplete-rails.js
jquery.cycle.all.js
....
if they load in different way then some of my animation or jquery feature is not working. So how do I specify in rails wich script to load first?
Right now I did it in a primitive way by adding 1 2 3 numbers in front of names of every script I have in order that I need resulting in:
1jquery 1.4.4
2jquery-ui-1.8.16.custom.min.js
3autocomplete-rails.js
4jquery.cycle.all.js
It's primitive but it's working. Is there another way of doing it?
Rails 3
For Rails 3.0:
javascript_include_tag takes an array of sources, and includes them in the order that you define. You can omit :defaults, or define it in your application.rb file with config.action_view.javascript_expansions[:defaults] = %w(foo.js bar.js). :all includes all the javascripts in your /javascripts/ folder.
Therefore, it's best to have jQuery at the beginning, since most or all of your javascript files will use jQuery.
More documentation: http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/JavascriptTagHelpers/javascript_include_tag