How to trigger onclick function in router for PugJS?

Question

I'm currently using a expressJs template that uses pug in order to make a simple website. On the site is a button. I want on the click of the button to call a function in the index.js file.

Originally I had the code like this. In the index.pug file:

extends layout

block content
  h1= title
  p Welcome to #{title}
  button#BubbleButton.button.hypeButton.button-3d.button-caution.button-circle.button-jumbo(onclick = 'buttonClick()') Click

In my index.js file, it would look like so:

var express = require('express');
var router = express.Router();
var PubNub = require('pubnub');
module.exports = router;

function buttonClick(){
  alert('test');
}

However, I would get a response along these lines:

buttonClick function not found.

I'm frankly more familiar with angular than pug. What does it take to link up the view side to the router file? I understand in Pug, you can add an endpoint REST API style, but this isn't necessarily going to be an API. I may just want to show something simple and not expose it. However, I may be misunderstanding something fundamental.

Thanks!

Answer 1

The JavaScript code contained in the script. tags in your pug file will only run in the browser, and the code in index.js will only run on the server. Therefore they can never speak directly.

You need an ajax call on the client (i.e. in your pug file). Here's an example using jquery but you can use one of the many ajax client packages out there to do the same thing:

script.
  function onButtonClick(){
    $.ajax({
      "url": "/service",
      "method": "POST"
    }); 
  }

Then you need a route handler in index.js:

router.post('/service', function(req, res){
  console.log('test');
});

Note that this will output to the console on the server, not the client. I believe that's what you want to do.

To add jquery to your page you can use a cdn (Content Delivery Network) to quickly bring it into your code. Here is the pug syntax for that:

script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous")

Alternatively you could you axios as a lightweight alternative to jquery, all it does is ajax:

script(src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js" integrity="sha256-mpnrJ5DpEZZkwkE1ZgkEQQJW/46CSEh/STrZKOB/qoM=" crossorigin="anonymous")