Develop Reference

How does Rails Magic work with connecting the right js files to the right .html.erb

I have a .js file named:
app/assets/javascripts/generics/directory/edit_person.js
that isn't included in the application.js because there's not\ require_tree and looking at the network tab in the browser, I've confirmed the edit_person.js is being served by itself.
The erb being rendered is named:
app/views/company_area/directory/edit_person.html.erb
I don't see any script tags in here referencing edit_person.js, is there some magic that Rails is doing?

You'd have to show us the relevant code.
A Rails application typically will serve JS in one of three circumstances:
A JS file is specified in your html. This includes application.js in the layout file.
A JS request was made and you are responding to that JS. Example: the JS file edit_person.js exists in the views folder corresponding to the controller action edit_person and a client makes a .js request to that action
Webpacker is configured to handle JS alongside the asset pipeline. [1]
If none of these apply to you, then you will not see your JS loading on the page. Knowing that, you need to check your layout, application.js, and controller actions (responses).
[1] Webpacker would not likely be serving these files due to their location in your dirs, but it was worth noting for the sake of accuracy.

is this an app you wrote? If not I would check any of the layout files (particularly: views/layouts/application.html.erb or views/layouts/persons.html.erb if available )

Why do we have to require the JS files inside application.js in rails?

I am new to rails so pardon the question. Now, why do we have to require the JS files inside the application.js file or the css files inside the application.css file? As far as I have read that when we launch the server rails loads all the javascript and css files from the directory into one file, so if it already loads all the files from the directory why there is a need to write inside the application.js or application.css file?
For example:
//= require abc
//= require xyz
If I already have abc.js and xyz.js file, why should I require them inside application.js file?

You are misunderstanding the concept. Let me explain the process. As you know, when you launch the server, rails first precompiles the files inside the assets folder with the help of sprockets-rails gem, but it does so by following the directives specified inside the manifest files i.e application.js and application.css.
Now inside the application.js you have "//= require_tree .", this tells sprockets to load all the files inside the javascript directory, process them, compress and combine them to produce one master Javascript file, this helps to reduce the page load time of the website. Now,here is your question, since "//= require_tree ." directive already takes all the javascript files present inside the javascript directory, why there is a need to specify the javascript files inside application.js? The answer is "Order".
"//= require_tree ." it loads, compress and combine all the JS files in an unspecified order or random order. Now, if you are a web developer or have started now, you might know or will come to know that many times you have to load JS files in some specific order, otherwise there may arise some conflict when we implement them, they might not work as we want them to.
One such famous combo is jquery and bootstrap. In order to use bootstrap JS part it needs jQuery, so you have to initialise jquery first and then bootstrap. Precisely for this reason in rails you require the files inside application.js specifying the order in which you want the sprockets to load,compress and combine into one master JS file. As sprockets processess the directives from top to bottom in the order specified in the application.js file, it becomes important to require the files in application.js file. If you have 2 javascript or css files which in no way connflict with each other then, there is no need for you to require the files inside application.js or application.css file and they will still work fine.
For example:
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require_tree .
Above, the sprockets-rails gem will first load jquery.js file then jquery_ujs.js file and then bootstrap.min.js file in that order. There is no need to add the extension as it assumes that all the files will be of type javascript only.
The above whole explanation also applies for the precompilation of css files specified inside application.css.
For more information, I advise you to visit http://guides.rubyonrails.org/asset_pipeline.html and read about rails asset pipeline.

Handling urls of assets compiled by Rails's assets pipeline?

I'm using an external plugin in my rails project. I've placed the css for it inside vendor/assets/styles/pluginName, and the js in vendor/assets/scripts/pluginName. I've added vendor/assets to config.assets.path in application.rb, and I'm requireing the stylesheet and js file for the plugin in application.js and application.css
My question is, vendor/assets/styles/pluginName/styles.css refers to an image foo.png which is located at vendor/assets/styles/pluginName/foo.png. When the assets are pre-compiled, does foo.png remain at the same path, or do i need to do something so the paths don't break?
Reason for asking: Currently, everything works on localhost, but when i deploy and recompile the assets, the plugin's js seems to work, but the images are missing.

External JavaScript files not working in Rails

I have created a new Rails 4 project and I am trying to load an external JavaScript file in my HTML file. I have placed the JavaScript file in the /assets/javascripts directory and included the file in my HTML file.
My HTML file:
<html>
<body>
<script src="/assets/hello.js"></script>
</body>
</html>
My JavaScript file:
document.write("test");
I do not see any errors in my web browser console when loading the website. I am pretty sure I put the JavaScript file in to correct directory but the file will not run. Does Rails require something for external JavaScript files to work properly?
I have also tried defining a method in the JavaScript file and calling it within a <script> tag but I get a "Uncaught ReferenceError: methodname is not defined".

You probably need to list 'assets/hello.js' in application.js. The Rails asset pipeline compiles all JavaScript into application.js based on the filepaths that it finds listed there.
More info here: http://railsapps.github.io/rails-javascript-include-external.html

So I figured out why Rails wasn't loading my JavaScript file. When I created the Rails project, it included .coffee scripts which can be used instead of JavaScript. For some reason by default, the .coffee script was being run instead of the JavaScript file that I created. After deleting the .coffee script, my JavaScript loads as expected.

How to add a js file to a rails project

I'm trying to add a js file which is part of a purchased theme to my rails project.
In my assets.rb file I have
Rails.application.config.assets.precompile += %w(mvpready-core.js)
In my application.js I have
// This is a manifest file that'll be compiled into application.
//= require mvpready-core
//= require_tree .
At the end of my user.html.erb I have
<%= javascript_include_tag "application" %>
But when I load the page console gives me the error
ReferenceError: mvpready_core is not defined
What am I doing wrong and how can I debug this?

I dont think you need to tell anything to the assets.rb file.
The proper way of integrating a purchased theme is to put the required assets files in the vendor folder of your rails project directory. The vendor folder is specially for the third party plugins such as bootstrap. So what you need to do is as follows:
STEP 1:
Copy and paste the necessary JS and CSS files into the particular folders of the assets inside vendor folder.
STEP 2:
Require those files in to the project's manifest file i.e application.js and application.css files.
You can find manifest files here:
app -> assets -> javascripts -> application.js and app -> assets -> stylesheets -> application.css

Let me help you understand a little bit more. Ruby on Rails has some magick that goes on in the background where you do not need to add anything to
assets.rb
once you have setup your new project all you need to do is put the javascript file into:
/app/assets/javascripts/mvpread-core.js
When you start the rails server it will autoload anything you have in following directories:
/app/assets/javascripts/mvpread-core.js
/app/assets/images/mvpread-core.png
/app/assets/stylesheets/mvpread-core.css
Now if the javascript has path's in it linking to images, other javascripts, and other stylesheets you will need to search through the source code and make sure that it is looking for the file in this url path structure:
/assets{javascripts|images|stylesheets}
Also as #Taylor Galeser asked did you put the file in /app/assets/javascripts ?
This is all a very overly simplistic explanation on what Ruby on Rails does automatically for you but it should help you get what is going on behind the scenes better.