How to get highcharts scripts on only some pages - javascript

I've got a rails app with a couple .js files that refuse to work together. I want to try making the highcharts.js and it's modules to be page specific. The problem is that since they're from a gem, I don't know how to locate them and put them in subfolders of app/assets/javascript. Has anyone solved any similar problems befores?

Why do you use gem for that? You can grab highcharts files directly from http://www.highcharts.com/

I was able to place the require statement in a folder and file specifically made for the controllers that would use the highcharts scripts. I added javascript_include tags to reference the script files.

Related

import external js file in meteor project

I have a meteor project where I want to include the conversational form framework.
There is a npm package, however it is not properly imported (probably due to some kind of bug). According to the github issue, this:
import cf from 'conversational-form'
does not work, because the export function exports cf.ConversationalForm, not cf (but cf is needed for existing declarations). The form is created and styled, but cannot be addressed in the js.
I was already able to use the framework in a normal html/js/css project, so now I wanted to just include the external script as a workaround.
However, downloading + importing in client/main.js did not work for me.
I've tried:
import '/imports/api/conversational-form.min.js
as well as:
$.getScript
in Meteor.startup.
Do I need to write specific exports in the external .js? I'm far from a professional, so I'm a little hesitant to dissect the external .js.
Any tips on how to simply mimic the html-script-inclusion? Or other ideas on how to get the framework running?
Sincerely, desperate.
Well Meteor allows you many ways to do that, the first ideas that come to my mind are:
Depending on your project structure you can create your own meteor package as a wrapper and internally load the library.
Hardcoding the script tag in you entry point.(Im not sure if this would work to be honest but you can try).
I ended up downloading the script, modifying it to set my options and including it via \imports.
VERY hacky solution, but well, it works...
Meteor allow you to load external library and scope them in all the client
via the /compatibility folder.
Just put the file in there, and it will be scoped automaticaly.

dynamic loading of JavaScript files in Karma

How can I include a set of JS files in my Karma Config that are dynamically loaded in my code?
I'm not sure how I can load those files dynamically. We are trying to avoid having to download them and maintain them separately.
Google hasn't helped much so some help would be great.
Create a js file that loads them and add this to the list of files in the karma conf somewhere near the top.
I think there are two ways to do this kind of thing:
Include the files in the files array, specifying a pattern and setting include to false.
Have a look to the RequireJS page on the Karma website for an
idea on how this works.
Use proxies. Have a look on the Karma configuration page.

Rails Include Third Party Javascript Library File

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

Defer loading JavaScript in Symfony 1.4

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.

Why does dumping all JavaScript files into one giant file change their behavior?

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.

Categories

Resources