I omitted the line <%= javascript_include_tag "application" %> from application.html.erb, so at this time, no javascript whatsoever, but what if i want to have jQuery included after that? And have to do it in the View.
download the jquery file from
http://code.jquery.com/jquery-1.7.2.js
add it to the folder your_app/app/assets/javascripts/
then add the following line to your application.html.erb
You have jquery enabled for the app.
If it's for only one page, then add it to the respective view, in the tag
Related
I'm currently trying Rails 6.0.0.rc1 which seems to have moved the default javascript folder from app/assets/javascript to app/javascript. The application.js file is now located in app/javascript/packs. Now, I want to add a couple of js files, but for some reason they don't get imported and I can't find any documentation on how this can be done in Rails 6. I tried a couple of things:
Create a new folder custom_js under app/javascript/packs, putting all my js files there and then add a require "custom_js" to application.js.
Copy all my js files under app/javascript/channels (which should be included by default, since application.js has require("channels")).
Adding require_tree . to application.js, which was the previous approach.
How can I load my own js files inside a Rails 6 application?
Get better-organized code and avoid multiple javascript_pack_tags in your application.html.erb file with this approach:
Add your custom example.js javascript file to app/javascript/packs.
Add require("packs/example") to your application.js file.
I would have liked to add a comment to Asim Hashmi's correct answer. But I don't have enough reputation, so I'll add my suggestion as an answer instead.
It isn't necessary to include the ".js" extension inside of the require.
You need to do the following steps to add custom javascript file to rails 6 (webpacker)
1.Create your custom file named custom.js in app/javascript/packs directory.
For testing purpose, write any console.log in it.
// app/javascript/packs/custom.js
console.log("custom js file loaded")
2. Go to your application.html.erb and add the following line at the end of your <head></head>
<%= javascript_pack_tag 'custom', 'data-turbolinks-track': 'reload' %>
3. Now execute rake assets:precompile
This will pack your javascript code (including our custom file we just added)
Now reload your page and you should see the message
custom js file loaded
In your browser console.
My custom js has functions which will be called by embedded javascript of serveral html pages. Following snippet works in Rails6, compiled by webpacker:
put custom js file in folder app/javascript/packs e.g. app/javascript/packs/my_functions.js
say_hello = function(a_text){
console.log("HELLO "+ a_text);
}
add javascript_pack_tag in html file, e.g. index.html.erb .
<%= javascript_pack_tag 'my_functions' %>
<!-- html here -->
<script>
$(document).ready(function(){
say_hello('ABer')
});
</script>
Note : This line is inside html body, not in head
<script src="/packs/js/my_functions-1db66368ebbd2fe31abd.js"></script>
I'm working on a older rails system which is using an older version of bootstrap. I want to start moving things to bootstrap 4 and would like to start with the header and footer. The header and footer are being rendered as partials in the application view file.
application.html.erb
<head>
<%= stylesheet_link_tag "application", media: "all" %>
</head>
<body>
<%= render 'layouts/header' %>
<%= yield %>
<%= render 'layouts/footer' %>
</body
Lets just say the stylesheet link tag needs to be inside the application.html file there is other things in the application.html file that need it.
Application.css
*= require bootstrap_and_overrides
*= require cosmo/loader
*= require cosmo/bootswatch
*= require cosmo/font-awesome
I can't remove any of the required files because it will effect the rest of my pages.
I want to use the bootstrap cdn for my header and footer
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
How can I achieve using only the bootstrap cdn for the header and footer and exclude the required css files for these two partials?
It is good that you're upgrading to the newer version of bootstrap but I would recommend you to not try to use separate bootstrap for different partials.
There will be no straight and clean to do so I believe so you'll be wasting your time and effort.
It will increase the loading time of your view
Alone Bootstrap CSS may not work for many components you'll also need latest jQuery/Javascript to make it work.
I'll suggest you to create a new branch (hopefully you'll be using Git) and take your time to upgrade Bootstrap in that and merge whenever you feel you're ready.
<%= javascript_include_tag "application", params[:controller] %>
I added the above tag in my application.html.erb, but it seems my js files are not loaded according to controller. When i navigate to localhost:8000/sessions it does not load sessions.js
Rails now uses the asset pipeline. In app/assets/javascripts/application.js you can require all your of javascript files with "magic comments":
//= require_tree .
Your javascript can now be inside app/assets/javascripts/sessions.js or even app/assets/javascripts/sessions.js.coffee if you want to use coffeescript.
Note that this will require all Javascript files on every page, which is often a desired effect because the client can cache the javascript and thus only has to download it at the first request. For more information read the Rails Guide I linked to above.
You can load controller specific js files as follows
<%= javascript_include_tag "application", controller_name %>
So that, if you navigate to localhost:8000/sessions it will load sessions.js file. And it is not necessary to add //= require_tree . in application.js.
I am reading rails guides documentation for asset pipeline.
It states that coffeescript page specific generated files
are by default ready to user if there is a require_tree directive on the manifest.
This is not working with me I have to do include this
<%= javascript_include_tag params[:controller] %>
on the specific controller.
What am I missing ?
The asset pipeline will compress all of your JS into a single file, application.js. In order to call JS for a specific page, you will need to organize your JS by controller and action. There is a gem, RailsScript that does this automatically and it's compatible with Turbolinks which can give you a single page application feel.
RailsScript only takes a few minutes to learn, https://github.com/gemgento/rails_script.
A specific example using rails script:
# app/assets/javascripts/users.js.coffee
window.App ||= {}
class App.Users extends App.Base
show: ->
alert('The users#show action!')
I think you are misunderstanding the asset-pipeline in general. It doesn't load the javascript-files individually, but rather all the .js.coffee files will get compiled into one big js-file, which you have to include in your views/layout like this
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
If you want some js-code that is only available in one view, you definitely should not include that into the asset-pipeline.
Not sure if I've misunderstood your first paragraph, but I think what the line means is that if your application.js manifest contains a line like:
//= require_tree .
Then yes indeed, page specific javascript, or coffeescript will be loaded, not only for that specific page, for for all pages. If you want to constrain assets to certain pages like you've described, you will need a file located in app/assets/javascripts/ with the pluralized name of the controller, and .js.
I would personally create this as another manifest for that specific page, that way I can load multiple assets. Lets say you have a controller called UsersController, with various assets used by that controller's views. What you then need, in order for the line you wrote in your question to work, is a .js filed users.js or users.js.coffee in the app/assets/javascript directory.
Alternatively, to maintain the naming convention, I do something like this:
<%= javascript_include_tag "application-#{params[:controller]}"%>
and then of course name my file appropriate (application-users.js).
Also, when you do this, you'll want to stop your page-specific assets from loading for all controllers. Simply remove the //= require_tree . line and replace it with explicit //= require lines as needed.
Here's a way to do page-specific javascript in rails.
Install the jquery-readyselector.js plugin. (It's 18 lines)
a. Copy the contents of https://raw.github.com/Verba/jquery-readyselector/master/jquery.readyselector.js
b. Paste the contents to a new file at assets/javascripts/jquery_readyselector.js
c. Require jquery-readyselector
// assets/javascripts/application.js
//= require jquery_readyselector
//= require_tree .
Create CSS classes so we have a way to reference each page individually.
<%# views/layouts/application.html.erb %>
<body class="<%= controller_name %> <%= action_name %>">
Now we can scope our javascript to our page using CSS.
// assets/javascripts/posts.js
$(".posts.index").ready(function() {
});
I'm having a strange problem with css on rails. In app/views/search I have 2 files: index.html.erb and the other is result.html.erb. Their css are in public/css/results.css and public/css/index.css.
The problem is: One of them (index) loads its css, but the other no.
More informations:
I'm also using a jquery theme, that is in app/asset/stylesheets and my app/view/layout/application.css is correct, addind the jquery.
When i put the result.css on asset directory, it works. But it's not what i desire. I want this css only on the public folder
Have you tried placing a stylesheet_tag in your layout file (app/views/layouts/application.html.erb) with an absolute path?
<%= stylesheet_link_tag "/css/results.css" %>
Edit: Corrected the wrong method name.