I am new to the ExpressJS and Jade game, as like today new. I can't figure out how to render data into a div identified by its id attribute. Here is my sample Jade file:
extends layout
block content
div
h1= title
div(id="content", class="main")
I want to pass the data into the div with id Content. Here is the snippet of my ExpressJS file:
...
router.get('/', function(req, res, next) {
res.render('index', { title: 'Hello World!' });
res.render('index', { content: 'Wazzzaaapp' });
});
...
I'm able to display the title Hello world but not the Wazzzaaapp.
Sample screenshot of what I got:
Is this possible to do in render or am I missing something?
I'm not sure if this is the correct or actual answer, but I got it solved by adding (in the Jade/ Pug file of course) either the placeholder #{var_name} or = var_name as:
div(id="content", class="main")= content
OR
div(id="content", class="main") #{content}
either one works and shows the Wazzzaaapp output as intended:
Hope this solution helps others!
Related
I'm new to web development and trying to learning how to use javascript and .pug. I have set var camgrounds with image files
router.get('/campgrounds', function (req, res) {
var campgrounds = [
{
title: "Paynetwon Campground",
image: img(src ="https://cdn.pixabay.com/photo/2020/06/14/17/57/mountains-5298769_960_720.jpg")
}];
res.render('campground', {
campgrounds: campgrounds
});
});
When I try to go campgrounds render page, i have error message "img is not defined"
On my camground.pug, i wrote as:
doctype html
each camping in campgrounds
ul
li= camping.title
li = camping.image
can someone help with this error code?
Bankole is right, you should just pass the image path to Pug and let Pug do the rest. However, the correct markup for creating an image in Pug would look like this. (And if you want a list of campgrounds, I'd suggest moving the ul element outside the loop as follows:)
ul
each camp in campgrounds
li
p= camp.title
img(src= camp.image)
Found it.. it was just
img(src=camp.image)
First off - this is my first post on here, and so I preface this question with a big thanks for the many months of anonymous help I've received in the process of building my first real site. That's also to say, please forgive me if the formatting of this question (and my code LOL) isn't up to par. I'll try to include only what's relevant. That said, I'm having some issues with rendering a base64 string onto a pug template.
I'm sending off an image file to an API (in this case, a JPG) via form input with enctype='multipart/form-data'. I've gotten that to work quite nicely. However, I'd also like to grab the image that is uploaded and display it on the route that I render to after the API responds.
articles.js:
...
router.post('/add', upload.single(), function(req, res) {
if(req.files.upfile.data) {
global.d = new Buffer(req.files.upfile.data, 'binary').toString('base64') // I receive the data initially as a <Buffer> object //
// api formatting after here//
let article = new Article();
//assign article attributes 1-5, author,etc
article.image = d;
article.save((err) => {
if(err) {
console.log(err);
} else {
req.flash('success', 'Log Added')
res.redirect('/');}
});
}
});
...
router.get('/:id', function(req, res){
Article.findById(req.params.id, function(err, article){
User.findById(article.author, function(err, user){
res.render('article', {
article: article,
author: user.name,
first: article.first,
second: article.second,
third: article.third,
fourth: article.fourth,
fifth: article.fifth,
total: article.total,
image: article.image
});
});
});
});
which renders onto:
article.pug
extends layout
block content
h1 #{author}'s day
h4 from #{article.title}
br
br
ul
li.list-group-item.d-flex.justify-content-between.align-items-center.list-group-item-success Sadness.
span.badge.badge-primary.badge-pill #{first}
br
li.list-group-item.d-flex.justify-content-between.align-items-center.list-group-item-success Anger.
span.badge.badge-primary.badge-pill #{second}
br
li.list-group-item.d-flex.justify-content-between.align-items-center.list-group-item-success Disgust.
span.badge.badge-primary.badge-pill #{third}
br
li.list-group-item.d-flex.justify-content-between.align-items-center.list-group-item-success Neutral.
span.badge.badge-primary.badge-pill #{fourth}
br
li.list-group-item.d-flex.justify-content-between.align-items-center.list-group-item-success Happiness.
span.badge.badge-primary.badge-pill #{fifth}
br
li.list-group-item.d-flex.justify-content-between.align-items-center.list-group-item-success Happiness.
span.badge.badge-primary.badge-pill #{image}
img(src='data:image/jpeg;base64,#{image}')
I get the missing image icon, even though my base64 works on every online decoder I've used, and even if I hardcode the base64 string into the link as <img src = "data:image/jpeg;base64,DATA_HERE"> on a test html file. And if I insert p #{image} onto the line before I attempt to use #{image}, I get something like this (which seems to be valid to me, but I think I just need a more experienced eye to look at this):
/9j/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAA ... DTvL/734mAqYiBciDqO8FmafV/UiJb3V9kn//Z
Ahh please tell me what I'm misunderstanding! I've searched through every post on SO and haven't been able to fix my error. Any input is very much appreciated. Thank you again!
EDIT: writing image/jpg and image/jpeg gives me the same empty image icon
I had a similar problem and I think it's because the binary data is not in the right format for Pug. Try this in your route, it worked for me:
router.get('/:id', function(req, res){
Article.findById(req.params.id, function(err, article){
User.findById(article.author, function(err, user){
res.render('article', {
article: article,
author: user.name,
first: article.first,
second: article.second,
third: article.third,
fourth: article.fourth,
fifth: article.fifth,
total: article.total,
image: article.image.toString('base64')
});
});
});
});
So change your image line to:
image: article.image.toString('base64')
For example, I have a pug view 'VIEW.pug', it contains two parts
part A: with some data
part B: empty
after request a GET from express/node, I would like to keep part A's data and refresh part B with new data by using the res.render('VIEW', {xxx}) function.
So how can I make this happen? Once I render VIEW.pug, though I refresh part B with the correct data, but the data in part A are gone.
I wanna both of part A and part B have data, A with old existing data, and B with new data.
create a layout.pug file :
html
head
title My Site - #{title}
block scripts
script(src='/jquery.js')
body
block content
now create a file with partA.pug , which extends layout file :
-extends layout.pug
block content
h1= PART A
now use include to include partB in partA file
include includes/partB.pug
your partB.pug should be rendered based on condition
#partB
- if(section=== 'DEMO-1') {
| <p>DEMO 1</p>
- }
- if(section === 'DEMO-2') {
| <p>DEMO 2</p>
- }
app.js
var express=require('express');
let app = express();
app.set("view engine", "pug");
app.set("views", path.join(__dirname, "views"));
app.get('/demo1',function(req,res){
return res.render("partA",{section:'DEMO-1'});
});
app.get('/demo2',function(req,res){
return res.render("partA",{section:'DEMO-2'});
});
I am very much new to express framework in node.js , i am trying to write the text after "/" in URL in the html page
to give an clear example , if URL is localhost:3000/XYZ
on the webpage of localhost:3000/XYZ a text should be shown as XYZ , if i change the text from "XYZ" to "ABC" i.e., (localhost:3000/ABC) then the webpage should display ABC
thank you all
app.get('/:param', function (req, res) {
res.send(req.params.param);
});
I am using Node.js and ExpressJS 3.0. Moving to 3.0, I found that partials were no longer supported and subsequently found express-partials to provide similar functionality.
Looking at the example on the GitHub page, I find this:
app.get('/',function(req,res,next){
res.render('index.ejs')
// -> render layout.ejs with index.ejs as `body`.
})
This is fine, but what if I have a layout that depends on multiple partials? That is, what if I have a block in the layout.ejs file for the header, one for the content, and one for the footer? For example, what if I use one template file for the entire web application, but different kinds of users have different headers, content blocks, and footers?
Looking at the limited documentation of express-partials, I cannot find this functionality. I was expecting something like this:
app.get('/', function (req, res) {
res.render({header: 'header1.ejs', content: 'some_file.ejs', footer: 'footer1.ejs'});
// -> render layout.ejs with header1.ejs as `header`, some_file.ejs as `content, and footer.ejs as `footer
});
How can I achieve this functionality?
I'd suggest you to use ejs includes + switches
Sorry, I'm not familliar with ejs syntax, so – jade, but the essense is the same:
app.get('/', function (req, res) {
res.render('index', {
header: 'header1',
, content: 'content1',
, footer: 'footer1'
});
});
index.jade
===========
//- header
case header
when "header1":
include "includes/header1"
when "header2":
include "includes/header2"
...
case content
when "content1":
include "includes/some_file1"
when "content2":
include "includes/some_file2"
....