Laetis Laetis - 5 days ago 6
Javascript Question

onload js call not working with node

I am starting to learn node.js, for now I am just trying to execute my old none node app with node. In this app, I have a html page with a body calling an onload js function. It's working just fine.

Now I have a a node app: app.js, simple as that:

var express = require ('express');
var app = express ();
app.use(express.static(__dirname + '/images'));
app.use(express.static(__dirname + '/CSS'));
app.use(express.static(__dirname + '/font'));
app.use(express.static(__dirname ));
app.use(express.static(__dirname +'/ketcher'));
app.use(express.static(__dirname +'/ChemAlive_JS'));
app.get('/', function(req, res) {

res.sendFile('/home/laetitia/Project/ChemAlive_Interface_Node/ChemAlive_Interface.html');
});

app.listen(8080);


And in the .html I still have:

<body onload="ketcher.init();">


but the function I want to load is not load at all anymore.

Any clue?

Thanks

rsp rsp
Answer

You have not provided a lot of info in the question but from what you provide I can have few suggestions:

Suggestions

Instead of adding a lot of express.static uses:

app.use(express.static(__dirname + '/images'));
app.use(express.static(__dirname + '/CSS'));
app.use(express.static(__dirname + '/font'));
app.use(express.static(__dirname ));
app.use(express.static(__dirname +'/ketcher'));
app.use(express.static(__dirname +'/ChemAlive_JS'));

put those files (and directories) that you want to be served into one directory, e.g. called static, and use express.static once:

app.use(express.static(__dirname + '/static'));

or better yet, using the path module:

app.use(express.static(path.join(__dirname, 'static')));

you need to require the path module first with:

var path = require('path');

Now, instead of serving the single file for the '/' route with:

app.get('/', function(req, res) {
    res.sendFile('/home/laetitia/Project/ChemAlive_Interface_Node/ChemAlive_Interface.html');
});

just put that file into the static directory as index.html so it will be served by the express.static middleware automatically.

Rationale

The way you have it configured currently, is that e.g. everyone can download your Node application - app.js with all of its configuration and even submodules etc.

Also, by using the express.static middleware many times I suspect that you are not sure how the files in those directories will be mapped to URLs.

Having a one place for static files makes it easy to verify whether any script tags have correct paths etc.

My guess

You don't provide enough info to be sure but my guess is that the JavaScript files for the main HTML file are not loaded correctly but you provide not enough info to be sure.

You can open the developer tools console in the browser and reload the page while the console is open and see for errors.

I suspect that the ketcher.init() method is being run but either the method, or the ketcher object is undefined, because some <script> tags failed to be loaded.

Example

The full example after following my suggestions would be much simpler:

var path = require('path');
var express = require ('express');
var app = express();
app.use(express.static(path.join(__dirname, 'static')));
app.listen(8080);

Maybe I would add some output to see what's going on:

var path = require('path');
var express = require ('express');
console.log('starting app.js');
var app = express();
app.use(express.static(path.join(__dirname, 'static')));
app.listen(8080, function () {
    console.log('listening on http://localhost:8080/');
});

And now you will have all files that can be served to the browser in one place: in the static directory in this example.

Working app

You can see my example of a working Express application serving static files on GitHub:

In this example the directory for static files is called html but you can call it how you want, as long as it's consistent with how you use the express.static middleware.

You can start from this example project and just put your own files into the directory where express.static is told to look for files to serve.

You can also change the port number to match your needs.

More hints

The onload callback may not be fired if the page is waiting for some resources to load.

To see if your onload callback is firing you can change it to:

<body onload="alert('onload callback fired');">

Also the ketcher object may be not initialized or it may not have the init() method. After the page is loaded you can open the JavaScript Console and try running the method manually to see if it would work if it was fired:

ketcher.init();

You can also try commands like:

console.dir(ketcher.init);
console.dir(ketcher);
console.log(typeof ketcher.init);
console.log(typeof ketcher);

to see if the ketcher object contains what it should.

Even if the GET localhost:8080/ketcher.js gives a 200 OK status, it can still load some other resources that are not available.

Other related answers: