I have this page that has a JS error about the YUI JavaScript library not being recognized:
http://www.comehike.com/outdoors/hike_widget.php?hike_id=164
But that seems strange to me because if you view source, you will see the line declaring the use of YUI. Any idea why this might be happening and how I can fix it?
Thanks!!
You must include the javascript YUI too. Not only the css
You will need YUI 3 for your route.js try add this :
<!-- JS -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.3.0/build/yui/yui-min.js&3.3.0/build/json/json-min.js&3.3.0/build/oop/oop-min.js&3.3.0/build/dom/dom-base-min.js&3.3.0/build/dom/selector-native-min.js&3.3.0/build/dom/selector-css2-min.js&3.3.0/build/event-custom/event-custom-base-min.js&3.3.0/build/event-custom/event-custom-complex-min.js&3.3.0/build/event/event-min.js&3.3.0/build/pluginhost/pluginhost-min.js&3.3.0/build/dom/dom-style-min.js&3.3.0/build/dom/dom-style-ie-min.js&3.3.0/build/dom/dom-screen-min.js&3.3.0/build/node/node-min.js&3.3.0/build/event/event-base-ie-min.js&3.3.0/build/querystring/querystring-stringify-simple-min.js&3.3.0/build/queue-promote/queue-promote-min.js&3.3.0/build/datatype/datatype-xml-min.js&3.3.0/build/io/io-min.js"></script>
or just:
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
The only thing I see is this:
http://yui.yahooapis.com/combo?2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css&2.8.2r1/build/base/base-min.css
Which is a CSS file.
EDIT:
Which YUI Javascript files you include depends on what functionality you need. It is a pretty extensive API, and there are a couple of versions.
For documentation on the APIs, see: http://developer.yahoo.com/yui/.
As per answer by alexl, here are the core functions of the most recent version (3.3.0):
http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js
If you want to be able to read the JavasScript, see:
http://yui.yahooapis.com/3.3.0/build/yui/yui.js
The YUI file you are including right now (http://yui.yahooapis.com/combo?2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css&2.8.2r1/build/base/base-min.css) returns a CSS (stylesheet) only--it is for resetting CSS properties to be consistent across browsers. It is not the YUI JavaScript library which you are trying to use later in the code.
Download and add a reference to yahoo-dom-event.js via something like this:
<!-- YAHOO Global Object source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2/build/yahoo/yahoo-min.js"></script>
You may also need to include other YUI .js files too depending on what you're doing. YUI can be modularized. See http://developer.yahoo.com/yui/2/ for exact details if you need to do that.
Related
For a website with live "edit-in-place", first I get the jQuery library from the fastest CDN for free ...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
... and on top of that I need the Jeditable plugin, listed in the jQuery repository at jQuery on this page!
Is this plugin also hosted on Jquery CDN?
If not, whats the use of jQuery having a plugin in the repository without hosting the script?
In other words whats the use of a plugin repository?
How to load a script directly from jQuery repository?
<script src="................................../jeditable.js"></script>
http://www.appelsiini.net/projects/jeditable
http://www.appelsiini.net/projects/jeditable/default.html
https://github.com/tuupola/jquery_jeditable
I'm mostly using cdnjs for common js things.
A search for jeditable.js gives you the link and the script tag for easy copy-pastin'.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/1.7.3/jeditable.min.js"></script>
Plugins are most likely not hosted on jquery CDN, because they are most likely not written by the people behind jquery.
Discoverability? Don't know how their plugin listing works, but may have been from users submitting their plugins for example. Actually hosting the plugins would add another level of unnecessary complexity. Especially if the goal is discoverability, i.e. an easy place for jquery new-comers to see what else might be possible.
I don't know how "cloudflare one day hosts something and otherday it doesnt work without notice". At least not with cdnjs, which has always worked for me. But if you're worried, just download the script and host it yourself instead...
I am new to javascript and programming in general. I have been working on a web app that solves simple algebraic equations. I am using two libraries, algebra.js and katex.js. How do I use both libraries in my script? I would like to keep this as a client-side application.
I have looked at node.js but my understanding is that node is for server-side development. I have looked at RequireJS but that doesn't seem to handle directories well. Recently I found Enderjs which seems to use npm and allow for client-side development and still make use of require().
What should I use to make a web app like this? Please let me know if there is anymore information that is needed.
The most basic way to do this is to include multiple script tags at the top of your html file. So:
<head>
<script src="path/to/library1.js"></script>
<script src="path/to/library2.js"></script>
<script src="path/to/my/javascript.js"></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
This will load more than one onto the page. The order might matter - be wary of which dependencies your chosen libraries have. For example, some will depend on jQuery, so you should load jQuery first then those that depend on it. Order is top down.
In my example, if we pretend library2 depends on library1, then the example would work. However if library1 depended on library2, it would not.
The simplest way is to include the script tags directly in your html file like so (this assumes that you have the algebra.js file in the same folder as your html file):
<script src="algebra.js"></script>
If you are loading the library from the internet you have to use the full web path in the src attribute, for example loading the jQuery library from a cdn (content distribution network):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
I have an idea where I would like to load jQuery (via CDN) into a JavaScript file that when called on the page loads jQuery via the CDN and also loads the JavaScript file. so instead of doing:
<script>jquery</script>
<script>myscript></script>
I would just do:
<script>myscript</script>
and then jQuery would just load.... Because in the myscript.js I would be doing something like: call jQuery via CDN .... do js code here that uses jQuery ...
Although we can hope for a module solution in a near future, JavaScript currently doesn't allow for simple script dependency management.
You have a few solutions, the two main ones are :
you write in your code a script element
you use a library which manages dependencies like RequireJS
If you want to use RequireJS, then you'd better read the guide dedicated to importing jQuery.
Today, with the current state of the import management in browsers, I would generally recommend to be less ambitious and to simply import with a classical script element. But RequireJS is interesting and you might find it useful when your application grows.
Add this to your script:
document.write(unescape("%3Cscript src='/js/jquery-X.X.X.min.js' type='text/javascript'%3E%3C/script%3E"));
I'm wondering if I can use CoffeeScript to include other standard JS files (as a simple way to do some combining of files).
I have a client-side minification tool I'm using (an app called Live Reload) which is working just fine.
<!-- Some jQuery plugins I'm using. -->
<script src="/js/libs/some-plugin.js"></script>
<script src="/js/libs/another-plugin.js"></script>
<!-- The output of my /js/script.coffee file: -->
<script src="/js/script.js"></script>
What I'd like to do, is just combine those plugins into output of my coffeescript file. I've looked high and low and I've only seen articles on server methods for this as well as a lot of articles on things like requirejs.org. I'm not trying to do anything that complex- I just want to get rid of a couple round trips for js files I know I'm never going to touch.
Does CoffeeScript have an "include" function to speak of?
There are ways you can achieve this by creating a more complex Cakefile, in which you will read the contents of js-files and append them with CS compiler output than write it into the single target js file. You can even create a fake global require function which will mimic its behaviour in the bundled file.
If you were looking for a standard tool or at least an approach to that problem, unfortunately, since CS is very young, there's none yet. There are some attempts though: https://github.com/jashkenas/coffeescript/wiki/%5BIntegrations%5D-Build-Tools.
I'm currently working on such a tool myself and am planning to publish it within a month. I'll post back then.
Basically, the answer seems to be no. This is not something CoffeeScript is capable of.
I am learning jQuery and have a created several plug ins.
Unfortunately due to my company's coding practices they want all javascript code to be extract out to js files. This for me poses two challenges:
Can i extract the actual $(document).ready(..) call to a js file? So far with my limited knowledge I have not figured if this at all possible. If not, I welcome any suggestions to make this cleaner and more acceptable way to include this code.
There are too many javascript includes for each asp.net page header since I may be using several plugins. Is there a way to reduce the potential costly server trips that I would need to make each time I need these files?
Any suggestions, corrections are greatly appreciated
thanks
1. Absolutely.
Just add a script reference to your html like this:
<script type='text/javascript' src='js/yourfile.js'></script>
Then just start your .js file with
jQuery(function() {
foo;
...
bar;
});
or any other shortcut ways of starting the jQuery code block.
2. You should run your scripts through something like Minify before sending them off to the user. This will combine the files and pack them in nicely, so that they take up less space.
Using $(document).ready () in an external javascript file is fine - it will work exactly the same :) In fact - not only will it work, but it is good practice as it helps to seperate the content (HTML) from the behaviour (Javascript).
In response to your section question - you can combine all of your plugins into a single javascript file and link to that one inside the <head>. You could also try minifying the scripts, although this is normally a bit overkill until the site goes live.
When I use jQuery, I normally use this kind of structure:
<html>
<head>
<!-- html tags such as title, link, meta etc -->
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/plugin.js"></script>
<!-- more plugins included if required -->
</head>
<body>
<!-- html here -->
<!-- script is the last thing before the ending body tag (increases performance) -->
<script type="text/javascript" src="/path/to/your_jQuery_code.js"></script>
</body>
</html>
I think worrying about server trips for javascript includes is premature optimization. Do you have any evidence that these pages are loading slowly? The browser should be caching the javascript files.
If you do have evidence that this is a problem, you could
-combine the jquery code and any plugins into one file
-write an .net content handler to do this for you (probably overkill)
Then you can add a custom js file per page to handle page specific properties.
You can most definitely put your document.ready and all other JavaScript code in an external file.
Typically I have 2 calls - one for jQuery itself, and one minified global.js file that combines and minifies all of my individual files.
Personally, I like to use front end blender for this, but there are many other options available as well.
there's nothing wrong w/putting the document.ready call in an external file. in fact, it's what i do to separate my js from my html. if you're concerned about certain functions running on certain pages, you may sift through them with a
var path = window.location.pathname;
if (path == "/yourdir/yourpage.html") {
//do something for this page only
}
or you can just include certain files only on certain pages.