(NodeJS + Express) Server isn't reading linked javascript file(s) from html

Question

I'm stuck, I managed to get the server on my webhost working on AWS + everything else in express.js but now I have this error:

root@ip(censored):/home/ubuntu/(censored)# /home/ubuntu/(censored)/routes/index.js:15
$(document).ready(function() {
  ^

ReferenceError: document is not defined
    at Object.<anonymous> (/home/ubuntu/(censored)/routes/index.js:15:3)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/ubuntu/ForbiddenGround/app.js:12:14)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
^C

And here is my HTML file that is loading the jQuery (Isn't it supposed to know that i included jQuery which defines the $ variable?)

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<link href="owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="owl-carousel/owl.theme.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
 <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="font-awesome-4.4.0/css/font-awesome.min.css"  type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>

And this is my app.js that is firing:

var express = require('express');
var app = express();
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var favicon = require('serve-favicon');
var cons = require('consolidate');
const port = 9000;
var swig = require('swig');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();


app.engine('html', swig.renderFile);

app.use(express.static('public'));
app.use(express.static('forbiddenDirectory'));
app.set('view engine', 'html');
app.set('views', __dirname + '/views');




////////////////////////////////////////////////////////////////////////////////////
app.get('/', function (err, req, res) {
    req.render('index');
});


    app.listen(port);
console.log(`Server started! Port:  ${port}`);

This is my index.js:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { joo });
});

module.exports = router;


// Navbars
$(document).ready(function() {
    const apod = $("#apod").attr("href","apod.html");
    const home = $("#home").attr("href","home.html");
    const animedb = $("#animedb").attr("href","animedb.html");
    const birthdays = $("#birthdays").attr("href","birthdays.html");
    const holidays = $("#holidays").attr("href","holidays.html");
    const events = $("#events").attr("href","events.html");
    const contacts = $("#contacts").attr("href","contacts.html");
    $("#importantdates").click(function(e) {
        e.preventDefault();
    });

});

I posted my index.js at the end now. And yes skav. Im not sure how to use that website though i'm a bit confused — Chris
– Chris, Commented Nov 12, 2016 at 23:05

JVDL · Accepted Answer · 2016-11-12 23:06:01Z

2

It looks like you're using jQuery + DOM things in one of your routes.

Routes aren't the place to do that, they run in a Node.JS context and as such do not have access to the DOM. You'll need to move that code (i.e. the $(document).ready(function(){ ... });) to a JS file that is included by the browser.

Edit: Just to add to that, const apod = $("#apod").attr("href","apod.html"); is not an effective way to set the href attribute on your navigation links. You should modify the template where those links occur and set the href attribute in there.

answered Nov 12, 2016 at 23:06

JVDL

1,23211 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Over a year ago

Thanks it works now. So the app.js file is used specifically for routing? Or can it be just as effective if it included the javascript codes in there. Alright i'll remove those javascript links. I had it in there because I wasn't working with express before and had to fine some way to dynamically link the links together since all I was working with were html files

JVDL Over a year ago

Sort of. The app.js is the Node.JS application you're running. In this case it uses Express, but could also be something else. The important part here is knowing the difference between which parts run in Node.JS and which parts run in the browser. I believe Express's "static files" help page might be useful to read.

Collectives™ on Stack Overflow

(NodeJS + Express) Server isn't reading linked javascript file(s) from html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related