I am very new in ruby, so please don't judge me too much :)
I was trying to make this template http://freebiesbug.com/code-stuff/sedna-one-page-website-template/ run on rails. And it went pretty well.
However, I have stuck on configuring javascript parameters (the way it loads on rails). I am not sure how to do that correctly. Things that slides in the template doesn't work for me, like apple images and slider of employees in the bottom...
I tried to include all file names in javascript.rb file and also I have used:
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
but non of these worked.
Any ideas where I may made a gap?
Thanks!
Javascript files end in .js, not .rb, so thats one problem.
The line
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
tells rails to package and include the application.js file found at app/assets/javascripts/application.js. Assuming your template has one associated javascript file, you can copy and paste the contents of that file into your application.js file (which may be the easiest solution). You can also add any javascript (or coffeescript) files to the app/assets/javascripts folder, and those files will be packaged and served up in the default configuration of rails.
Related
I am just starting in rails and loading external resources like css and js has been an issue for me. Reading in few places, i found out that, css should be placed in app/assets/stylesheets and js inside app/assets/javascripts. After doing this i called my css and js in my view file like
<%= stylesheet_link_tag "<<path to my css>>" %>
for css and
<%= javascript_include_tag "<<path to my js>>" %>
and i included this line inside my config/initializers/assets.rb
Rails.application.config.assets.precompile += [/.*\.js/,/.*\.css/]
but doing this gave me some sort of compilation error. But i am not sure whether its the correct way or not to load external resource.Where are the other place that i need to change in order to load css and js and the best practice to include external resources in rails in terms of performance as well.
Asset Pipeline
What you're referring to is something called the asset pipeline - the app/assets folder is where you store all the "dependent" files for your HTML -- css / js / images etc.
The asset pipeline is very simple -
The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets. It also adds the ability to write these assets in other languages and pre-processors such as CoffeeScript, Sass and ERB.
It's function is to provide you with a way to "compile" your CSS/JS into condensed (minified) files, which you can call in your front-end HTML. The ultimate aim is to make your "assets" as small as possible, so your page loads fastest.
--
In your case, you'll want to look up Sprockets Manifest Directives --
#app/assets/stylesheets/application.css
/*
*= require self
*= require_tree .
*/
The above will take every CSS file in app/assets/stylesheets and concatenate them into a single application.css file:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application %>
So to answer your question directly, you only need to store external stylesheets in your app/assets/stylesheets folder.
If you have a "real" external stylesheet (hosted by Google or something), you'll want to include it in your layout as follows:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application, "http://cdn.google.com/stylesheet.css" %>
Once you add your css and js in assests respective folder, you have to require those files in application.js and application.css and then you can include these two files in your html. Try following code:
application.css
//= require abc
application.js
//= require xyz
In your html:
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
I installed Elasticsearch (with searchkick gem) following this tutorial - https://shellycloud.com/blog/2013/10/adding-search-and-autocomplete-to-a-rails-app-with-elasticsearch.
Search is working and now I'm implementing autocomplete function with typeahead.js which I installed using Bower.
However I get the error message:
Sprockets::FileNotFound at /books couldn't find file 'typeahead.js'
I tried to include it in various orders in my assets file, without luck..
However I realized removing turbolinks from application.html.erb solved the problem.
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
This does not seem right... How can I resolve this?
I had this exact same problem. The author named the library with the .js extension added and I assume it has something to do with application.js ignoring the .js part at the end. I had this problem when using rails-assets and once I poked around more in the gem source I saw two .js.js extensions added.
You can add it as so:
//= require typeahead.js.js
Then you can re-enable
'data-turbolinks-track' => true
before I opened this post I read a lot of post on stackoverflow and I tried the solutions...
from:
Ruby on Rails: Why the confirmation message does not appear in "link_to('delete', ...)"?
and
Ruby on Rails: Why the confirmation message does not appear in "link_to('delete', ...)"?
I'm really confused because following the tutorial on the book
https://www.railstutorial.org/book/toy_app
but I have the other version where the toy_app is called demo_app
I don't know if it is a problem of compatibilty but almost every step I do I need to research to solve one configuration error... you know, change sqlite3-ruby for sqlite and so on...
Now I'm on the same problem of others, Destroy Function in Ruby On Rails does not work, I tryed various solution and I can´t make it.
My configuration is:
Windows 7 64 bits
Rails 3.2.19
Ruby 1.9.3
HTML destroy code is:
<td>Destroy</td>
and my application.html.erb is
<!DOCTYPE html>
<html>
<head>
<title>DemoApp</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= javascript_include_tag 'jquery_ujs' %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
application.js looks 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 vendor/assets/javascripts of plugins, if any, 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
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
= require jquery
= require jquery_ujs
//= require_tree .
And I checked Chrome and Internet Explorer and on both of them Javascript is enabled...
What more can I do??
Thanks
I have this specific issue. On a (LARGE) rails setup I have a backbone project in /app/assets/reader/. All of my javascript assets are precompiling dynamically into reader.js, this works fine. My i10n files in locale/ don't play nice however because they don't need any precompiling. In development it works fine, but in production they are not available.
In my /app/views/layouts/reader.html.erb file I have the following lines:
<%= javascript_include_tag "reader" %>
<%= javascript_include_tag "locale/en" %>
The problem is that the lower one results in a 404 error on production.
I've tried the following alternatives:
<%= javascript_include_tag "en" %>
<%= javascript_include_tag "locale/en" %>
<%= javascript_include_tag "reader/locale/en" %>
None of these seem work. The last one even broke on development.
PS: in applicaton.rb I have:
...
config.assets.precompile += [
...
'reader.js',
...
]
...
config.assets.paths << File.join(Rails.root, 'app', 'assets', 'reader', 'locale')
You removed all files in public directory folder then restarted server? Also inside of your js folder you have a folder
reader/locale/en.js
? Double check all paths and if it works in development you should check out your error log in production to see where the problem is coming from.
The solution was not in the javascript_include_tag, but rather in the way config.assets.precompile was formatted.
By default Rails scans for any subfolder DIRECTLY within assets. That meant that the locale file had to be added as locale/en.js to config.assets.precompile, and that the config.assets.paths line was not even necessary at all.
The way rails scans subfolder is really specific and important. Get that right, and it should all work like a breeze. Once you know how it works, it actually gets quite powerful.
Pro tip:
I ended up using locale/*.js in combination with <%= javascript_include_tag "locale/#{I18n.locale}" %>, as I actually have a lot of locale files.
Had the same issue, turns out there is a line in config/environments/production.rb:
config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present?
which didn't allow Rails to serve static files, including the precompiled assets. Changing it to
config.public_file_server.enabled = true
fixes the issue.
This is caused by the fact that Nginx and Apache handle static serving on their own. But Rails is configured to use Puma by default so this doesn't really make too much sense for it to default to these settings.
I'm unclear about where javascript files and stylesheets should be added to a Rails project. Perhaps they should be added to public/javascripts and public/stylesheets respectively. Then they're copied to app/assets? Or perhaps it's the other way around.
I've experimented with <%= stylesheet_link_tag :all %> and :default and just explicitly naming my stylesheets but I'm still confused.
Where should javascript files and stylesheets be added to a Rails project?
It is the other way around. You add stylesheets and javascripts to their respectable folders in assets.
You then use:
= stylesheet_link_tag "application"
= javascript_include_tag "application"
Check the guide for details http://guides.rubyonrails.org/asset_pipeline.html
In a Rails 3.1 application, where the asset pipeline is enabled, you want to place your script/stylesheet assets in app/assets. Rails will automagically find them via Sprockets and serve them up minimized and contaminated (in production).