I'm trying to create a dynamically included in an ejs page (using <%- include('partials/content') %>) on my node.js project.
Is there a way I can create a variable for the to-be-included page and change it on a button click?
Let's assume your partials/content file includes content like:
<h1>Lorem ipsum dolor sit amet</h1>
A file named partials/content2:
<h1>consectetur adipiscing elit<h1>
Your main template file would wrap the partials content by a <div> with the id result and include a script file where you select this <div> by using var $result = $('#result'); so you have it in a variable. Then you can register a click handler on your button. On click you request the wished template file and replace the content.
Main template:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="result">
<%- include partials/content.ejs %>
</div>
<button id="change">change</button>
<script>
var $result = $('#result');
$('#change').click(function() {
$result.load('/content2');
});
</script>
</body>
</html>
Then you need a controller on the backend like:
app.get('/content2', function (req, res) {
res.render('partials/content2');
});
Related
I am building an app with the help of node, express and ejs. The structure of my app is in this way that I used a footer.ejs file in all pages (templates) and in that file I have a code like this:
footer.ejs
<!-- bootstrap js CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!-- some other codes -->
</div>
</body>
</html>
But in some of my pages I need some js codes. Because I don't want to load them in un-related pages, I decided to add the <script> tags of them individually on that page only like the code below:
information.ejs:
<!-- the html tags of this page (called information.ejs) are here -->
<!-- ... -->
<!-- end of html tags -->
<script src="/javascripts/upload.js"></script> <!-- this is the script codes that only need in this page -->
<%- include('include/footer') %>
That works fine. But now I need some functionality of bootstrap.js in my upload.js script. The problem here is that upload.js is loaded before the bootstrap.js and I could not use the functionality of bootstrap in my script.
To solve that problem I decided to define a variable called infoId and send that to information.ejs like below in my express router file:
router.get('/dashboard2/:infoId', (req, res) => {
res.render("information", {
infoId: req.params.infoId,
});
})
And then deleted the script tag from the end of information.ejs file and added it in footer.ejs like below:
new footer.ejs:
<!-- bootstrap js CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!-- added new -->
<% if(infoId !== undefined) { %>
<% if(infoId == "information") { %>
<script src="/javascripts/upload.js"></script>
<% } %>
<% } %>
<!-- some other codes -->
</div>
</body>
</html>
In this case I get the error of variable infoId is undefined when I navigate to other routes (pages). Could I fix this problem without sending the infoId variable to all other routes?
I am using handelbars as my templating engine and I am curious to whether I could edit the main handlebars file. What I can do at the moment is something like this:
main.handlebars:
<html>
<head>
</head>
<body>
<div id='headerBox></div>
<div id='contents'>{{{body}}}</div><!--all contents goes here-->
</body>
When I use this method I will could create templates e.g. home.handlebars etc.
But what If I wanted to change something dynamically in the main.handlebars? For example in my website, I would love to have a login form so I would like to have something like this in the main.handelbars:
<html>
<head>
</head>
<body>
<div id='headerBox>{{If logged in print name, if not print sign up}}</div>
<div id='contents'>{{{body}}}</div><!--all contents goes here-->
</body>
</html>
TLDR, how to I change something dynamically in the main handlebars skeleton.
Thanks!
You'll want to write a Handlebars Helper function. Since you didn't include anything about how you're verifying login, I'll write a little demo.
In your template file:
<div id='headerBox'>{{header}}</div>
Handlerbars.registerHelper('header', function() {
if (loggedIn) {
return //however you're getting a username
} else {
return Sign Up
}
});
Hi I am trying to create dynamic template system in express, where I will get dynamic content from database and then render output in single index.ejs file.
Here is my index.js
router.get('/', function(req, res, next) {
var dataFrmDB = {
pageContent: "<%= data.pageTitle %>",
pageTitle: "home"
};
res.render('index', {data:dataFrmDB} );
});
And index.ejs contains:
<%= data.pageContent %>
What I should do so that I can render "home" as output. Is this possible?
I was working on something similar when we migrated from drupal to nodejs, I used ect for rendering instead of jade, its faster and much easier to deal with, However, its much better to use design pattern if you have a big dynamic website
js controller file
model.homepage(function(data)
{
res.render("homepage.ect",data,function(err,html)
{
// Do something before you send the response such as minification, or error handling
res.send(html);
});
});
ECT file
<html xmlns="http://www.w3.org/1999/xhtml" lang="ar" xml:lang="ar">
<head>
<%- #page.title.body %>
<%- #page.headerScript.body %>
<style type="text/css">#homepage-container{min-height:300px;color:#353535;float:right;width:100%}</style>
</head>
<body>
<% include 'upper_bar.ect' %>
<%- #page.headerAd.ads %>
<%- #page.notifications.body %>
<%- #page.autocomplete.body %>
<%- #page.redirect.body %>
<%- #page.navigation.body %>
<%- #page.overlayAd.ads %>
</body>
</html>
why bother so much?
You can easily do this using templatesjs
without any template engine.
let me show you how your work can be done using templatesjs
html file
<html>
<head>
<title> <%title%> </title>
</head>
<body>
your content goes here
</body>
</html>
now use templatesjs in you node.js file
var tjs = require("templatsjs");
router.get('/', function(req, res, next) {
var data = fs.readFileSync("./index.html");
tjs.set(data); // invoke templatesjs
var output = tjs.render("title","home");
/* this will replace the <%title%> tag
in the html page with actual title*/
res.write(output);
res.end()
});
i have used fs.readFileSync to keep simplicity of code you can use the asynchronus function if you want (fs.readFile).
a good referrence can be found here
Installation :
$ npm install templatesjs
The following router calls the ejs template to populate the values of cursor in to the html page.
router.get('/users_loaded_disconnect', function(req, res) {
res.render('users_loaded_disconnect',
{cursor: req.db.collection('notify_user_state_collection').find({})});
});
user_loaded_disconnect.ejs
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<b> Users Loaded Disconnect </b>
<ul>
<% cursor.nextObject(function(err, item) { %>
<%= JSON.stringify(item) %>
<% }); %>
</ul>
</body>
</html>
The cursor does not work. However if the cursor is iterated within the router like the following code it prints the value
req.db.collection('notify_user_state_collection').find({}).nextObject(function(err, item) {
console.log(JSON.stringify(item));
});
What is wrong in iterating the cursor inside the ejs template ?
The cursor operation is asynchronous. Ejs will not wait for it to complete, and will continue to render the template before data is available. You can't effectively use callbacks inside ejs templates.
I have this simple file hello.html and looks like this.
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="thediv">
</div>
</body>
</html>
I am using fs module to write to my file like this
var fs = require('fs');
var randomnumber = Math.floor((Math.random()*100393)+433334);
fs.createReadStream('test.txt').pipe(fs.createWriteStream(randomnumber+'.txt'));
fs.writeFile(randomnumber+".txt", "Lorem ipsum"+randomnumber, function(err) {
if(err) {
console.log(err);
} else {
console.log("The file was saved!");
}
});
console.log(randomnumber);
I want to write
<article>
<p> lorem ipsum </p>
</article>
to the div with the id thediv.Is the fs module used for this kind of thing or is there a module more suited for this task?.
I believe the only answer to get an HTML parser, parse the file into a DOM, make the adjustments and then save the DOM back to a file. Here's a question that answers where to find an HTML parser.