CODEWITHSUNDEEP
node.jsexpressrenderingpug
darewreck
darewreck

Reputation: 2614

Issue with Rendering templates with jade, express, and node.js

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:

  1. User comes on and loads the site. They see the initial index page
  2. User clicks on the form which triggers an action that calls the Rest Api getReports
  3. 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

Upvotes: 0

Views: 766

Answers (1)

Ravi
Ravi

Reputation: 1360

Here are some pointers that might help you,

  1. In res.render("child.jade");, don't include extension of the jade file, .jade. Just res.render("child"); will work.

  2. 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

Upvotes: 1

Related Questions