I've got a Javascript library for AJAX file uploading that I need to include on only one page. Where is the best folder for this for file? app/assets/javascripts? vendor/assets/javascripts? lib/assets/javascripts? And then I need to be able to include it on only one page. Or should I just add it to application.js and have it included on every page (even know I'm only using it on one page?)
I figured for performance my best bet would be to put the minified JS file somewhere, and just include it with a javascript_include_tag on the page I need it, by using yield(:head) and content_for(:head)? Thank you.
Third party JavaScripts should go inside vendor/assets/javascripts directory, because app/assets/javscripts is for your application specific JavaScripts and lib/assets/javascripts is for your libraries code which is separate to your application or libraries that you have shared across different applications.
Please reference Asset Organization for further details.
As far as inclusion of javascripts in your application/page if you're using it only on a specific page then including the file with javascript_include_tag is the approach I would take as well.
In the folder vendor/assets/javascripts because is a folder for third party script
Related
Hi I am new to Rails and web development in general. I want to implement a template that I have gotten from http://html5up.net/. The template is Big Picture.
Html5up.net uses a skel.js framework (first time using. Only knew about it when I downloaded the template) and I do not know how to incorporate it to my rails application (such as placing the scripts and stylesheets provided into which folder).
I have tried doing it via the default rails way, which is placing the stylesheets my /app/assets/stylesheets folder and also the javascripts in the javascript folder. But it did not turn out correctly. I suspect skel.min.js has its own way of finding the stylesheets.
As such, my web application looks unstyled currently.
When lacking a gem for the assets pipeline, you can always include the source file inside app/assets/javascripts and the include it in the manifest.
Say you moved your skel.min.js into said folder. Now go to application.js and append the following line
//= require skel.min
and that's it. You must now call that file in the application layout file, using the javascript_include_tag helper.
I use some Facebook JS scripts for user authentification, etc. I want to place them in the properly unobtrusive way as application-wide scripts.
Currently I have the script as a partial and call it from my application header:
<%# render 'layouts/facebook_app_scripts' %>
The script works but is extremely obtrusive. I want to make it unobtrusive. This is especially important since I tap into all sorts of APIs and it's getting messy.
You don't need to see it in its entirety (if you need to see the script to answer this question, I don't think you'll be any help as this is a general question not script-specific)
You should know that it contains dynamically created links such as this one:
window.top.location = "<%= Facebook::SITE_URL.to_s %>/logout";
That means that putting this in a .js file in the assets/javascript folder isn't going to work, since .js files can't access rails-generated variables.
So how can I shift my javascript with dynamically-generated links from the rails view to an unobtrusive javascript file?
Take a look on this project to include all the Facebook JS SDK as a gem
I'm trying to optimize a Symfony 1.4 project and one thing that I would like to do is to defer JavaScript loading. I'm using the use_javascript() function to include files from inside templates.
Does use_javascript() have an options parameter (...or any documentation whatsoever?)
Alternatively, is there an alternative method for adding a tag to the collection for include_javascripts()?
Thanks for any help!
you use use_javascript('scriptname') to specify a javascript file to load - this doesn't add the JS file to the page it just allows symfony to build a list of files to include .. then to include the files you use include_javascripts() so to be "efficient" just place the include_javascripts() at the bottom of the page ...
As suggested here (jQuery example)-> http://www.symfony-project.org/jobeet/1_4/Doctrine/en/18
I am using append_to_slot('javascript') inside template. With require.js implemented
Once development is finished and I want to deploy code for end users, require.js optimizer can combine the JavaScript files together and minify it for me.
I end up with single .js file included to the page.
Is there a way to link multiple javascript files without making them one file?
What I would like is to have one file (javascript or otherwise) which houses links to my other javascript files.
For example, the webpage has one file called allmyscirpts.js, and inside this file is a list of links to my actual individual, separataed javascript files.
Is this possible?
Tod
JS can't simply import more JS, but you could easily write a simple server-side script that concatenates your files together. If you can't/won't work on the server, scriptloader libraries are very plentiful out there these days. Check out require.js, lab.js, yepnope.js, etc. and see if one of them suits you well.
The only way I can think of is to load Javascript files through ajax. The YUI Loader you to not only load all your js files (and those from YUI) within javascript, but it also allows you to configure dependencies between your js files. So For instance, if widget1.js requires global.js, you can configure that dependency, then you can tell the loader to load "widget1" and the loader will also load global.js when it loads widget.js.
Unlike css, I do not believe there is built in syntax in javascript that automatically includes another javascript file. But there are javascript utilities out there that allow this.
For a simpler solution than the YUI Loader, check out the YUI get utility. For my projects I have setup the YUI loader, and as a result my HTML pages only have about 2 or 3 javascript files included, and the rest of what I need is loaded on demand by the Javacript controller for that page.
I took a snapshot of the jquery.js file and jquery-ui files that I use and dumped them into a giant .js file with all of the other .js files that I use for my site.
When I do just this with no minfication/packing, the files stop working and I get "recursion too deep" errors on the file when I try to load it on my site instead of the usual .js files. All of the errors came from jquery and jquery-ui. Using a simple numbering scheme I made sure that the jquery.js/jquery-ui files were the first listed in the file and in the correct order (the same as includes as individual files.)
Two questions:
1) Doesn't the include tags for JavaScript have the same effect as dumping all of the files into one giant file? Is there extra isolation/insulation that JavaScript files get from being in their own script tags or in different files?
2) My goal is to make my site faster by having one huge .js file with all JavaScript I ever use in my site (which is heavy in JQuery) and minify that file. Why is this misguided? What is a better way to do it?
NOTE: Google's CDN version of the JQuery files don't work for me, all of the JQuery plugins/themes I use don't work with Google's versions (anyway who says that they can successfully use Google's CDN is lying.)
UPDATE: Thanks for the good advice in the answers, all of it helped me learn more about deploying JavaScript files on a production server. I am actually always using the latest SVN branch of the JQuery UI plugins and there were errors in the UI plugins that prevented them from being merged together with my files. I got the latest Theme Rolled plugins that are already minified in one file and that worked around the problem.
Probably your JavaScript files have some syntax errors. Browser can correct them when loading files one by one, but fail when "bad" files combined. You can try to compile your file using Rhino compiler (http://www.mozilla.org/rhino/)
java -cp build/js.jar org.mozilla.javascript.tools.jsc.Main giant.js
Also you can use JSLint validator (http://www.jslint.com/), thought likelly it will not be able to handle jQuery. But you still can combine all your files and validate them.
I'd recommend using a script manager such as this one to only register the files and plugins you need, and load them on the fly.
This keeps your requests to a minimum, and you don't have to load some huge 300k JS file one very page.
Another problem could be the load order changed. Most JavaScript files should be load order independent, but if you load jquery at the end after you have your:
$(document).ready(function() {});
you'll run into problems.