I am trying to load a page that has javascript, but I am getting the following error stack:
$ node bitcoinlend.js
path name: c:\Users\paul\projects2\meadowlark/public
Express started on http://localhost:3000; press ctrl-c to terminate.
trying home route
trying to route 500 error
ReferenceError: document is not defined
at Object.<anonymous> (c:\Users\paul\projects2\meadowlark\public\javascripts
\app.js:30:3)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.require.create.helpers.static (c:\Users\paul\projects2\meadowlark\
bitcoinlend.js:9:20)
at Object.eval (eval at <anonymous> (c:\Users\paul\projects2\node_modules\ex
press3-handlebars\node_modules\handlebars\dist\cjs\handlebars\compiler\javascrip
t-compiler.js:189:23), <anonymous>:12:128)
at c:\Users\paul\projects2\node_modules\express3-handlebars\node_modules\han
dlebars\dist\cjs\handlebars\runtime.js:86:31
The client-side code I am using is as follows:
var main = function(){
"use strict";
console.log("javascript being called");
$(".tabs a span").toArray().forEach(function(element){
var $e = $(element);
$e.on("click",
function(){
$(".tabs a span").removeClass("active");
$e.addClass("active");
$("main .content").empty();
if ($e.parent().is(":nth-child(2)")){
console.log("second tab clicked");
var $content = $("<ul>");
todoObjects.forEach(function(todo){
$content.append($("<li>").text(todo.description));
});
$("main .content").append($content);
$(".tabs a span").removeClass("active");
$e.addClass("active");
}
return false;
}
);
});
$(".tabs a:first-child span").trigger("click");
}
$(document).ready(main);
EDIT: my node.js script is here:
var express = require('express');
var app = express();
var handlebars = require('express3-handlebars').create(
{
defaultLayout:'main',
});
app.engine('handlebars',handlebars.engine);
app.set('view engine','handlebars');
app.set('port',process.env.PORT ||3000);
console.log("path name: "+__dirname+'/public');
app.use(express.static(__dirname+'/public'));
app.get("/",function(req,res){
console.log("trying home route");
res.render('home');
});
app.get("/img/example.jpg", function(req,res){
res.send('/img/example.jpg');
});
app.get("/profile",function(req,res){
res.render('profile');
});
app.get("/listings", function(req,res){
res.render('listings');
});
app.use(function(req,res, next){
console.log("trying to route to 404 error");
res.status(404);
res.render('404');
});
app.use(function(err,req,res,next){
console.log("trying to route 500 error");
//console.error(err.stack);
res.status(500);
res.render('500');
});
app.listen(app.get('port'),function(){
console.log( 'Express started on http://localhost:'+app.get('port')+'; press ctrl-c to
terminate.');
});
The structure of my project is as follows:
(can't do it because SO thinks its poorly formatted code)
The handlbears files relevant to this example are the layout file main.handlebars and the view home.handlebars:
main.handlebars:
<!doctype html>
<html>
<head>
<title>bitcoin lending site</title>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
<header>
<div class="container">
<div class = "tabs">
<a href=""><span class="active">Dashboard</span></a>
<a href=""><span>Profile</span></a>
<a href=""><span>Settings</span></a>
<a href=""><span>History</span></a>
<a href=""><span>Messages</span></a>
<a href=""><span>Archives</span></a>
<a href=""><span>Community</span></a>
</div>
<div class="content">
</div>
</div>
<img src ='/img/example.png' alt="example"></header>
{{{body}}}
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="/javascripts/app.js"></script>
</body>
</html>
home.handlebars:
<h1>welcome to your dashboard</h1>
I have seen a very similar problem in several other SO posts, but most of them have to do with using a specific environment or module. I am a beginner, and this is just a regular, html/javascript/jquery task. It was working with the previous program I wrote. The only diffference is that now I am using a layout, and I am using handlebars. The source is being referenced in the layout.handlebars file, not the specific view.handlebars file.
Any ideas what might be going wrong?
Thanks in advance,
Paul