How to include js.erb file in view folder - javascript

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.

Related

How do I include custom javascript on/for a single page in Rails?

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 .

Difference between simple ajax and :remote => true In Ruby on Rails

Actually I have two, three questions but the heart of three question is same as written in Title . But I make my all points clear here in description
Following will be the specification of my question
Javascript file path => assets/javascript/
js.erb file path => views/customers/index.js.erb
view file name => views/customerS/html.erb
controller name => customers
action name => index
point # 1
If I make ajax call to my customers/index through my javascript file (with the mentioned path) then will it hit the index.js.erb file ?
point # 2
can we use js and js.erb file for the same action . what i mean is 'is it possible to send ajax from js file in assets folder and after controller action say index method handle the response in index.js.erb file in view folder ?'
point # 3
Say we can handle the response in index.js.erb file then how can / or if we can stop sending back the response / data in js file
if I have missed some more related points then kindly edit the question and place those , so that maximum people can enjoy the knowledge
Also have a look at This question and answer if you can
Update
I made a small experiment , by keeping the same function as mentioned in the
1: linked question , if ajax is sent through js file then js.erb doesn't do any thing but if i made the ajax call using the :remote => true , then it hits the js.erb file . Any explaination will be appreciated . For having a look at code sample in js, controller and js.erb kindly see the linked question
I think some language barrier is making it hard to completely understand your question by I'll try an answer.
The flow in Rails for :remote => true is this:
click on :remote => true link (foo) -> AJAX call is made to the controller requesting it to execute foo -> the controller executes the code contained in the foo action, it will then look for a file in the same view's folder called foo.js.erb and execute that JS -> that code will update the portion of the original HTML page using a file called foo.html.erb in the same view's folder.
Any call to a JS function contained in assets/javascript/ will just execute the JS called, whether it is AJAX or not.
So assets/javascript/ = a place to put JS code instead of putting it in <script> tags in the HTML file
:remote => true = an AJAX call to a specific controller action that then renders a similarly named .js.erb file and .html.erb file to update the page asynchronously.
Actually the flow of assets pipeline and js.erb files is much different . All the thing asked in the question is
what is difference if ajax is called from assets pipeline and if ajax is called through :remote => true . Now the answer is
,"There is almost no difference in the sense of functionality but there can be some minor (but in some case) very important differences depending upon our rendering methods and codes in js and js.erb files" e.g
If I make the ajax from the view i.e by using :remote=> true , then It'll simply goto controller action, perform whatever is defined , after that looks into js.erb file and finally the html.erb file . That's it . Here no assets js is looked for .
Now there is case when we make call from assets javascript , there are two cases for it .
First case is that i want to handle the response in the same js file from where the ajax is sending then no worries , control will come back to success function by default , so don't specify the respond_to method in the controller's action .
Second case is , when we want ajax to be fired from assets javascript , but want to handle the response in the js.erb file then specify the respond_to as below
respond_to do |format|
format.js #{ render 'index.js.erb' }
format.html
end
Now it will hit to js.erb file also . Point to remember is control of program will get back into assets success function also but at this scenario , response will contain the data present in the js.erb file instead the data of controller function
From the above explanation one should remember that assets js is
called before getting into rails controller while js.erb functionality
is performed after the rails controller has finished it's work .

Ruby on Rails - Include javascript files from view folder

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

Rails: js file in view folder isn't getting called

I have a js file called create.js.erb that is in my view folder. It's supposed to be called when I try to create a record, but it isn't being called. I can't figure out why, and to be totally honest, don't even know how my app calls a js file in the view folder, so I'm not sure what code to paste here to help debug the problem.
Can anyone explain to me how js in a view folder is executed, and when I would want to put a js file in my view folder instead of in the asset pipeline?
*.js.erb files are rendered when you are using AJAX/JS with your controller actions. By default, when you call the create method, Rails will respond using HTML. This will load a new page. Sometimes you want to use AJAX instead, and that's why you create js.erb files in the view folders.
For this to work, the form and/or link_to objects you are using must be AJAX enabled (they should have a :remote => true attribute on them) If they are not specified as remote forms, they will execute the HTML instead of the JS and the create.js.erb file will never be called.
Your controller method also needs to know how to respond to js requests. You need something like:
respond_to do |format|
format.js
end
That code tells Rails to look for a file called "method".js.erb in your view folder, so in this case, create.js.erb.
These files are completely different from regular JS files you put in the asset pipeline -- these are view templates to be rendered as the result of a controller action.
You might find some Rails/AJAX tutorials helpful...here's a pretty good one that walks you through this whole process:
http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3
Hope that helps, if you need more assistance please post the code for your controller and any of the view files...

How to get a list of file names contained in a directory programmatically by using a .js.erb file?

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 %>
];

Categories

Resources