Is it possible to call a ruby method inside index.html.erb that loads all my javascript files? I know you can do that directly using js but I am building a library and I want the client to be able to add the javascript files by simply calling my method.
I guess it will be something like
<%= library.get_javascripts %>
but I can't figure it out how the code would look like.
By default, any javascript/css file that you include in your app/assets folder will get loaded through your layout view, and as such, you will have access to those methods within any view in your app/views folder.
If you want to load something specifically, i.e. from the vendor folder you can just use a rails helper asset_path like so:
For a css file:
<link rel="stylesheet" href="<%= asset_path 'my_vendor_css_file.css' %>">
For a js file:
<script src="<%= asset_path 'my_vendor_js_file.js' %>"></script>
Add whichever to your index.html.erb file to load it there.
something like <%= library.get_javascripts %>
Ruby on Rails has javascript_tag and javascript_include_tag
Related
I have an interactive header for my site located in /views/layouts/_header.html.haml.
I want all the JavaScript for the header to be collected into a single file. Most importantly, I'm using Twitter Typeahead and Bloodhound for a search field with auto-suggest. A lot of this JavaScript has to be run after the header is rendered, so its inclusion in application.js (which is included on my page in application.html.haml) doesn't work, as this runs before the header is rendered.
I added search-bar.js under /assets/javascripts/ which contains all the JS I need to run on this page.
At the bottom of my _header.html.haml I just linked with a regular script tag.
%script{src:"/assets/movie-search-bar.js", type:'text/javascript'}
This works fine locally, but on my dev server I get a 404 for that asset. Is it possibly throwing out the static file for performance reasons? Even if it does work, by having it included in the asset pipeline, wouldn't the script be loaded twice (once as an individual script, and once in application.js)?
I'm getting the impression that this is not the best way to isolate the javascript of a partial into its own file. What is the best and most "railsy" way to ensure that the script is loaded once, after _header is rendered, and isolated within its own JavaScript file?
EDIT: Could this perhaps be as simple as moving the following lines to the bottom of my footer partial? Is this considered good practice in Rails?
#{ stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true }
#{ javascript_include_tag 'application', 'data-turbolinks-track' => true }
You can use javascript_include_tag on scripts other than application.js. First, make sure your script is in app/assets/javascripts folder: app/assets/javascripts/movie-search-bar.js.
Then use the javascript_include_tag helper in your view:
javascript_include_tag 'movie-search-bar'
And tell Rails to precompile that asset.
config.assets.precompile << "movie-search-bar.js"
Well I have done this task .If you want to include a particular javascript in your view .First create a folder in your views folder .For example page_js and then create some partial like _file.html.erb .And place your javascript into it .And then render that file wherever you want .So your javascript will work for that particular page only .If it doesn't work then tell me .
My problem is the following:
I want to use <%render => "xx"%> in a js.erb file - so I can't put it in my assets folder because render doesn't work in asset files.
I already tried to name it index.js.erb to get rails to include it automatically(it lies in the view folder, see below) but I guess that doesn't get included because I deleted the require_tree line in my admin.js(It's the "application.js" for my admin namespace). I can't use require tree simple because I don't want every js file in assets/javascripts/admin to be included.
I got my js file here:
views/admin/benefits/index.js.erb
I want to use it in the following view:
views/admin/benefits/index.html.erb
Am i overcomplicating something here? If not, how would I include it in my view?
If it matters: I use rails 4.
Move it to assets and add a optional yield to the head of your layout file.
In your layout file
<% if content_for?(:javascripts) %>
yield(:javascripts)
<% end %>
In your view
<% content_for :javascripts do %>
<%= javascript_include_tag 'benefits/index' %>
<% end %>
I think you are misunderstanding what the use of this file. js.erb files allow you to use Ruby in your JavaScript file. You can't actually render this file. You can look here to get a better understanding for why it is used.
js.erb files are used with respond_to block, allowing the controller to respond to your Ajax request.
def create
respond_to do |format|
...
format.js
...
end
end
You then have a corresponding app/views/users/create.js.erb view file that generates the actual JavaScript code that will be sent and executed on the client side.
$("<%= escape_javascript(render #user) %>").appendTo("#users");
More info here
In your case, you can define the javascript code in assets/javascript/admin/benefits.js, for example. Include only this file in application.js like:
//= require admin/benefits
I have a JavaScript file to use with a view. There needs to be Ruby code in it, and I need to do render in Ruby, so I understand that I can't put the JavaScript file in the asset pipeline. I can put it in the same view folder as the .html.erb file.
How do I include the JavaScript file, or use that JavaScript file for that view file? I tried javascript_include_tag in my view (that uses the asset pipeline apparently), using script src="myfile.js" for the myfile.js.erb file (but it can't find myfile.js), and names my js.erb file (users.js.erb) the same as my .html.erb file (users.html.erb), but all to no avail.
javascript_include_tag won't work js.erb declared in the view folder itself. There are three different ways you can have the javascript.
1] Write the code in the view, i.e., in the html.erb itself.
2] Create js file in public/javascripts folder and include it using javascript_include_tag.
3] In case you want to make the request as Ajax:
Create the js.erb in the view folder itself with the same name as that of the action.
In the view where some form is created which will be calling this action, make the request using :remote => true.
In the called action, use code as follows:
def action
respond_to do |format|
format.js
end
end
you can do this by
render :partial => "myfile"
you have to keep your file in controller's view directory with name _myfile.js.erb
Now you can write your own code (js,ruby) here and probably can separate out js with javascript_include_tag to avail asset pipline
This file will be first rendered by erb engine and then as javascript.
We're using Rails 3.0 and I have a js.erb file which contains hard-coded paths for our logo images, but this means we can't easily add more logos to the application once it's deployed. Ideally, we would like to find the names of every image in a directory so users can just throw some images in the folder to add more logos.
I tried this code, http://pragprog.com/wikis/wiki/InstantGratification-2/version/21 which boils down to using ruby to send the list to an html.erb. However, since this is a js.erb and is located in our app/assets/javascripts folder, I don't know how to get ruby variables from a controller to the js.erb.
I also briefly tried importing System.IO in the js.erb to access some file APIs. Didn't work and I'm not very used to working with erb files.
You are right that the js.erb file won't have direct access to a controller's methods in the same way that a normal html.erb action view would have. You can embed the file listing logic in you js.erb directly because you can reference Ruby core library, e.g. this snippet will output the names of the files in the app/assets/images directory as a JavaScript array:
var files = [
<% Dir.entries("#{Rails.root}/app/assets/images").each do |file_name| %>
'<%= file_name %>',
<% end %>
];
Or you could implement a helper method in a helper class, e.g.
module ApplicationHelper
def image_files
Dir.entries("#{Rails.root}/app/assets/images")
end
end
and then you have to include it in your js.erb as follows:
<% environment.context_class.instance_eval { include ApplicationHelper } %>
var files = [
<% image_files.each do |file_name| %>
'<%= file_name %>',
<% end %>
];
In CSS files, you can get the proper name of an image asset (with the fingerprint) by using:
background-image: url(image-url("rails.png"))
but how do you do the same from a JavaScript file?
I see you are using the sass helper method.
In standard (non Sass) CSS you do something like this:
.class { background-image: url(<%= asset_path 'image.png' %>) }
The CSS file will need to have erb added to the extensions:
file_name.css.erb
For javascript the same rules apply:
file_name.js.erb
and in the file:
var image_path = '<%= asset_path 'image.png' %>'
The Rails asset pipeline guide is an excellent source of information about how to use these features.
In Rails 4, instead of using a js.erb view I recommend that you stick to the asset pipeline, and pass the URL to it with a variable instead using gon or some other technique discussed at: Ruby on Rails - Send JavaScript variable from controller to external Javascript asset file
With gon:
app/views/layouts/application.html.erb:
<head>
<meta charset="utf-8"/>
<%= include_gon %>
app/controllers/application_controller.rb:
before_filter { gon.path = asset_path 'image.png' }
app/assets/javascripts/file.js.coffee:
alert gon.path
This method is faster because file is precompiled only once at startup, gets served by the server instead of through Rails, and on the same HTTP request as the rest of the Js.