Dear all I have the following folders angular_components
Now for loading this files inside this folder I wrote
//= require_tree ./angular-components
The way files are loaded are
<script src="/assets/angular-components/mapAutoComplete/autoCompleteAddressApp.js?body=1"></script>
<script src="/assets/angular-components/mapAutoComplete/directive/controllers/googleAddressSuggestion.js?body=1"></script>
<script src="/assets/angular-components/mapAutoComplete/directive/googleAddressSuggestion.js?body=1"></script>
<script src="/assets/angular-components/mapAutoComplete/services/locationDataService.js?body=1"></script>
<script src="/assets/angular-components/stripePayment/lib/angularPayment.js?body=1"></script>
<script src="/assets/angular-components/stripePayment/services/stripeService.js?body=1"></script>
<script src="/assets/angular-components/stripePayment/stripePaymentApp.js?body=1"></script>
In the mapAutoComplete directory the file in the root folder autoCompleteAddressApp.js loaded before the other file however in the stripe payment the stripePaymentApp.js which is in the root folder loaded at the end. Why this is happening? How can I make sure in both cases the root file loaded before the child directory file?
The reason for this is require_tree loads the files or folders alphabetically whether it is a file or folder. One a way of solving your problem is individually loading the file without using require_tree. Another way you can achieve your goal is by adding _ underscore before the file you want to load first. Because require_tree will load the file prefixed with underscore before the other files. So in your case your directory structure would like following
Related
I'm trying to get rid of the asset pipeline altogether.
As part of this move I need to get rid of the application.js file under app/assets/javascripts/application.js
I have erb files that I want to specifically require my vendor files there, for example:
Instead of this line in application.js:
// = require jquery-2.2.3.js
I want to add something like this to application.html.erb:
<script src="vendor/assets/javascripts/jquery-2.2.3.js" type="text/javascript"></script>
This produces a 404 Error. How can I still do that?
If that matters, I have config.serve_static_assets = true in my config/application.rb
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>
In my manifest file I have the following:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
and my inclusion is pretty standard:
<%= javascript_include_tag "application.js", "data-turbolinks-track" => true %>
But for some reason, this is the output:
<script src="
<script data-turbolinks-track="true" src="/landf/assets/application-f197c043b1bf438ab7beaa68751618f6.js"></script>
Anyone have an idea why it's doing this? As far as I can tell, I'm following the docs just fine. Thanks for any help!
Update
It looks like if I put that tag in the <head> there isn't an issue, but placing it right before </body> causes the issue.
hi you can place your javascript tag at the end of the file below body tag, it wil load faster. Check if placing it below doesn't cause the issue
Ended up being a method I was running a different asset through that was causing the initial script src to be corrupted, causing the collision of multiple script tags.
I have multiple files in my app/assets/javscripts folder, application.js.erb, page.js.erb, sections.js.erb & scraped.js.erb.
Rails loads them all in my layout with <%= javascript_include_tag "application" %> in application.html.erb layout. Which is called from the PagesController.
I do not want scraped.js.erb to be loaded at all & sections.js.erb I would like to only be loaded from the SectionsController.
From my understanding (after reading http://guides.rubyonrails.org/asset_pipeline.html) that's how the asset pipeline worked. That if called from the PagesController it would load application.js.erb & page.js.erb but obviously that's not the case.
Am I doing something wrong? Could someone explain to me how the asset pipeline works? And how I can only use select assets rather than all of them?
Check your manifest file, in assets/javascript you got the file application.js, it contains
//= require_tree . which include during compilation all files of the directory tree.
If you want to exclude some files you can either require your files one by one: // require my_file, either create sub directories in your javascript directory and use
//= require_directory my_directory
Read more http://guides.rubyonrails.org/asset_pipeline.html
I have some static JS files I would like to include in a rails controller view, unfortunately simply placing them in the appropriate view folder gets me a 404 response. Is there a way to do this?
If you want to javascript inside your view file
<script type="text/javascript">
//code goes here
</script>
OR
If you want to load JS file then need to place them in app/assets/javascripts directory.
if you have a file your-js-file.js then place it under app/assets/javascripts directory
and add the below line in your application.js
//= require your-js-file
It will be loaded automatically by Rails