Cannot load custom dojo module - dojo

I'm trying to follow the custom module tutorial at http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/modules-and-namespaces/creating-your-own-modul
I've got a local deployment of dojo at http://localhost:8081/dojo-1.3.2/dojo/dojo.js
For my custom module I've created the following javascript file at http://localhost:8081/dojo-1.3.2/explosive/space/Modulator.js:
dojo.provide("explosive.space.Modulator");
dojo.declare("explosive.space.Modulator",null,{
bob:1
});
In my html page I have the following:
<script type="text/javascript" src="http://localhost:8081/dojo-1.3.2/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("explosive.space.Modulator");
</script>
And when I pull up my site in firefox I get the error:
Error: Could not load
'explosive.space.Modulator'; last
tried
'../explosive/space/Modulator.js'
Any ideas on what I'm doing wrong?
EDIT: After more testing it appears the code works on IE8 and IE8 compatibility mode but not in Firefox, Chrome, or Opera.
EDIT2: My html file was on a different domain but I didn't think that should make any difference. After reading Seth's comment (thanks Seth!) I tried it both ways.
I have two tomcat instances, one on port 8080 and one on port 8081. I've placed index.htm in both instances and started them both up.
http://localhost:8081/test/index.htm works in both FF and IE. http://localhost:8080/test/index.htm does not work as expected in FF, but does work in IE.
Show XmlHTTPRequests shows that FF is making a call to "GET http://localhost:8081/dojo-1.3.2/explosive/space/Modulator.js" which is coming back with an empty response for some reason.
Here's the entirety of my code for index.htm if it's any help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Create Map</title>
<script type="text/javascript" src="http://localhost:8081/dojo-1.3.2/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("explosive.space.Modulator");
function init(){
var eludiumFuel36 = new explosive.space.Modulator();
alert(eludiumFuel36.bob);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<h1>Hello World!</h1>
</body>
</html>

It looks ok from what you have here. When you bring up the page, are you going to http://localhost:8081/testpage.html (or somesuch)? Or are you going to a different domain?
Do you have firebug installed? If not, install it and turn on 'Show XMLHttpRequests'. That will show what URL it's trying to access in the console (and any other possibly relevant errors).
Otherwise, there might be something else on the page outside of what you posted messing with dojo's load path.
Edit
When dojo does an dojo.require, it does a XHR call for the file. The includes the host and port in it. So, it's violating cross domain security when the html page is on localhost:8081 but the javascript is on localhost:8080. You can get around this by using a cross-domain build version of the file (or make sure all requests come on the same port and host). Truth be told, I'm not quite sure why IE works with the different ports though.

Related

how to configure application root path in intellij for web browser preview

I am working on an Angular application, it is a single page application hosted on say src/main/webapp/index.html
with script references like
<script type="text/javascript" src="/vendors/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="/vendors/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/vendors/angularjs/1.4.9/angular.js"></script>
<script type="text/javascript" src="/vendors/angularjs/1.4.9/angular-animate.js"></script>
The script
<script type="text/javascript" src="/vendors/jquery/1.12.0/jquery.min.js"></script>
is physically located at src/main/webapp/vendors/jquery/1.12.0/jquery.min.js
When I open browser preview in browser preview in chrome it launches the url
http://localhost:63342/myApp/main/webapp/play.html
and then browser tries to load the script from
http://localhost:63342/vendors/jquery/1.12.0/jquery.min.js
which is basically sitting at
http://localhost:63342/myApp/main/webapp/vendors/jquery/1.12.0/jquery.min.js
I would like to know if there is a way set the application root path for intellij config.
Thanks in advance. :)
PS: What is usual way js/html/css devs use for quick code and test cycles?

Fixed header bootstrap

I'm using the following classes to fix a header: navbar navbar-default navbar-fixed-top
This works perfectly on my PC:
But when checking it on iPhone or iPad, the header is only partially shown:
I'm using Bootstrap v3.3.6. Has anybody had this problem and were you able to fix it?
Have you tried resizing the browser on the pc to see where it goes wrong. If the layout is different there then on mobile you might need to add a meta tag.
Try adding this into your header:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
I tried this using browserstack and it looks fine to me. Maybe it's a particular version of Safari Mobile browser not working or something cached on your phone?

Unable to save specific file via dropbox saver

I am trying to save Visual Studio Community Edition 2015 from this url (http://download.microsoft.com/download/D/4/5/D4510E81-0900-425F-85F3-A09AFFADFA45/vs2015.rc_com_enu.iso) to my dropbox, using this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Saver</title>
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="MY-APP-KEY"></script>
</head>
<body>
Click here to save.
</body>
</html>
running on a local server. But this always returns the warning sign.
I tried with another file on some different domain and it worked. Can somebody point me to what I may be doing wrong?
Thanks.
If you set up the Dropbox Saver using JavaScript, you can implement an error callback that will give you more information in cases of failures like this.
I just did that with your link, and when doing that (after a good bit of time) I also see it fail, with the error message:
Job timed out
So, unfortunately, it seems the hosting serving is serving too slowly and/or the file is too big, making the save job take longer than the Dropbox Saver will allow.

How to test the google +1 button local

I am just creating an html file to test out the google +1 button. I guess the problem my html is not deployed on a server. How can you test the google+1 button on your local machine. This code doesn't render anything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Google+1</title>
<!-- <link rel="stylesheet" href="css/main.css" type="text/css" /> -->
<script type=”text/javascript” src=”http://apis.google.com/js/plusone.js”></script>
</head>
<body >
<g:plusone></g:plusone>
</body>
</html>
I assume it can't be done because Google's API check the source of the request, otherwise many security holes would be exist.
Why won't you check it online? Just upload the site to it's domain and try to +1 from your account.
Another option for design purposes only: download an image of the +1 button and use it in the offline version.
You're probably just opening the HTML file locally. You can run the Google+ widgets on your local machine and will need to have internet access to load the external scripts. What you need to do is start up a web server and open the file from there. This is due to permissions for JavaScript required from the +1 code.
If you are on a Mac, you can do this either through the built-in Apache server (copy the file to /Library/WebServer/Documents and navigate to localhost/filename.html) or by spinning up a Python web server in the same folder as the file with the following command:
python -m SimpleHTTPServer 8000
After starting the Python web server, you can navigate to localhost port 8000.
If you are running on a Windows PC, you can find a number of web servers and install them, WAMP is a pretty simple option. Again, you would just install WAMP and then put your HTML file in the web/www folder that WAMP created and navigate there from localhost. You can also install Python and use the built-in web server as mentioned before.

html5 video embedding via M4V

So I created a video using ScreenFlow on a Mac. Then exported it. It created an m4v file. Then I changed the extension to mp4 and tried it out in the following web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>Fooo</title>
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
<body>
<video src="Demo.mp4" width="320" height="200" controls preload></video>
</body>
</html>
It does not play. If I move the pointer where the player is it will show the frame at where the pointer is. So all the frames are there but it will just not play the video. What did I do wrong? How do I fix it?
Following #heff's advice, I deleted the script line. Once it was deleted I get this error message: "Video format or MIME type is not supported."
How do I fix this?
.mp4 == .m4v Different extensions for the same container format. Though .mp4 technically is also equal to .m4a, but .m4v != .m4a. At least I'm pretty sure. :)
Sounds like an issue with your javascript library. Have you tried just using the video tag in a browser that supports HTML5 video, with no library? Just delete the script line and see what happens.
Otherwise try posting a link to the live page where we can check it out.
I don't know if you already solved this, but you should go see the information on this webpage: Video for Everyone!. Specifically, go see the first point of section 2.1 where the author explains that your server must use the correct mime-types, and section 3, where the author explains what codecs you should use (because not every web-browser can read .m4v files).