I'm new to node.js, jade, & express, so please bear with me.
I have the following files.
layout.jade
index.jade
extends layout
block content
label initial layout
form(action="/getReports", method="GET", enctype="multipart/form-data")
input(type='submit', value='Generate Report')
child.jade
extends index
block append content
label added child
server.js
app.get('/getReports', function(res, req)
{
res.render("child.jade");
});
Process:
User comes on and loads the site. They see the initial index page
User clicks on the form which triggers an action that calls the Rest
Api getReports
The call will render the child template that should just append "added child" to the content part of index.jade.
However, I'm not seeing this. I guess I'm trying to understand the best approach to append a partial template that is rendered to the original index.jade page.
The problem i'm having is that this code is the client side is the index.jade page. The button triggers an action call to the server. The server processes data, then the goal is to take the data and process a template that it was to display on the index.jade page.
Normally, without the jade template files, I would just use javascript and to the naive way which would be just have the client side java code trigger the ajax call and in the response use the DOM to append the html with the processed data but I wanted to take advantage of jade.
Any advice Appreciated,
Thanks,
D
Here are some pointers that might help you,
In res.render("child.jade");, don't include extension of the jade file, .jade. Just res.render("child"); will work.
In your "child.jade", block append content is wrong as there is no block with that name. If you want to render some partial in index page then you should specify a block in "index.jade". Make it like,
extends layout
block content
label initial layout
form(action="/getReports", method="GET", enctype="multipart/form-data")
input(type='submit', value='Generate Report')
block child
and "child.jade" to,
extends index
block child
label added child
Related
I want to ajax for blocks that without layout
Such as
extends layout
block content
p xxxx
I want to get the content in block
if !layout
include layout
The solution
If you don't want the standard pug layout then create a file that doesn't have extends layout in it:
doctype html
html(lang='en-us')
head
title Page Title
body
div Content goes here
You don't need to do anything in your app.js file to make this happen. You've probably figured out that none of the statements in your question work. This is all controlled in the pug template file.
I have three Pug files in a Node.js/Express application which follows the following layout:
//layout.pug
html
head
title= title
link(rel="stylesheet", href="link")
script(src="links")
// many css and javascript imports
body
header
// header section
block content
footer
// footer section
// more script imports
//index.pug
extends layout
block content
//some content
include slider
//slide.pug
div(class="xxx")
//slider contents
The include keyword actually works here and it renders the slider.pug but the problem I'm facing is that it does not render the slider.pug page as expected. The slider page is rendered in a way that it does not load required styles and javascript files so the result is a messed up html inside a nicely rendered one (index.pug in this case is the nicely rendered one).
I've tried adding the extend layout line to the slider.pug but it also failed.
What is the appropriate way to include a pug file that is meant to rely on the resources included in the layout page such as css and javascript inside another pug file?
I'm making a website, I'm using node and express on the back end, pug on the frontend.
My website is split up into few views via pug.
Layout, I have as the highest view, all of the views "inherits" from there.
So layout ends with
block content
and everything after that starts with:
extends layout
block content
and then rest of the pug code for that view.
I have one view, that is map which inherits from layout but then also has children on it's own.
So the hierarchy is
layout --> map --> content
Locally I have no problem rendering as follows:
router.get('/', function(req, res, next) {
res.render('content');
});
and having the map displaying as well.
When uploading on Heroku however, heroku displays content AND layoutbut not the map!
Even if content starts with
extends map
block content
Does anyone know why heroku does that?
try renaming the content of the map page as mapcontent or similar.
I am starting developing with Sailsjs and I would like to know how to divide a webpage into differents blocks.
for example :
in layout.jade i have
doctype html
html(lang="fr")
head
body
div(class='container')
div(class='row')
div(class='col-md-12')
block header
h1 header
div(class='row')
div(class='col-md-8')
block content
div(class='col-md-4')
block right
block footer
then in my controller1/index.jade i have
extends layout
append content
p
some content
So when I type http://myserver.com/controller1/index in the browser, it works.
How to append some code in the block right form the result of another controller ? (I don't want to append some code to the block right directly in the controller1/index.jade file, to make the file as shorter as possible).
So I guess we can call another method of the controller inside the jade file ?
For example i would like to put a code like :
append right
=call('controller2/action1')
at the end of the controller1/index.jade file.
The purpose of my question is to figure out how divide the html parts of a webpage like we can do it with php using include method (for example).
Thank you
Benjamin
I'd like to pass the name of a template file to my jade template and have it expand that template. I'm using node and express.
html
div(id="content")
extend #(content}
seems intuitive to me but it doesn't work. Is this possible and/or is there an alternative pattern to better achieve this?
After rethinking the pattern (I'm brand new to express and node), I realized a better solution. What I've done is taken the content (which was all static) and included it in block statements in multiple template files. I then serve those template files based on the route.
Say I have a layout page that has header and footer and multiple views: index, search, and getting started.
//layout.jade
html
head
block extra_headers
body
div(id="header")
div(id="content")
block content
div(id="footer")
//index.jade
html
block head
script(src="sss.js")
block content
| welcome to my home page
//results.jade
html
block head
script(src="search.js")
block content
| my search results
And so on with 'getting started'. My node code then looks like this:
app.get('/', function(res, req) {
return res.render('index'); // renders the index view.
});