0

I have server side code which serves up a pug file, the pug file has variables parsed to it when rendered by my server side code.

I would like to be able to update that variable in pug when a check box is checked / unchecked.

my server side code:

// load the express module
const express = require('express');

const simpleVarDisplaySite = 'simpleVarDisplay.pug';

const app = express();
app.use(express.urlencoded({extended: false}))
app.use(express.static(__dirname+'/static'));

// simpleVarDisplaySite page
app.get('/', function (req, res) {
    console.log(req.url);
    let myHeading = 'Simple Pug Page';
    let simpleObject = {
        'date': {
            'day': 'time'
        }
    }
    
    res.render(simpleVarDisplaySite, { 
        heading: myHeading,
        pugObject: simpleObject,
    });
})

app.listen(8082)

my pug file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Simple Pug</title>
    <link rel="stylesheet" href="/styles/MainStyling.css">
    <script src="/scripts/pugVarUpdater.js"></script>
</head>

<body>    
    <form method="POST">
        <div>
            <header>
                <h1 class="HeaderEl" id="heading">#{ heading }</h1>
            </header>
            <div>
                <input type="checkbox" id="simpleCheckBox" onchange="JavaScript:updatePugVarFunc()">
            </div>
            <br>

            each valueDict, date in pugObject
                <div>
                    <div>
                        <span>#{date}</span>
                    </div>
                    <br>
                    each time, day in valueDict
                        <div>
                            <span>#{day}</span>
                        </div>
                        <div>
                            <span>#{time}</span>
                        </div>
                </div>
        </div>
    </form>
</body>

</html>

my client-side js when checkbox is checked / unchecked:

function updatePugVarFunc() {

    const simpleVarDisplaySite = 'simpleVarDisplay.pug';

    let newSimpleObject = {
        'new_date': {
            'new_day': 'new_time'
        }
    }
    alert(newSimpleObject)

    let myNewHeading = 'My New Simple Heading'
    alert(myNewHeading)

    document.body.innerHTML = simpleVarDisplaySite({
        heading: myNewHeading,
        pugObject: newSimpleObject,
    });
}

I would like to have pug variable: pugObject updated when the checkbox is checked / unchecked onChange event, and see the updates in my browser, which I have tried with:

document.body.innerHTML = simpleVarDisplaySite({
  heading: myNewHeading,
  pugObject: newSimpleObject,
});

But that does not work.

I know that client-side is handled rather differently from server-side, but I am soo hoping that there is a solution to my specific problem.

Please note that I am a nood with javascript and pug, and I am very open to any and all suggestions to better achieve my goal.

My File structure:

server.js
views
  simpleVarDisplay.pug
static
  scripts
    pugVarUpdater.js

PS: I have had a look at: use client-side js variable in pug And that did not help me.

Your assistance and guidance is much appreciated.

FireHawk2300
  • 91
  • 3
  • 13
  • So where is the _client-side_ function `simpleVarDisplaySite` ...? – CBroe Mar 24 '22 at 10:42
  • I don't have a function for that, that is just the pug file. `const simpleVarDisplaySite = 'simpleVarDisplay.pug';` – FireHawk2300 Mar 24 '22 at 13:16
  • But `document.body.innerHTML = simpleVarDisplaySite(...)` is a function call on the client side, what sense is that supposed to make then, if you don't even have such a function? So far, this all sounds like you'd really need to go and read [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) that was mentioned in the other question's answer already, because I am having some serious doubts now whether you are actually aware of it. – CBroe Mar 24 '22 at 13:19
  • yeah you are 100% correct, which is why I said this in my bounty post: `Please pay special attention to the problem faced. (what I have tried may not necessarily be on the right track to solving the problem). ` – FireHawk2300 Mar 24 '22 at 13:24
  • I'm quite familiar with client side and server side programming, hence my comment in my question: `I know that client-side is handled rather differently from server-side, but I am soo hoping that there is a solution to my specific problem.` – FireHawk2300 Mar 24 '22 at 13:26
  • Then answer to that other question still contains the essence of what needs to happen: _"If you are running pug server side, then you will have to make multiple requests to the server"_ - you can not solve this problem on the client side alone, if you are only rendering the templates on the server side. You will need to make an HTTP request that sends your new date value to the server, get the template rendered there with that value as input, send the resulting HTML back to the client, and the replace the existing document or parts thereof with the new HTML. – CBroe Mar 24 '22 at 13:33
  • so in essence I will need to add some sort of a submit button, that will chuck my request back over from client-side to server-side? simply checking / unchecking a checkbox on client-side won't work? – FireHawk2300 Mar 24 '22 at 13:37

0 Answers0