Rails Asset Pipeline is not loading my javascript file (why won't this code work

rails asset manifest
rails asset pipeline external javascript
the asset is not present in the asset pipeline.
rails add javascript to asset pipeline
rails assets javascript
rails disable asset pipeline
rails public folder
rails application js is not present in the asset pipeline

This code works if I include it in the view itself and it works if I include it directly into the Application.js file, but it will not work if I include it in the assets/javascripts/mailers.js file... can anyone tell me what i am doing wrong, thanks.

function myFunction(val) {
if (val.length == 10) {
document.getElementById('search_button').focus();}};

Maybe I am calling it incorrectly? Here's the code in the view:

<%= text_field_tag :search_mailer, nil, autofocus: true, onkeyup: "myFunction(this.value)" %>

is there anything else i have to add into the mailers.js file I included above? Because that is all that is in that file. The only code in mailers.js file is:

function myFunction(val) {
if (val.length == 10) {
document.getElementById('search_button').focus();}};

You have probably missed including the file in your manifest file. The manifest file precompiles all the .js files in the assets/javascripts directory into one large file. This is the file that is running on your application. If you do not your .js file there, it is not included and that's why nothing happens.

The right way to include your files is:

//= require mailers.js

in your application.js file. What's more, by default you have

//= require_tree .

which requires all js files from assets/javascript path.

if you want to include it specifically for the view, drop tihs in:

<%= javascript_include_tag "mailers", "data-turbolinks-track" => true  %>

For this, if precompilation is false, you have to add the file separately: In config/initializers/assets.rb

 Rails.application.config.assets.precompile += %w( mailers.js )

or In config/application.rb

config.assets.precompile += %w( mailers.js )

The issue might be also that the application precompiles the wrong file if you have a .js and .coffeescript file with the same name. You can try running

   rake assets:clean
   rake assets:precompile

And run the server again.

Page not loading the javascript and css files needed for it to work , Well, now that you mention it, my app was generated with rails-api, and it is possible that it has all the asset pipeline disabled or not loaded at  Another use case is loading files asynchronously, which you can do in JavaScript without reloading the whole page. You may have used some web apps that load more pictures and articles as you scroll down without having to refresh or change the page over and over again.

I had the same error on Rails 5. My javascript file was not being loaded when it is the same name of the coffee file.

I solved it changing to a different name.

Hope it helps you or someone.

The Asset Pipeline, The asset pipeline is implemented by the sprockets-rails gem, and is enabled by default. Sprockets concatenates all JavaScript files into one master .js file and all CSS Fingerprinting fixes these problems by avoiding query strings, and by lib/assets is for your own libraries' code that doesn't really fit into the scope of  If you are not going to copy the external file to the Rails asset pipeline, you would load the Google Maps API before your application.js script with a <%= javascript_include_tag %> helper tag. Then you could write JavaScript code that uses methods from the Google Maps API.

Have you tried including your mailers.js file in the application.js manifest like this?

//= require mailers

Slicing up Rails Application.js for Faster Load Times, The application.js file had a 213KB transfer size, which represents the It's not just the transfer time which is problematic. found for introducing page-specific JavaScript with the Rails asset pipeline is to use subdirectories. Rails defaults to using the asset pipeline, so custom js files need to go into the app/assets/javascript directory. Than you wouldn't even need to load the file in your view. but as to your question. To serve the files from the public directory, you will need to enable a config setting. config.serve_static_assets = true

Check your layout file. If the javascript_include_tag is in the head section of the page, try to remove it from there and then put it just before the closing </body> tag. Another work around it is to put your code between a document.ready function like so:

$(document).ready(function (){
  function myFunction(val) {
    if (val.length == 10) {
      document.getElementById('search_button').focus()
    };
  };
}

Adding Custom JavaScript in Rails 6 - DEV, In Rails 6, JavaScript assets are no longer included with the app/assets/ directory and instead have. That's great, but when I wanted to add some custom javascript of my app/javascript/packs/application.js // This file is automatically app/javascript/custom/ directory, you can get it to load with require() :. The asset pipeline can be thought of as the tools and mechanisms by which Javascript files, stylesheets, and images are processed and prepared for use by the browser. These processes can minify and compress assets, as well as pre-process assets that are written in other languages such as Coffeescript or Sass.

I solved this by changing the js file to this:

$(document).on('turbolinks:load', function() {
  function myFunction(val) {
    if (val.length == 10) {
      document.getElementById('search_button').focus();
    }
});

How to Add JavaScript to Your Rails 6 App, Full-Stack developer with experience in Ruby on Rails on the I wanted to learn how to program my backend server to serve my web Prior to Rails 6, we had the asset pipeline to manage CSS and JavaScript files. But you may not always want your JavaScript code to be loaded on every page. Instead  The Asset PipelineThis guide covers the asset pipeline.After reading this guide, you will know: What the asset pipeline is and what it does. How to properly organize your application assets. The benefits of the asset pipeline. How to add a pre-processor to the pipeline. How to package assets with a gem.

Rails asset pipeline: Why things break in production and what , When using the asset pipeline your assets (images, javascripts, stylesheets, E.g. you can have ERB tags in your Javascript. Rails runs assets:precompile which precompiles all assets into static files that live won't work any longer, because there is no public/assets/images . foo.png How can I fix my font definitions? This is not (to my knowledge) an approach that would be easily handled in the Rails asset pipeline. 7. You'll have a better way to manage dependencies I've always found Rails "asset gems" to be a significant pain. In most cases, you can replace your asset gems with Node Package Manager, or NPM, dependencies.

The Asset Pipeline, Rails' solution to these problems is to flatten everything out and mash all your asset Your javascript manifest file will be app/assets/javascripts/application.js . The same principle applies to javascript, though I won't cover it here because that's If you just write something like this is the <strong>BODY</strong> of my post  Starting with Rails 6, Webpacker is the default JavaScript compiler. It means that all the JavaScript code will be handled by Webpacker instead of the old assets pipeline aka Sprockets. Webpacker is different from asset pipeline in terms of philosophy as well as implementation. In this blog post, we will learn about how Webpacker goes about handling JavaScript. What is Webpacker webpacker is a

Javascript not loading properly on Ruby on Rails 4 production mode , I'm working on a Ruby on Rails 4.2.5 application, and I'm using gem Capistrano, I get problems: whenever I click the text_field, the datepicker doesn't pop up. file to return to development mode, all my javascript files load correctly. Do not fallback to assets pipeline if a precompiled asset is missed. Things won't work in "production" unless RAILS_SERVE_STATIC_FILES is returning true. Let's set an environment variable for RAILS_SERVE_STATIC_FILES to true . Update your config/application.yml file to the following.

Comments
  • Its probably just a typo, but the path should be: assets/javascripts/, not assets/jacascripts/
  • is the file mailers.js included in the application.js with the require-directive //= require mailers?
  • Alternatively is the mailers.js included via javascript_include_tag
  • Yes just typo. I have this is the application.js file //= require mailers.js and in the in application.html.erb I have "<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>"
  • is there anything else i have to add into the mailers.js file, besides what I included about. Because that is all that is in that file.
  • yes, I have //= require mailers.js in application.js I also have require tree . when I add <% javascript_include... I get an error, (I think because this is already in the application.html file) <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
  • It is not a stylesheet_link_tag, it is javascript_link_tag. Check if you have the application.js included in your <head> </head> tags. also, can I have look at the comment?
  • yes, sorry that was a typo, I do have <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> in the application.html.erb file
  • can you paste me the error you ge when you put <%= javascript_include_tag "mailers", "data-turbolinks-track" => true %> ?
  • Thanks for all the help
  • It did solve my issue using Rails 5.1.4. Many thanks.
  • yes its included, the error I get in the browser console is "Uncaught ReferenceError: myFunction is not defined"