Jade: load external javascript and call function

Question

I was learning Express/Node/Jade and now in the Jade file I want to include a javascript file from the public folder just for the page. For example, in jade file I type this:

script(src='/javascripts/test.js')

and inside test.js I have a function

function check_test(){
    return "It's working!"
}

then I try to call the function in Jade by

- var test_response = check_test()

than I got the error saying that "undefined is not a function" and test.js isn't load at all. Apparently Jade doesn't load the file, they only transform into HTML code.

I look someone else's question and this is the closest one I can found but it doesn't provide a clear answer of what to do. In Jade, how can you call a function in an external Javascript

So my question is: In this case what should I do to make it work?

I don't want to load the file in layout.js since I only want test.js only be use by this page.

Answer 1

Well... In the first instance, it is different what happens in the browser of what happens on the server. So Jade is a rendering of HTML, therefore if you are in the browser. It's what ExpressJS shipping, ie rendering Jade. If you want to call, your HTML Javascript (Rendering of Jade), should show you where the Javascript. For exmaple

in Server.js

// Get the Javascript in the browser
app.use("/javascripts", express.static("./outJavascripts"));
// Get the URL
app.all("/", function(req, res){
  // Render the Jade and Send for the client (Browser)
  req.render("myTemplate.jade");
});

In myTemplate.jade

script(src='/javascripts/test.js')

In "./outJavascripts/test.js"

function check_test(){
    console.log("It's working! :D");
    return "It's working!";
}

If you do this, you will realize that it is run, the file "./outJavascripts/test.js" in the browser. And the function "check_test" never run in the server.

Answer 2

Or put all folders in a common folder, for example public

public -javascripts -stylesheets -images

and then expose that public folder

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

which means you can

script(src='/javascripts/script.js') link(rel='stylesheet', href='/stylesheets/style.css')

Answer 3

Save your JS file and link it in your Jade file as:

script(src="filepath/yourJSfile.js")

Then call the function, I'm using a button here for example:

button(class="btn", onclick='functionName()')