How to call a function from HTML to a Javascript file, in Node.JS

Question

I am using Node.JS with Express. The following line fails, and I need help fixing it.

var routines = require("myJsRoutines.js");

When I run index.html and click MenuItem, I get the first alert, but not the second one. I have both files in the same directory. Thanks

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <a href="javascript:myMenuFunc('Level 1');">MenuItem</a>
    <script>function myMenuFunc(level) {
        alert("myMenuFunc1:" + level);
        var routines = require("myJsRoutines.js");
        alert("myMenuFunc:2" + level);
        routines.processClick(level);
        alert("myMenuFunc:3" + level);
    }</script>
</body>
</html>

myJsRoutines.js:

exports.processClick = function processClick (param1) {
    console.log(param1)
}

i think you are running this via browser. And this is the user-side javascript. you should use ajax to call server-side code. — ArtemSky
– ArtemSky, Commented Aug 29, 2016 at 21:05
Yes, I am running this on Chrome localhost, to test things out in Node.JS. I’ve never used Ajax, and don’t know how that will solve my problem. — P.Nuzum
– P.Nuzum, Commented Aug 29, 2016 at 21:29

Golphy · Accepted Answer · 2016-08-30 06:40:56Z

1

Script in <script> tags only runs on the client, and script on the server never directly handles DOM events like clicks. There is no magical event wireup - you need to make them interact.

Assuming folder structure from http://expressjs.com/en/starter/generator.html

Updated module code, in /modules/myJsRoutines.js...

var myJsRoutines = (function () {
  var multiplier = 2;

  return {
    processLevel: function (level, callback) {
      console.log('processLevel:', level); // CLI or /logs/express_output.log

      // validation
      if (!level) {
        // error is usually first param in node callback; null for success
        callback('level is missing or 0');
        return; // bail out
      }

      // processing
      var result = level * multiplier;

      // could return result, but need callback if code reads from file/db
      callback(null, result);
    }
  };
}()); // function executed so myJsRoutines is an object

module.exports = myJsRoutines;

In /app.js, load your module and add a get method...

var myJsRoutines = require('./modules/myJsRoutines');

app.get('/test', function (req, res) {
  var level = parseInt(req.query.level) || 0;
  console.log('server level:', level);

  myJsRoutines.processLevel(level, function (err, result) {
    if (err) {
      res.status(500);
      return res.send(err);
    }

    res.send('result ' + (result || '') + ' from the server');
  });
});

In /public/index.html, add client script to make an HTTP request to the get method...

<a class="test" href="#" data-level="1">Test Level 1</a>
<a class="test" href="#" data-level="2">Test Level 2</a>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(function(){ // jQuery DOM ready
  $('.test').click(function () { // click event for <a class="test">
    var level = $(this).data('level'); // from data-level="N"
    var url = '/test?level=' + escape(level);
    console.log('client url:', url);

    // HTTP GET http://localhost:3000/test?level=
    $.get(url, function (data) {
      console.log('client data:', data); // browser console
    });

    return false; // don't navigate to href="#"
  });
});
</script>

...start the server from the command line...

npm start

...open http://localhost:3000/ in your browser, Ctrl+Shift+i to open the browser console, and click the links.

answered Aug 30, 2016 at 6:40

Golphy

1346 bronze badges

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

4 Comments

P.Nuzum Over a year ago

Golfy, Thanks for all your information. Your first paragraph explained a lot in few words. I am new with Node as you can tell. Yes I am using the standard Express structure. It may take some time to implement these changes, but this is going to be very critical to many things I am doing. Thanks much for you help and patients Fore!

P.Nuzum Over a year ago

Golphy, server level: 1 processLevel: 1 server level: 2 processLevel: 2

P.Nuzum Over a year ago

Golphy, You're a miracle worker. Things worked right out of the box. Since this is my first even StackOverflow post, I’ve got to figure out how to give you maximum credits, and close this Question. Good luck with your golf game, Pat

P.Nuzum Over a year ago

Hi Gophly, I'm trying to send the client back to the Home page, but it's not working. It hits both breakpoints and contents of index.jade is in 'html'. Do you know what I'm dong wrong? // res.send('result ' + (result || '') + ' from the server'); res.render('index', function(err, html) { res.send(html);

Rupan RC · Accepted Answer · 2016-08-29 22:23:48Z

0

Run from a node server..var routines = require("myJsRoutines.js"); in the server.js file and Just call a javascript onclick function..and post parameters..for posting parameters..you'll be needing Ajax...and console log the data in node..or After sending the data to the node server..run the function in node server.

Code snippet for calling the function from a href.. and

`<a href="www.blabla.com" onclick="return myMenuFunc('Level 1');">MenuItem</a>

<script type="text/javascript">
function myMenuFunc('Level 1') {
    // return true or false, depending on whether you want to allow the `href` property to follow through or not
}

`

edited Aug 29, 2016 at 22:23

answered Aug 29, 2016 at 22:16

Rupan RC

113 bronze badges

Comments

Subomi · Accepted Answer · 2016-08-30 09:32:05Z

This line:

var routines = require("myJsRoutines.js");

fails because the require statement is a nodejs function. It does not work with the browser nor does it work with javscript natively. It is defined in nodejs to load modules. To see this

go to your command line and run this

> node
> typeof require
'function'

go to your browser console; firefox - press Ctrl + K

>> typeof require
"undefined"

To achieve your aim, there are two options that come to my mind

// Assumed Express server running on localhost:80
var express = require('express');
var app = express();

app.get("/myJsRoutines", loadRoutines);

app.listen(80);

Option I: XMLHttpRequest This is a browser API that allows you to open a connection to a server and talk with the server to collect stuff using HTTP. Here's how you do this

<script>
    var request = new XMLHttpRequest(); // create an xmlhttp object
    request.open("GET", "/myJsRoutines"); // means GET stuff in there
    request.link = link;

    // wait for the response
    request.addEventListener("readystatechange", function() {
       // checks if we are ready to read response
       if(this.readyState === 4 && this.status === 200) {
            // do something with response
        }

    })       

    //send request
    request.send(); 
</script>

Lookup XMLHttpRequest API or the new fetch API

Option II: Pug Pug, formerly named jade is a templating engine for nodejs. How does it work? You use it to programmatically create the html on the server before sending it. Lookup the site -> https://pugjs.org/

I am using Jade, but did not want to confuse the issue. I couldn't find any Jade examples to do what I wanted.

Collectives™ on Stack Overflow

How to call a function from HTML to a Javascript file, in Node.JS

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related