Simple comet application "org is not defined" - javascript

I am trying to update an old cometd javascript wrapper and test client (was 1.3.x) that I have to the newer comet 2.5.1 javascript implementation. I have all of the dependencies and the browser can find them all, yet I am getting errors in Firebug's console (see below)
The head of my HTML is as below:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>
All of these are found by the browser. Looking at Cometd.js I see the following:
org.cometd.Cometd = function(name)
{
....
}
So is that not defining org? Note that none of the errors in the Console are from Cometd.js. Otherwise I see no other definition of "org.cometd". I would really appreciate it if anyone can help me out. I am using Tomcat 7 and below is the dir structure:
Thanks.
UPDATE - Further testing
I reduced the header to:
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
</head>
And removed ALL JS from the index.html. The only JS now included is the Cometd.js from the comet.org. There is still the same error... coming from the very first line in that script:
org.cometd.Cometd = function(name)
Not sure what I have missed here.
EDIT - Add jquery.cometd-reload.js
This is the contents of the file. It looks like it is "re-binding" functionality from the cometd library to use the jquery one instead (?). I'm not up to speed enough in JS to debug this (I'm a C++ dev really).
(function($)
{
function bind(org_cometd, cookie, ReloadExtension, cometd)
{
// Remap cometd COOKIE functions to jquery cookie functions
// Avoid to set to undefined if the jquery cookie plugin is not present
if (cookie)
{
org_cometd.COOKIE.set = cookie;
org_cometd.COOKIE.get = cookie;
}
var result = new ReloadExtension();
cometd.registerExtension('reload', result);
return result;
}
if (typeof define === 'function' && define.amd)
{
define(['org/cometd', 'jquery.cookie', 'org/cometd/ReloadExtension', 'jquery.cometd'], bind);
}
else
{
bind(org.cometd, $.cookie, org.cometd.ReloadExtension, $.cometd);
}
})(jQuery);

So the problem was that I misunderstood the project layout from the Comet.org site. I should have followed the direction posted at cometd primer for non-maven setups a lot more closely. Basically when you are setting up the project you download the distribution, and then you need to take the code from the war files bundled inside the tarball.
SO, once you have extracted the tarball...
Take the org folder from cometd-javascript-common-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\jquery\target) or cometd-javascript-jquery-2.5.1.war (located in \cometd-2.5.1\cometd-javascript\common\target)
Take the jquery folder from cometd-javascript-jquery-2.5.1.war
The org namespace definition was in the file org/cometd.js which I did not have before, as I wrongly assumed that it had been replace by the org/cometd/Cometd.js file. The namespaces org and comet are defined as below starting on line 17 of that file:
// Namespaces for the cometd implementation
this.org = this.org || {};
org.cometd = {};
org.cometd.JSON = {};
The functions are working correctly now.

Try loading jQuery before any of the other JavaScript files -
<head>
<title>CometD Tester</title>
<link rel="stylesheet" type="text/css"href="style/style.css" />
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script> <!-- load first -->
<script type="text/javascript" src="org/cometd/Cometd.js"></script>
<script type="text/javascript" src="org/cometd/AckExtension.js"></script>
<script type="text/javascript" src="org/cometd/ReloadExtension.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd.js"></script>
<script type="text/javascript" src="jquery/jquery.cometd-reload.js"></script>
<script type="text/javascript" src="js/myCometd.js"></script>
</head>

Related

how to get cryptojs to work with out "rollup" files

I'm trying to upgrade the old version of cryptoJS that can be found here to a newer version on github that can be found here because, there are some functions on the old version that is going to be deprecated. Unfortunately, the newer don't have rollup files, so im trying to get it to work using the core files but, I keep getting the error(s) that something is "undefined" like "cfg.hasher is undefined".
<script type="text/javascript" src="crypto-js3.1.9-1/core.js"></script>
<script type="text/javascript" src="crypto-js3.1.9-1/evpkdf.js"></script>
<script type="text/javascript" src="crypto-js3.1.9-1/x64-core.js"></script>
<script type="text/javascript" src="crypto-js3.1.9-1/cipher-core.js"></script>
<script type="text/javascript" src="crypto-js3.1.9-1/aes.js"></script>
<script type="text/javascript" src="crypto-js3.1.9-1/pbkdf2.js"></script>
<script type="text/javascript" src="crypto-js3.1.9-1/hmac.js"></script>
<script type="text/javascript" src="crypto-js3.1.9-1/lib-typedarrays.js"></script>
<script type="text/javascript" src="crypto-js3.1.9-1/format-hex.js"></script>
I tried adding all the core files and even changing the orders of them, but I think I'm still missing something.
If I use the rollup files, this simple code below works just fine on it, but it fail on the newer version. Hopefully someone with more experience with cryptoJS can help me out.
<script type="text/javascript">
var string = "asdfasdfsadfdsa";
var key = "asdfasfasfs";
var encrypted = CryptoJS.AES.encrypt(string, key);
var decrypted = CryptoJS.AES.decrypt(encrypted, key);
alert(decrypted);
</script>
UPDATE!! I can get SHA256 to work just fine with out uses of require.js so I don't thing the problem is Modular include and the lib should be able to run "without RequireJS", but I'm still running into encryption and decryption error: "cfg.hasher is undefined".
<script type="text/javascript" src="CryptoJS/components/core.js"></script>
<script type="text/javascript" src="CryptoJS/components/sha256.js"></script>
<script type="text/javascript">
console.log(CryptoJS.SHA256("Message"));
</script>
You would have to do modular includes
Modular include using require js:
require.config({
packages: [
{
name: 'crypto-js',
location: 'path-to/bower_components/crypto-js',
main: 'index'
}
]
});
require(["crypto-js/aes", "crypto-js/sha256"], function (AES, SHA256) {
console.log(SHA256("Message"));
});
Here is a full gist

factoring out client side code in socket.io

So, I know node.js, but I'm learning how to socket.io and express.js, (just started express/socket a few hours ago).
This isn't a huge issue, but I like my code to be clean, and I'm trying to factor out my client side code so it's just in a script tag as a src. For example, on my index.html page I have the following:
..
<head>
<title>Example Title</title>
<link href="./styles/index.css" rel="stylesheet" type="text/css" />
<script src="./scripts/index.js" type="text/javascript"></script>
<script src="/socket.io/socket.io.js" type="text/javascript"></script>
</head>
Where ./scripts/index.js is the javascript code for index.html. It looks like
var socket = io.connect("http://localhost:8000");
document.getElementById("sendBox").submit = function() {
var msg = document.getElementById("m");socket.emit("chat message", msg.value);
msg.value = "";
return false;
};
All the routing is working, but now the problem is that I'm getting the error "ReferenceError: io is not defined" when I try to use the code. On socket.io's website, their example always just has a script tag with all of their page specific code embedded within it. I think that's ugly and means I have to edit an html page to edit my js for a page. This is especially annoying when the highlighting and autocorrects in my editor align to html on an html file, not js. It's not a catastrophic thing, I COULD embed my code like socket.io shows in their examples, but I'd prefer not to.
for those confused by what i mean, Socket.io's beginner example code:
<head>
<title>Socket.IO Chat</title>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script> // This is the code i want to look more like ^
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
</script> // End of the code I'd like to factor out.
To sum up, how can i make the variable "io" available to my index.js script?
Thanks
try swapping the js script tags
<head>
<title>Example Title</title>
<link href="./styles/index.css" rel="stylesheet" type="text/css" />
<script src="/socket.io/socket.io.js" type="text/javascript"></script>
<script src="./scripts/index.js" type="text/javascript"></script>
</head>
the way you had it, it would try to run io before it was loaded

How to switch between local & remote scripts?

Let's say I have a bunch of scripts on my server, which are used in my app.
So, my <head> contains a bunch of
<script src="http://myServer.com/myScript.js"></script>
If I am developing on localhost & don't have net access, I would like to reference those as a bunch of
<script src="http://localhost/myScript.js"></script> or, even,
<script src="myScript.js"></script>
I am very new to JS, is there a standard way to switch between two possible servers for the script file? Google is not my friend on this matter.
You could just dynamically load the script and add it to the document, based on whether you're accessing the page from localhost or not, as such:
<script>
var script = document.createElement("script");
if (/localhost/.test(document.location.hostname)) {
script.setAttribute("src", "./myScript.js");
} else {
script.setAttribute("src", "http://www.myServer.com/myScript.js");
}
document.body.appendChild(script);
</script>
In situations where I'd like to be able to continue development while offline on a webapp that has resources pulled from CDNs, I've used fallbacks.
For example, for jQuery:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
if(!window.jQuery) {
document.write('<script src="./js/jquery.min.js"><\/script>');
console.error('jQuery from CDN not available - reverting to local copy');
}
</script>
Or for BootstrapJS:
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
if(!(typeof $().modal == 'function')) {
document.write('<script src="./js/bootstrap.min.js"><\/script>');
console.error('Bootstrap JS from CDN not available - reverting to local copy');
}
</script>
Or for FontAwesome:
<link type="text/css" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
...
<span class="fa hide" id="faChecker"></span>
<script type="text/javascript">
if($('#faChecker').css('fontFamily') !== 'FontAwesome') {
$('<link type="text/css" rel="stylesheet" href="./css/font-awesome.min.css" \/>').appendTo('head');
console.error('FontAwesome CSS from CDN not available - reverting to local copy');
}
</script>
Similarly, you can make use of some variable that myScript.js would set and if it's not set, use the local fallback version.
This has the added benefit of helping prevent your site from malfunctioning if a CDN goes down.

Import javascript into html on play 2.0 framework

I'm having problems including local javascript files into my html that is on the play framework. The paths are correct and I even tried including the javascript file in the same directory. However, imports from the web (the main libraries i'm using) work just fine.
#(execId: String)
<html>
<head>
<title>Timeline</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type = "text/javascript" src = "../../public/javascripts/profilesJS/stack.js"> </script>
</head>
<body>
<input id="profiles" type="button" value="Profiles" />
<script type="text/javascript">
alert(tester());
</script>
</body>
</html>
the javascript file simply looks likes this
function tester(){
return "test";
}
And the error i get is:
tester is not defined
at the line with the alert
According to the assets documentation (and routing in general) you need to use the reverse routing in your template:
<script type="text/javascript" src='#routes.Assets.at("javascripts/profilesJS/stack.js")'></script>
it builds the correct src path to your /public/javascripts/profilesJS/stack.js file (by default routing config it will be /assets/javascripts/profilesJS/stack.js)

Uncaught ReferenceError when accessing an object from another JS file

I have various JS libraries in my web application, which are loaded before my main JS file (main.js). One of these libraries is jshashtable, but when I try to create a new Hashtable object in main.js, Google Chrome and Firefox throw a ReferenceError, complaining that the variable does not exist.
Here is the <head> of the application:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/static/jquery-1.4.4.min.js"></script>
<script type="text/javacsript" src="/static/jshashtable-2.1.js"></script>
<script type="text/javascript" src="/static/main.js"></script>
Here is the problem line in main.js:
posts = new Hashtable();
This line is inside a function called init which is called when the page has finished loading (using the jquery $(document).ready() function).
Any reason why Hashtable is not global? Google maps and jquery objects work with no such problem. The source of jshashtable can be seen on Google code.
Updated answer: The problem is that you've got a typo in the script tag:
<script type="text/javacsript" src="/static/jshashtable-2.1.js"></script>
<!-- ^^---- here (the letters are transposed) -->
I couldn't understand why you would be running into a problem and decided to actually copy-and-paste your script tags and replicate the structure exactly on my machine. And things stopped working and my world tilted 3° counter-clockwise until I finally stared at them long enough to see it.
Provided that the jshashtable code really is at /static/jshashtable-2.1.js and your server is serving it up correctly (double-check on Chrome's resources tab in the dev tools), I can't see any reason for that. Your scripts are in the right order, and jshashtable's docs show using a global Hashtable (and the code link you gave clearly shows it creating one).
Edit: I've just replicated that same structure (same scripts, same order, using jQuery(document).ready(function() { ... });) on my own server, and am not having that problem. I can create a Hashtable and use its functions.
My HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript' src='jquery-1.4.4.js'></script>
<script type='text/javascript' src='jshashtable-2.1.js'></script>
<script type='text/javascript' src='main.js'></script>
</head>
<body>
</body>
</html>
My main.js:
jQuery(document).ready(function() {
try {
var ht = new Hashtable();
display("typeof ht = " + typeof ht);
display("ht.size() = " + ht.size());
}
catch (e) {
display("Exception: " + e);
}
function display(msg)
{
$("<p>").html(msg).appendTo(document.body);
}
});
Only difference is I'm not using a /static prefix, and I'm absolutely certain that makes no difference.

Categories