understanding where and when rails code runs( js.erb) - ruby-on-rails

Please i need an explanation on how ruby codes in javascript files are been executed in rails.
i need to know why the code below would run
var path = '<%= "#{Rails.root}/public/time_table/time_table.json" %>';
and
<% file = File.new("#{Rails.root}/public/time_table/time_table.json",'r') %>
would not.
where and when do JavaScript files get executed in rails.
when the application sees a ruby code syntax in a filename.js.erb file, how those it treat it. Please i really need this explanation.


JavaScript is executed in the browser. js.erb files are templates for the code that will be sent and executed in the browser.
In your first example the ERB template will result in:
var path = '/path/to/root/public/time_table/time_table.json';
This JavaScript will be sent and run by the browser.
In your second example you won't insert any text into the output (you used <% instead of <%=). The code between <% and %> is Ruby. It opens the file for reading and assigns to file. It doesn't read the file or otherwise insert anything into the output.
In general, ERB is used to generate content that will be sent to the browser. html.erb is for HTML code. js.erb is for JavaScript code. The templates are expanded on the server and the resulting output is sent to the browser.
Added based on comments. To show the content of the file you need to read it. File.new just opens it and allows you to manipulate the file (read, write, truncate, etc.). I recommend you read the file with File.read and insert it into the template with:
<%= raw File.read("#{Rails.root}/public/time_table/time_table.json") %>
You may also consider moving the file to a partial, e.g. app/views/time_tables/_time_table.json.erb and rendering in the controller with:
render partial: 'time_tables/time_table.json.erb'

Related

How do I render an SVG inline in Rails?

I have an SVG file that's part of a template located at:
vendor/theme/assets/icons/icon-1.svg
How do I render that inline in my view? render partial: path fails and says it can't find a partial.

In your view insert the following:
<%= render inline: Rails.root.join('vendor/theme/assets/icons/icon-1.svg').read %>
If you're going to be doing this multiple times, you may want to refactor this into a helper.
Also, think about the following:
Are you okay with dumping third party code directly into your view?
Is the vendor SVG file updated automatically without review?
Are you sure the vendor SVG file will never contain malicious code?

linking to html file in /public

I have a file 'maps.html' located in /public. I am loading up an index page with contents as follows:
<%= link_to 'redirect_click_here', 'maps.html' %>.
Application.html.erb takes care of the other necessary html elements for the page.
The result of clicking that link is that I am sent to /map/maps.html.
This is slightly logical: the page hosting the link was in the 'map' controller. Still, I want to 'escape' the controller and access the public html file.
I realize that this is a kind of pointless request because I could just put the html file in app/views, but it's just for completion's sake that I put forth this request.
edit
One reason I want to include this file from the /public/ directory is that I don't want it to go through the asset pipeline and inherit the html document structure from application.html.erb. I am going to be including HTML files which include custom heads and I don't want to have to replace the contents of application.html.erb every time.

You should use '/maps.html' in your link, so that it knows it is in the root public folder.

You can access it by
<%= link_to "Maps", "/your_project/maps.html" %>

How to add html-file with JavaScript code in template Slim?

There are HTML-file that contains JavaScript code. This JavaScript code loads an image and positioning it in a certain place. If failed, a message displays.
I need to include this file in template Slim.
I can include one Slim template to another by the following:
=render 'some/path/some_pattern'
How to include HTML- file to my template Slim?

The best way to add some javascript to your slim file is either by including the javascript file using
= javascript_include_tag 'name of the file'
or by directly adding the javascript code to your slim file, using
javascript:
code line 1
code line 2
...

Avoid *.js.erb files by building all the asset_path values

So I want to avoid processing JavaScript files with ERB just so I can get a proper asset path to, say, an image.
Currently, this seems like the popular approach:
var myImage = "<%= asset_path('my_image') %>";
Which, of course, requires the filename be changed to "*.erb" so that it'll be processed.
I'd much rather isolate the ERB ugliness to one point in my project making a single manifest file (say, "assets.js.erb") that computes and makes available all the asset paths my JavaScript needs.
I can certainly do it WETly by tackling it case-by-case:
ASSETS =
"my_image": "<%= asset_path('my_image') %>"
window.assetPath = (path) -> ASSETS[path]
But, I'd really rather just write some ERB to recurse through all of my asset_paths.asset_environment.paths and build a big object literal manifest for me, so that my real application JavaScript can confidently call:
var myImage = assetPath('my_image');
Any ideas on (1) if there's an easier way to do this that I missed, or (2) how I'd accomplish a search of all the potential valid arguments to asset_path?.

An easier way :
Get the assets prefix in your .js.erb : <%= Rails.configuration.assets.prefix %>. If an absolute path is needed, you can also get the application URL (it's more complicated to get it from rails, so you can just hardcode it in your .js.erb ?)
If you are working with precompiled assets, get the fingerprint of your file which is stored in manifest.yml (at <%= Rails.configuration.assets.manifest %>). The manifest contains a list with all your assets and their respective fingerprints (documentation)
Make assetPath just prepending the application URL + prefix to your image name or fingerprint
An inconvenient is that you have to specify the full image name (included the extension).

Old question, but there is nice way to accomplish this. Just to explain the context of my solution: I need to display markers in a map, which have different possible icons based on the JS dynamic variables. Strangely, using the <%= asset_path('" + somefunction(raw_value) + "') %> was not working. Then, I've looked for the solution bellow.
Concretely, the solution I am using has only one js.erb file which stores the values of the images, and their fingerprinted names, which can be get by a function, image_path. After that, all my other JS files can be free of the asset_path and, consequently, of the .erb
Create a file images.js.erb in your_application/app/assets/javascripts with the following content:
<%
imgs = {}
Dir.chdir("#{Rails.root}/app/assets/images/") do
imgs = Dir["**"].inject({}) {|h,f| h.merge! f => image_path(f)}
end
%>
window.image_path = function(name) {
return <%= imgs.to_json %>[name];
};
Require this file in your application.js, which is normally in the same directory as above:
//= require ...
//= require ...
//= require images
//= require_tree .
Then, inside the JS that you've been using <%= asset_path('image.png') %>, you will use instead image_path('image.png');
Credits to this blog post for posting a Coffee script version from which I've based mine.

It depends on the context of where this image is used.
Use Case 1: The image is decorative and needs to be dynamically swapped.
Example: Spinner, while data is loading.
In this case, I refer to is in my sass and java script.
.spinner
background-image: url(image_path("spinner.png"))
Then I would operate with classes in java script and not images.
$.addClass('spinner')
Use Case 2: Image is part of an object.
There are many situations, when an image actually belongs to a object. In this case, I create a json file, which stores the data and the image reference like this. Then I use erb to unwrap the image reference - my_object.json.erb:
{
"icon" : "<%=image_path("icons/my_icon.png")%>",
"label":"My label",
"description":"My description"
}
Use case 2 requires more work on javascript side to load the json files, but it opens very powerful extensibility options.
Asset pipeline handles both cases famously.

How to render an xml file in rails

I am building a rails app to display test results for an application that is already written.
The application generates an xml file. I would like to have rails read the xml file, it's associated xsl file and render an html partial.
I'm able to get it to render it as a file using <% render :file => 'file_path_not_in_views/file.xml' %> and the contents of the text of the xml file is displayed, but none of the styling is applied.
Thank you.
a

Resources