I want to get startet with dojo.
Therefore I am useing their tutorials: http://dojotoolkit.org/documentation/tutorials/1.8/hello_dojo/
The simplest tutorial displays this page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
data-dojo-config="async: true"></script>
</body>
</html>
I now open the page (tried both localy and hosted version on their page).
And when I write
dojo.query("h1")
in my firebug console I get the message:
ReferenceError: dojo is not defined
Please help
This question is lacking a correct answer. The reason this is not working is because you enabled async mode. What this actually does is that the Dojo core will be loaded asynchronously.
The Dojo core is the part of Dojo that is loaded automatically when you load the dojo.js file. It sets a global variable called dojo which contains basic functionality like the dojo.query part.
Your problem is that you're actually not waiting for the core to load. Because the core is not loaded, dojo will be undefined, giving you that error.
You should only use async mode when using the AMD loader (require()), if you don't want to use it (legacy mode), you just put async to false. But this mode is actually deprecated and will be removed in Dojo 2.0.
The other solution is to use the AMD loader (asynchronous module loader), the proper syntax to this is:
require([ "dojo/query" ], function(query) {
query("h1");
});
In this example you might have the chance that the DOM is not loaded yet, so the best answer is to wait for the DOM to load as well, resulting in:
require([ "dojo/query", "dojo/domReady!" ], function(query) {
query("h1");
});
You're indicating that it's working when you use the protocol implied URL. However, this is not true. The only reason why it suddenly is working is because you left the async property away, which defaults to false.
Unlike Christofer said, the legacy mode is still available, but it's deprecated.
Agnes' answer will work because because it's using the AMD loader. However, combining legacy code and the new syntax doesn't look well. If you're choosing for AMD you should put everything in AMD and not only certain parts.
Having no previous experience of Dojo, I read through a bit of the documentation. Especially this part, talking about the "Modern Dojo".
It turns out, as of version 1.7, you can no longer just load dojo.js and expect to call dojo.something. With the "new Dojo", that is no longer possible. This is why you get dojo is not defined.
For more info, read through the updated documentation on how to get started, but here is a simple hello world:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<link rel="stylesheet" href="../../../resources/style/demo.css">
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load dojo and provide config via data attribute -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
<script>
require(["dojo/dom", "dojo/domReady!"], function(dom){
var greeting = dom.byId("greeting");
greeting.innerHTML += " from Dojo!";
});
</script>
</body>
</html>
If you like to use the old way, I guess you could reference a version of Dojo prior to 1.7, but using a legacy version is rarely a good way forward, so I recommend that you learn the new way of doing things instead.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo- config="async: true"></script>
</head>
<body>
<script>
require(["dojo"], function(dojo){
dojo.ready(function(){
//Your code here
});
});
</script>
</body>
</html>
are your sure your source for dojo is in "//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" because your folder structure look like in googleapis folder which is "http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
Related
I'm using Kotlin to write a JavaScript application, but I immediately ran into the problem of how JS executes. i.e. I tried to call document.getElementById() before the whole page loaded, resulting in errors as Kotlin could not cast a DOM object that doesn't exist yet.
The way around this I found was to use the window.onLoad() function, but this didn't feel right to me- Sticking all of the program's logic inside onLoad() seems like a hack.
Is there a better way of handling things like this via Kotlin? Or was I right to use onLoad() for running main? This is my first time using Kotlin to write JS so any extra advice and tips would be greatly appreciated!
Ensure that the code you are calling is contained in the body of your html above the scripts.
<html>
<head>
<meta charset="UTF-8">
<title>Console Output</title>
</head>
<body>
<div>
my html content up here!
</div>
<script language="JavaScript" type="application/javascript" src="target/js/lib/kotlin.js"></script>
<script language="JavaScript" type="application/javascript" src="target/js/my-program.js"></script>
</body>
</html>
I have a Chrome extension that currently uses Material Design Components, Web. I have no issues using unminified CSS, however the JS does not appear to be working correctly.
If I use the source code, there should be an animation when focusing on a text field as the example shows, but I do not experience this in my extension.
I'm really hoping this isn't some sort of security limitation by Chrome... wouldn't make sense that their browser couldn't detect and support their own framework.
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chrome Ext</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<body>
<div class="mdc-text-field">
<input type="text" id="my-text-field" class="mdc-text-field__input">
<label class="mdc-floating-label" for="my-text-field">Hint text</label>
<div class="mdc-line-ripple"></div>
</div>
</body>
</html>
The "Hint Text" should appear above the text, like the example above.
Note: I had no problem with Material Design Lite, but since that is no longer supported, I figured I'd rebuild using the modern framework.
MDC is a bit different than MDL in that the js dependent features require you to instantiate the MDC component. There are various ways to do that depending on how you are incorporating the MDC js into your project. In your html example above, you could probably add a script tag with a one-liner to instantiate the MDC textfield. Something like:
<script>
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>
You can also use mdc.autoInit() with data-mdc-auto-init markup to instantiate MDC components (see the Auto Init docs for details).
I'm trying to import jQuery, but for some reason, it's not letting me, and it's giving me the following error:
[10:16:02.965] ReferenceError: jQuery is not defined # http://127.0.0.1:8020/project/js/jquery-191.js:338
I don't have any javascript that occurs before I import jQuery, which seems to be the reason most people get the "reference error". Here's my code under the<head> tag:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home | Howard University Astronomy</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!--get javascript -->
<script src="js/jquery-191.js"></script>
Thanks for your help.
EDIT: can someone explain why I'm getting downvoted for a legitimate question that I'm providing all the documentation for, answering all the questions presented to, and that hasn't been answered by a previous question?
I see that you have said you dont want to rely on an external server which is a good idea at its core but doesn't take advantage of the fact that most people have jquery cached in their browsers through the most popular CDN.
There is an extra trick you can do which is to use a fallback copy if the CDN fails:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js">\x3C/script>')</script>
http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx
(Note: I changed the MS hosted snippet Scott provided to Google because of this post)
As to your actual problem it seems like you might have got a dodgy copy of the jquery.js file as its not a standard naming pattern i've seen before so wondering if its been messed up somehow.
Try replacing your script link with this:
<script src="js/jquery-191.js" type="text/javascript" charset="utf-8"></script>
I scoured the site for hints that might answer this for me. This might be SoundCloud-specific, or this might be just a JS newbie question. I searched StackOverflow to the best of my ability trying to resolve this myself, but I'm pretty well stumped. I'm sure it's something obvious and easy to someone with more experience than me.
I'm trying to build a test webpage that uses SoundCloud's JS API for streaming tracks without using their player UI. I looked at their docs, found their example (here: http://connect.soundcloud.com/examples/streaming.html), and tried to make it work with a track and my Client ID, but to no avail.
Here's my basic HTML page, based on the example linked above:
<!DOCTYPE html>
<html>
<head>
<title>Some Page</title>
</head>
<body>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script>
SC.initialize({
client_id: "MY_CLIENT_ID"
});
$("#stream").live("click", function(){
SC.stream("/tracks/47101735", {autoPlay: true});
});
</script>
<input type="button" href="#" id="stream" value="Stream It Again, Sam" />
</body>
</html>
In my browser's error console, when I load this page, I get the error: ReferenceError: Can't find variable: $. Thinking back to all I know about JS and web programming (which is almost nothing), I figured the SoundCloud SDK wasn't getting loaded. I tried a number of things to get the path to the 'sdk.js' file to resolve, like adding an http:// absolute path to their hosted JS file or pointing it at a local copy of the SDK. Didn't seem to make a difference.
Anyone have a hint or a solution for me? Syntax for a better search to an existing answer I may not have found? Thanks very much.
The sdk.js file is getting downloaded succesfully..
$ represents jquery object there.. so , we need to include jquery.js as well..
<!DOCTYPE html>
<html>
<head>
<title>Some Page</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"> </script>
</head>
<body>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script>
SC.initialize({
client_id: "MY_CLIENT_ID"
});
$("#stream").live("click", function(){
SC.stream("/tracks/47101735", {autoPlay: true});
});
</script>
<input type="button" href="#" id="stream" value="Stream It Again, Sam" />
I'm going through some beginners tutorials on ExtJS and when I try to load a .html file with some HTML code it doesn't work
here's the test.html with the ExtJS code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>HTML Page setup Tutorial</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../ext-3.2.1/resources/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../ext-3.2.1/ext-all-debug.js"></script>
<!-- overrides to library -->
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript">
// Path to the blank image should point to a valid location on your server
Ext.BLANK_IMAGE_URL = '../ext-3.2.1/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.get('div1').load({
url : 'htmlFragment.html',
scripts : true
});
});
</script>
</head>
<body>
<div id='div1'></div>
</body>
</html>
and the htmlFragment.html is just as it says, a fragment of HTML code
<div>Hello there! This is an HTML fragment.</div>
both the file with the ExtJS code and the htmlFragment.html are in the same folder and I really see no reason for this not to work but it doesn't :(
all the other ExtJS examples I tried, DOM manipulation and other basic stuff worked just fine
I'm trying this on a Windows machine, and it doesn't work in any browser(FF, Opera, IE, Chrome)
Have you set your example in a Web Server?
Even though many examples work just directly open its local file on your browser (i.e. file:///C:/directory/example.html) many others require an actual web server to run properly (i.e.: http://localhost/path/example.html).
And I think local files won't work in this example as it has to performs an AJAX call to get the htmlFragment.html file.
Are you using any of the following (or any other) web server?
Apache HTTP Server
lighttpd
Apache Tomcat
Internet Information Server
Visual Studio Built-in Web Server
Do u have firebug enabled on your machine? If so, do you get any exceptions on the firebug console? It could be that the ext library path is incorrect. Also check firebug to see if your ext library files are being loaded.