Rails loads all JS files and not only controller specific ones - javascript

My application has many controllers and Rails creates a css and a js (coffee) file for each controller.
From what I understand Rails loads only the controller specific JS file (http://guides.rubyonrails.org/v3.2.8/asset_pipeline.html#how-to-use-the-asset-pipeline).
I have a feedback controller and in the view I load and external JS library with javascript_include_tag. In feedback.js I use this library. Works wonderful.
But now if I navigate to another controller I get a JS error saying that a function used in feedback.js is not found.
Why is Rails trying to load my feedback.js if im not in the feedback controller?

Rails asset pipeline does not load controller specific JS files for each controller. It loads all JS files required in application.js on every page. By convention it creates a JS file named for the resource when you create a new resource, to help you organize your JS code as it relates to each controller's views. But again, that JS code is loaded on every page that uses application.js, by default.
You can create controller specific JS files, but you have to define them in the precompile section of application.rb, and make sure they are not also included in application.js.
Example:
application.rb:
module YourApp
class Application < Rails::Application
# ...
config.assets.precompile += %w(feedback.js)
end
end
end
Then in your application.js you should remove the //= require feedback, which will keep feedback.js from loading by default. Finally, you have to manually include feedback.js in the views that need it with a javascript_include_tag, just like you are doing with your extra library.

Related

Only js file per page in laravel

In a Laravel setup using Laravel mix, the mix.js(['resources/js/app.js','resources/js/new-offer.js'], 'public/js') puts everything in one file, app.js.
What I am trying to achieve is to have multiple .js files each for one page. For example. I want to have index.js for my index.blade.php and new-offer.js for my new-offer.blade.php etc ...
The idea is that each page is server side rendered and each page represents a static page comming fromm the server and each one should has it's own set of js files that works in. How this should be done, is it recommended, what are other arhcitectures ?
You can use multiple concatenated .js(...) statements. In your case:
mix.js('resources/js/app.js','public/js').js('resources/js/new-offer.js' ,'public/js')
This will createapp.js and new-offer.js files in your public js folder

How to add a start bootstrap template to an asp.net mvc web application?

I would like to add the Agency Template from start bootstrap to my mvc web application. How do I copy these files and implement them?
https://startbootstrap.com/template-overviews/agency/
To do this first you need to copy all the resource file into your project than open the index.html page and sort out the common layout like headder part, nevigation menu part, footer part and so on this code will be places in _Layout.cshtml and the middle part of the index.html page will place in Home/index.cshtml and the rest of the page will process through under several controller.
Hope this will help.
This link may also help
ASP .Net MVC Web Application integrating bootstrap templates
Steps for project creation:
Create new empty MVC project.
Add one controller in the Controllers folder and create one "ActionResult" as Index.
Right click on Index " ActionResult ", create a view and page Index content of Agency bootstrap template.
Add one folder on solution named as Content and put all required resources file such as css, js, image etc.
Change file directory path in index page and “Routeconfig” file. Save all files and run the project.
Sample file structure:

Grails plugin unable to load resources that is located within itself

I have a main Grails 2.3.2 project MainGrailsApp and I have a custom grails plug-in, MyGrailsPlugin, which is basically a module of the main project.
The plug-in has its own .gsps and its own .js files, while also referencing .css files, .gsp templates and image from the parent Grails project.
Let's say there is this PageController inside the plug-in that renders the view (which is also inside the plugin) MyGrailsPlugin/grails-app/views/page/index.gsp. Inside that index.gsp, it calls for global.css as stylesheet and _main.gsp as its template, which are both found on MainGrailsApp, while on the other hand uses a web-app/js/page.js file that is located within the plug-in.
Now, when I run-app the main project and go to the link localhost:8080/maingrailsapp/page, it shows the whole page, rendered using the specified .gsp template, loaded fully all the .css files, except for the page.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/maingrailsapp/page.js
Inside index.gsp I refer that resource using this line:
<script type="text/javascript" src="${resource(dir:'js',file:'page.js')}" />
Why can't it load its own .js file? Why can it fetch the resources that is from its parent application but unable to call its own resource? Should it, above anything else, able to locates the page.js file, after all that is its personal resource?
Grails resource tag has "plugin" attribute for specifying the name of the plugin where to look for the resource in. Check out grails docs for the resource tag.

How can I Add module as dependency Injection to a other throw code in AngularJS?

I need to make (Browse)button when click on it choose JS file from my computer (this file has module that I need to inject it ti Main module) I need to inject it to my Main Module.by code how can I do that?
You can do this before your angular application bootstrap.
So you need to write code that handles button click and fetches javascript file by adding script tag to your markup.
After that you need to manually bootstrap your angular application, using
angular.bootstrap('#root_element_id', ['RootModuleName']);
Of course, you cannot do button click handling using your angular application as it would not be bootstrapped yet.

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...

Categories

Resources