How to call javascript functions of external files from ejs template?

Question

I have this file to add a new Ship and the script to populate de fleet dropdown menu works fine:

new.ejs file:

<% include ../partials/header %>

<div class="container">
    <div class="row">
        <h1 style="text-align: center;">Create a new Ship</h1>
        <div style="width: 30%; margin: 25px auto;">
            <form action="/ships" method="POST">
                <div class="form-group">
                    <input class="form-control" type="text" name="name" placeholder="name">
                </div>
                <div class="form-group">
                    <input class="form-control" type="number" name="tons" placeholder="tons" min="0" step="1">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="image" placeholder="img url">
                </div>
                <!--<div class="form-group">-->
                <!--    <input class="form-control" type="text" name="fleet" placeholder="fleet">-->
                <!--</div>-->

                <div class="form-group">
                    <select class="form-control" type="text" name="fleet" id="selectNumber" placeholder="fleet">
                        <option>Choose a fleet</option>
                    </select>
                </div>

                <script>
                    var select = document.getElementById("selectNumber");
                    var options = ["First fleet", "Second fleet", "Metropolitan fleet", "Support fleet"];
                    for(var i = 0; i < options.length; i++) {
                        var opt = options[i];
                        var el = document.createElement("option");
                        el.textContent = opt;
                        el.value = opt;
                        select.appendChild(el);
                    }
                </script>




                <div class="form-group">
                    <input class="form-control" type="text" name="description" placeholder="description">
                </div>
                <div class="form-group">
                    <button class="btn btn-lg btn-primary btn-block">Submit!</button>
                </div>
            </form>
            <a href="/ships/">Back</a>
        </div>
    </div>

</div>


<% include ../partials/footer %>

I want to separate the "logic" from the view, so I need to create a file: ../public/js/jsscripts.js

and I guess inside the jsscripts.js

module.exports = {
  PopulateFleet: function () {
var select = document.getElementById("selectNumber");
                    var options = ["First fleet", "Second fleet", "Metropolitan fleet", "Support fleet"];
                    for(var i = 0; i < options.length; i++) {
                        var opt = options[i];
                        var el = document.createElement("option");
                        el.textContent = opt;
                        el.value = opt;
                        select.appendChild(el);
                    }

};

1) Do I need to require the file "jsscripts" from my app.js ? Something like:

jscripts= require ("./public/js/jscripts");

2) How to call the function "PopulateFleet" from the new.ejs file? something like??

<% PopulateFleet %>

or

<% jscripts.PopulateFleet %>

Folder structure

Fleet - public - js -> jsscripts.js

Fleet - views - ships -> - new.ejs

Thanks for the help by I get the error "jsTools is not defined" on the ejs file Using: var jsTools = require("./public/js/jscripts"); on the app.js file — fedeteka, Feb 04 '19 at 18:57
"You can´t" say this link: https://stackoverflow.com/questions/47001537/how-to-include-external-js-file-to-ejs-node-template-page — fedeteka, Feb 04 '19 at 20:34
Is your newejs file in public folder? Can you show me your folder structure? — Monica Acha, Feb 05 '19 at 05:07

score 2 · Accepted Answer · answered Jul 31 '20 at 09:50

I have the same issue and I find a solution. So I know this solution is not the ideal solution but it's works.

I have a function's file "my_functions.js" with code like that :

var processSomething = function(variableXXXX)
{
    ...
    ...
    return(variableNew)
}

module.exports.processSomething     = processSomething;

I require this file into "application.js" like that :

var myFonctions = require('./include/my_fonctions.js');

And I pass this variable to my EJS like that

res.render('view.ejs',{myFonctionsForEjs:myFonctions});

And, in my EJS File I can do that

var response = myFonctionsForEjs.processSomething(1234);

Monica Acha · Answer 2 · 2019-02-06T18:26:56.230

1

use <%= jscripts.PopulateFleet() %>

edited Feb 06 '19 at 18:26

answered Feb 05 '19 at 10:12

Monica Acha

1,076
9
16

I'm using C9 as online IDE, and the require line only works with `jscripts = require ("./public/js/jsscripts");` but still I get the error "jscripts is not defined" on the new.ejs file – fedeteka Feb 05 '19 at 10:40
1

i am pretty sure you are not including the file correctly=> try this .. require ("../../../public/js/jsscripts"); – Monica Acha Feb 05 '19 at 11:47
I tryed the first time I read your answer and I get error when runining node app.js "Error: Cannot find module '../../../public/js/jsscripts' at Function.Module._resolveFilename (module.js:469:15)" But with ./public/js/jsscripts runs ok. The problem is calling javascript on the ejs template – fedeteka Feb 05 '19 at 15:23
Even is I play withe ejs playground on: https://ionicabizau.github.io/ejs-playground/ a line like `<% alert("Hello! I am an alert box!!!"); %>` runs OK, but not on the ejs on node. – fedeteka Feb 06 '19 at 10:52
1

Hmm I am not able to figure out your error. Could you send me a codesandbox or jsfiddle link? Whichever is convinient – Monica Acha Feb 06 '19 at 11:18
Here you have the complete "app" http://www.filedropper.com/imperialfleet It's based con YelpCamp https://ide.c9.io/learnwithcolt/webdevbootcamp – fedeteka Feb 06 '19 at 12:45
1

Path looks fine. Just a silly mistake. i missed a "=". Updated my answer. Check this and use '-' or '=' according to your requirement. https://stackoverflow.com/questions/48522768/the-difference-between-and-in-ejs – Monica Acha Feb 06 '19 at 18:32
I really appreciate your help but still not working. If I try the solution from https://stackoverflow.com/questions/50124742/how-to-include-a-js-script-in-a-ejs-file-nodejs-app using the app get frozen on the page (waiting forever for the script) but at least I didn't recieve any error on the console. I will keep looking for a solution. Thanks a lot. – fedeteka Feb 07 '19 at 16:49

How to call javascript functions of external files from ejs template?

2 Answers2