Jade - Unexpected Identifier - node.js

I use the following NodeJS route:
server.get('/', function(req, res) {
res.render('index');
});
it seems that I have an error in my index.jade file, since it tells me:
SyntaxError: Unexpected identifier
at Object.Function (unknown source)
at Object.compile (/media/Data/development/private/PicoBudget/node_modules/jade/lib/jade.js:160:8)
at Function.compile (/media/Data/development/private/PicoBudget/node_modules/express/lib/view.js:68:33)
at ServerResponse._render (/media/Data/development/private/PicoBudget/node_modules/express/lib/view.js:417:18)
at ServerResponse.render (/media/Data/development/private/PicoBudget/node_modules/express/lib/view.js:318:17)
at /media/Data/development/private/PicoBudget/app.js:51:7
at callbacks (/media/Data/development/private/PicoBudget/node_modules/express/lib/router/index.js:272:11)
at param (/media/Data/development/private/PicoBudget/node_modules/express/lib/router/index.js:246:11)
at pass (/media/Data/development/private/PicoBudget/node_modules/express/lib/router/index.js:253:5)
at Router._dispatch (/media/Data/development/private/PicoBudget/node_modules/express/lib/router/index.js:280:5)
Here's my index.jade:
doctype 5
html(lang="en")
head
title= PicoBudget - Expense tracking tool
link(href='bootstrap/css/bootstrap.css', rel='stylesheet')
style(type='text/css')
body {
padding-top: 100px;
padding-bottom: 40px;
}
link(href='bootstrap/css/bootstrap-responsive.css', rel='stylesheet')
link(href='css/main.css', rel='stylesheet')
script(type='text/javascript')
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
body
header
nav
div(class='navbar navbar-fixed-top')
div(class='navbar-inner')
div(class='container')
a(class='btn btn-navbar', data-toggle='collapse', data-target='.nav-collapse')
span(class='icon-bar')
span(class='icon-bar')
span(class='icon-bar')
a(class='brand', href='http://localhost:1337) PicoBudget
div(class='nav-collapse')
ul(class='nav')
li(class='active')
a(href='http://localhost:1337) Home
li
a(href='http://localhost:1337/login) Register
li
a(href='http://localhost:1337/faq) FAQ
li
a(href='http://localhost:1337/about) About
li
a(href='http://localhost:1337/dashboard) Dashboard
form(class='form-inline pull-right, action='http://localhost:1337/authenticated', method='POST')
input(type='text', class='input-small', placeholder='Email' name='emailInput'
input(type='password', class='input-small', placeholder='Password', name='passwordInput')
label(class='checkbox')
input(type='checkbox')
Remember me
button(type='submit', class='btn')
Sign in
div(class='container')
section#content
div(class='hero-unit')
h1 Easily manage your money
p
Ever wondered where your money goes? What do you spend the most money on? PicoBudget is a simple tool which features transactions, budgeting and reporting. Using Basic PicoBudget is absolutely free. If you enjoy it, though, you can get even more features with PicoBudget Premium!
p
Currently PicoBudget is under construction. Feel free to come back to check it out when it launched!
div(class='row')
div(class='span4')
h2 Introduction
p
What is PicoBudget? Who is it for? Why should you use it?
p
a(class='btn', href='http://localhost:1337/introduction')
Read more »
div(class='span4')
h2 FAQ
p
We listed the frequently asked questions. It should cover most of your questions.
p
a(class='btn', href='http://localhost:1337/faq')
View FAQ »
div(class='span4')
h2 Premium
p
With a premium account you get even more features. It already starts from 0.00!
p
a(class='btn', href='http://localhost:1337/premium')
Read more »
hr
footer
p
© PicoBudget.com 2012
script(src='bootstrap/js/bootstrap.js')
script(src='js/libs/jquery-1.7.2.js')

I fixed it:
Fixed all of the missing '
Removed the = after title (line 4)

Related

Resource was blocked due to MIME type mismatch using pug and node

I'm trying to render a view with an id in the url:
router.get('/employee', authController.protect, viewsController.getOverviewEmployee);
router.get('/employee/:id', authController.protect, viewsController.getOneEmployee);
The /employee works fine, but when I get to the /employee/:id page the css and scripts won't load and the console shows me this error:
The resource from
“http://127.0.0.1:3000/employee/lib/bootstrap/css/bootstrapmin.css”
was blocked due to MIME type (“application/json”) mismatch
(X-Content-Type-Options: nosniff).
this is my index.pug header:
doctype html
head
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1.0')
meta(name='description' content='')
meta(name='author' content='Dashboard')
meta(name='keyword' content='Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina')
title Admin
// Favicons
link(href='img/favicon.png' rel='icon')
link(href='img/apple-touch-icon.png' rel='apple-touch-icon')
// Bootstrap core CSS
link(href='lib/bootstrap/css/bootstrap.min.css' rel='stylesheet')
link(rel='stylesheet', type='text/css', href='lib/bootstrap-fileupload/bootstrap-fileupload.css')
// external css
link(href='lib/font-awesome/css/font-awesome.css' rel='stylesheet')
// Custom styles for this template
link(href='dashcss/style.css' rel='stylesheet')
link(href='dashcss/style-responsive.css' rel='stylesheet')
getOneEmployee:
exports.getOneEmployee = catchAsync(async (req, res, next) => {
const employee = await Employees.findById(req.params.id);
if (!employee) {
return next(new AppError('No document found with that ID', 404));
}
res.status(200).render('admin/employeeManager',{
title: 'Employee',
employee
});
});
and the employeeManager.pug
extends index
block content
section#container
MAIN CONTENT
// main content start
section#main-content
section.wrapper
h3
i.fa.fa-angle-right
| Editar Colaborador
.row.mt
.col-lg-12
h4
.form-panel
.form
form.cmxform.form-horizontal.style-form#commentForm(method='get' action)
.form-group
label.control-label.col-lg-2(for='cname') Nome*
.col-lg-10
input.form-control#cname(name='name' minlength='2' type='text' required)
.form-group
label.control-label.col-lg-2(for='cphone') Telefone*
.col-lg-10
input.form-control#cemail(type='cphone' name='phone' required)
.form-group
label.control-label.col-lg-2(for='cdescription') Descrição*
.col-lg-10
input.form-control#curl(type='description' name='description' required)
.form-group
label.control-label.col-lg-2(for='ccomment') Your Comment (required)
.col-lg-10
textarea.form-control#ccomment(name='comment' required)
.form-group
label.control-label.col-md-3 Image Upload
.col-md-9
.fileupload.fileupload-new(data-provides='fileupload')
.fileupload-new.thumbnail(style='width: 200px; height: 150px;')
img(src='http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image', alt='')
.fileupload-preview.fileupload-exists.thumbnail(style='max-width: 200px; max-height: 150px; line-height: 20px;')
div
span.btn.btn-theme02.btn-file
span.fileupload-new
i.fa.fa-paperclip
| Select image
span.fileupload-exists
i.fa.fa-undo
| Change
input.default(type='file')
a.btn.btn-theme04.fileupload-exists(href='', data-dismiss='fileupload')
i.fa.fa-trash-o
| Remove
span.label.label-info NOTE!
span
| Attached image thumbnail is
| supported in Latest Firefox, Chrome, Opera,
| Safari and Internet Explorer 10 only
.form-group
.col-lg-offset-2.col-lg-10
button.btn.btn-theme(type='submit') Salvar
|
button.btn.btn-theme04(type='button') Cancelar
This is because you are using relative url's in your attributes.
Replace this:
link(href='img/favicon.png' rel='icon')
With this:
link(href='/img/favicon.png' rel='icon')
To explain this further, when you are viewing /employee then the relative link at img/123.jpg is correctly resolved as /img/123.jpg. However, as soon as you go to the url /employee/joeblow then the relative link is looking for /employee/img/123.jpg. You'll be able to confirm this by opening Developer Tools in your browser then looking at the requests made in the Network tab.
Adding the slash at the front of all img elements will ensure that they look for the images in the correct folder, the one off the root (/).
The bootstrap mime-type error must be coming from one of the libraries that is loading correctly but not finding a dependency due to the issue described above.

Display paragraph in Jade template

I have started working on a sample NodeJS / Express web application ,
and I am using Jade template engine.
Below is the partial .jade code for one of the screens.
html
head
script(src='/js/bootstrap.min.js')
script(src='/angular/angular.min.js')
link(href='/css/bootstrap.css' , rel='stylesheet')
body
div(class='container')
p= error
My intention is to have "p" element within the div
<div class='container'>
<p>Error message comes here.. </p>
</div>
But what is happing is "p" element is after div
<div class='container'>
</div>
<p>Error message comes here.. </p>
Please let me know what needs to be modified so that "p" is within div.
Your code may be indented in the wrong way. Try this:
html
head
script(src='/js/bootstrap.min.js')
script(src='/angular/angular.min.js')
link(href='/css/bootstrap.css',rel='stylesheet')
body
.container
p=error
Copied the jade code and seems you indented unevenly. Try this :
html
head
script(src='/js/bootstrap.min.js')
script(src='/angular/angular.min.js')
link(href='/css/bootstrap.css' , rel='stylesheet')
body
.container
p error
This worked for me
div.container
p= error

How to include scripts with node/express/jade?

I am building a MEAN stack application using Jade but I can't get any of my script tag links to work. The link tags work fine. I have tried absolute and relative links and about 5 other solutions that were posted on questions (most of them are a few years old) here on stack overflow but none of them have worked.
Here is the relevant code in my project:
(header.jade)
link(href='libraries/normalize-css/normalize.css', rel='stylesheet')
link(href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css', rel='stylesheet')
link(href='custom.css', rel='stylesheet')
script(src='https://code.angularjs.org/1.4.7/angular.min.js')
script(src='/js/app.js')
(an example of where I want to use angular)
extends userBase
block vars
- var title = 'Login'
block body
h1.love love love
div(ng-controller='ChoiceCtrl')
form(method="post", role="form", style="width:90%; margin: 5px auto;", class="form-horizontal")
input(type='hidden', name='_csrf', value=csrfToken)
div.form-group
label(for="question") Ask your question:
input(type="text", name="question", required=true, class="form-control", id="question", placeholder='Which team will win the super bowl this year...?')
br
ul.list-group
li.list-group-item(ng-repeat="choice in choices")
span {{ 2+2 }}
div.form-group
label(for="responses") Choose Response Options:
.input-group
input(type="text", name="response", class="form-control", id="responses", ng-model='choiceBody')
span.input-group-btn
input(type="submit", class='btn btn-primary', value='Add', ng-click='addChoice()')
input(type="submit", class='btn btn-primary', value='Create Poll')
Also, in the server.js file the routing for static files works fine so I am not sure where the problem is.
The rest of the code is here on github: https://github.com/gwenf/votenow
I figured it out! I was forgetting to include a script tag for angular's ui-router. I put the script tag after the one for angular:
link(href='libraries/normalize-css/normalize.css', rel='stylesheet')
link(href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css', rel='stylesheet')
link(href='custom.css', rel='stylesheet')
script(src='libraries/angular/angular.js')
script(src='libraries/angular-ui-router/angular-ui-router.js')
script(src='/js/app.js')
and then I included it in my app.js:
var myApp = angular.module('myApp', ['ui.router']);

Express & Jade - max Block Nesting

i use Express 3x + Jade + bootstrap +..etc
my block/extend structure looks like this
.layout.jade (only head stuff)
.topNav.jade (only top nav)
.sideNav.jade (sideNav and control center interface)
.slidePrem.jade (the actual content)
now i try to res render slidePrem
-> this renders sidenav, topnav, layout (so the "extends" statement is read out of slideprem)
but it wont show any content of slidePrem
so after many many hours of recoding, searching, reintending, etc
. i rewrote structure to slideprem -> sidenav -> layout
-> this renders slideprem, sidenav, layout
->>> So is there actually a limit of nested blocks?
-> is it editable?
-> or cld u imagine the error somewhere else?
regards Pika
Edit:
//slidePrem.jade//
extends ../sideNav
block wall
#bla (or alert or sth)
//sideNav.jade//
extends topNav
block content
#subHeader
#subHeadNav
#Content //doesnt conflict with "block content"
div.container
div.row
div.span9
block wall
div.span3
// further code
//topNav.jade//
extends layout
block navigation
div.topnav.....
div...
...
block content
#modal
//layout.jade//
doctype 5
html
head
title= title
<meta name="viewport" content="width=device-width, initial-scale=1.0">
link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Titillium+Web&subset=latin,latin-ext', type='text/css')
link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css', media="screen")
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/cCenter.css')
script(src='/javascripts/jq.js')
script(src='/bootstrap/js/bootstrap.min.js')
script(src='/javascripts/core.js')
script(src='/javascripts/ajax.js')
body
block navigation
You should try to work with includes instead of extends.
So you can try for your layout.jade :
html
head
(...)
body
block navigation
And in your navigation.jade block
extends layout
block navigation
.topnav (div aren't required in jade)
(...)
include content
Your content.jade only needs then
#subHeader
#subHeadNav
#Content //doesnt conflict with "block content"
div.container
div.row
div.span9
include wall
div.span3
If that's not clear enough, you can find all the include documentation on the GitHub page of the project.
I hope it'll help.

Express, jade layout file rendering body but not rendering head

My problem is with my jade layout file not rendering correctly. The body is rendered but the head tags in the produced html are empty. I have tried to render the layout.jade file separately and it works perfectly.
Here is my layout.jade file
!!!
html
head
title= title
link(rel='stylesheet', href='stylesheets/style.css')
script(type='text/javascript', src='javascripts/jquery-1.7.2.js')
link(rel='stylesheet', href='stylesheets/pictogram-button.css')
body
header(style='padding-bottom:50px;')
include partials/header
section(style='min-height:600px;')
div!= body
footer.footer
include partials/footer
And here is my index.jade file
.line_h100t
.column_wrap800
.round_box1_w800
.list_fl10
ul.line_h40
li(style='margin-left:20px;')
ul
li
img(src='/images/icon/whiteWithoutCircle/check.png')
img(src='/images/login/loginTxt.png')
ul.line_h40t
li(style='margin-left:50px;')
p 로그인이 필요하신 분은
p Oopa Roopa 관리팀으로 문의해 주세요!
li(style='border-left:1px solid #999; padding:0 0 0 20px;')
ul
li
span.text_yellow ID
ul
li
input.login_input(type='text')
ul.line_h35t
li
span.text_yellow PASSWORD
ul
li
input.login_input(type='password')
li
ul.line_h10t
a.button-bevel.transparency(href='#')
.line_h35
span.lock
p(style='width:100px;') LOGIN
And here is the function in my express app that renders the index file.
adminLogin : function (req,res) {
res.render( 'index', {
title: 'Admin Login',
pageCategory: 'Admin Login',
pageName : 'index'
});
},
Thank you in advance for any help you an give me.
In express 3, layouts were removed in favor of template inheritance as explained here. The jade readme describes how this works, and an additional example is here.
You will need to replace div!= body with block body (or similar). Then at the top of index.jade, you'll want to add extends layout. Finally put the contents of index.jade under a block body (or whatever name you used in layout.jade).

Resources