I'm stuck in rendering templates using express and handlebars - node.js

Question

Please, explain me, why my code does not work?
I'm using express width handlebars, for form submit using Jquery Ajax. First render works properly, but second does not. I think that the problem is in nesting 'res.render'. Hope on your answers :-)
app.js
var express = require('express');
var app = express();
var template = require('consolidate');
var handlebars = require('handlebars');
var bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({extended: false}));
app.engine('hbs', template.handlebars);
app.set('view engine', 'hbs');
app.set('views', __dirname);
app.get('/', function(req, res) {
res.render('index', {
myName: 'John'
});
});
app.post('/', function(req, res) {
var obj = {surname: req.body.surname, age: req.body.age};
res.render('Layout.hbs', obj, function(err, html) {
if(err) {
console.log(err);
} else {
console.log(html);
res.render('index.hbs', {
content: html
})
}
}
);
});
app.listen(8080, function() {
console.log('App listening on 8080');
});
index.hbs
<div class="wrapper">
<div class="container">
<p>{{myName}}</p>
</div>
<form action="" name="form" id="form" method="post">
<input id="surname" type="text" name="surname" placeholder="surname"><br/>
<input id="age" type="text" name="age" placeholder="age"><br/>
<input type="submit">
</form>
{{{content}}}
</div>
<script type="text/javascript">
$(document).ready(function() {
$('form').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var surname = form.find('#surname').val();
var age = form.find('#age').val();
$.ajax({
type: 'POST',
data: {surname: surname, age: age},
success: function(res) {
console.log('Success');
},
error: function(err) {
console.log(err);
}
});
});
});
</script>
Layout.hbs
<div class="inner-container">
<h1>{{surname}}</h1>
<h2>{{age}}</h2>
<p>Render</p>
</div>

Answer 1

I think you are right, the problem is with nested res.render. When you call res.render, it renders a html and sends it to the client with a status code of 200.
You can call app.render on root level and res.render only inside a route/middleware. But keep in mind, res.render uses app.render internally to render template files. I don't think there is any need of rendering template separately.
Hope the answer helps you. It would be better for me to answer if I could see the error log that you are getting. If you provide that I would change my answer accordingly.

Answer 2

I think issue with binding delegation event with on() method..
$('form').on('submit', function(e) {
Replace it by
$(document).on('submit','form', function(e)){