node ejs function a script on click

Question

I have a simple function using a graph api and I want to run it when the user pushes a button. The file I am running from is a ejs file with a header and footer as a prefix and suffix to the code.

My code is below:

<%- include("./partials/header")%>
<script type="text/javascript" src ="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

<button onclick="<%Functions.common1()%>">Click me</button>

<canvas id="myChart" width="400" height="300"></canvas>

<button onclick="<%Functions.common1()%>">Graph me</button>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>
<%- include("./partials/footer")%>

I have a function called common1 which is an exported function in another file called functions which simply console.logs a string. I wish to run the entire script to run the graph on the click of a button, how do I do this?

Quentin · Accepted Answer · 2020-08-24T15:51:35.987

You can't trigger server-side code directly from client-side code.

When the page is requested from the server:

The EJS template will be executed
<%Functions.common1()%> will be evaluated (you say it simply logs a string, so it will do that on the server's console at this time)
The result (including onclick="" because <%Functions.common1()%> doesn't output anything to the template) will be sent to the browser.
Clicking will do nothing because the onclick function body is empty

If you want to execute common1() on the server when the button is clicked, then you need to write a webservice that will do it and then trigger it with an HTTP request (e.g. using fetch from the onclick function).

If you want to execute common1() on the browser when the button is clicked, then you will need to include it in the page using a <script> element, and putting the function call directly in the onclick function (i.e. not inside EJS tags).

And if you want run the code that generates the graph on a click, then put that in a function and call that function.

Further reading: What is the difference between client-side and server-side programming?.

node ejs function a script on click

1 Answers1