I'm currently working through some Node.js ExpressJS and MongoDB and have hit a snag with the Jade. I keep getting an input is self closing and should not have content error when I go to my newuser page. I've checked everything on this site, been through the jade-lang docs and have come up short, could really use some guidance with this Jade shenanigans. Thanks everyone!!
Here is my code:
extends layout
block content
h1= title
form#formAddUser(name="adduser",method="post",action="/adduser")
input#inputUserName(type="text", placeholder="username", name="username")
input#inputUserEmail(type="text", placeholder="useremail", name="useremail")
button#btnSubmit(type="submit", value="submit")
And here is my error message:
/home/evan/dev/nodetest1/views/newuser.jade:7 5| //- h1= title 6| form#formAddUser(name="adduser",method="post",action="/adduser") > 7| input#inputUserName(type="text", placeholder="username", name="username") 8| input#inputUserEmail(type="text", placeholder="useremail", name="useremail") 9| button#btnSubmit(type="submit", value="submit") 10| input is self closing and should not have content.
The error says exactly what the problem is, but unless you know how to translate it, that doesn't mean it's easy to understand :D
input#inputUserName(type="text", placeholder="username", name="username")
input#inputUserEmail(type="text", placeholder="useremail", name="useremail")
button#btnSubmit(type="submit", value="submit")
will try to put #inputUserEmail inside #inputUserName and #btnSubmit inside #inputUserEmail because of the indentation. It should just be
input#inputUserName(type="text", placeholder="username", name="username")
input#inputUserEmail(type="text", placeholder="useremail", name="useremail")
button#btnSubmit(type="submit", value="submit")
This is because in HTML, <input> elements do not have children, so the nesting is not allowed.
Related
I am doing the Wes-bos Learn node course.I am on the part of saving stores and using mixins. When I write mixins and run my app it gives this error.
Error: C:\Users\ATUL\Downloads\Learn-Node-master\Learn-Node-master\starter-files\views\mixins\_storeForm.pug:1:1
> 1| mixin storeForm(store = {})
-------^
2| form(action="/add" method="POST" enctype = "multipart/form-data" class="card")
3| label(for="name") name
4| input(type="text" name="name")
Mixin storeForm declared without body
at makeError (C:\Users\ATUL\Downloads\Learn-Node-master\Learn-Node-master\starter-files\node_modules\pug-error\index.js:32:13)
at Parser.error (C:\Users\ATUL\Downloads\Learn-Node-master\Learn-Node-master\starter-files\node_modules\pug-parser\index.js:53:15)
at Parser.parseMixin (C:\Users\ATUL\Downloads\Learn-Node-master\Learn-Node-master\starter-files\node_modules\pug-parser\index.js:871:12)
at Parser.parseExpr (C:\Users\ATUL\Downloads\Learn-Node-master\Learn-Node-master\starter-files\node_modules\pug-parser\index.js:204:21)
This is the file in Mixins (_storeForm.pug)
mixin storeForm(store = {})
form(action="/add" method="POST" enctype = "multipart/form-data" class="card")
label(for="name") name
input(type="text" name="name")
This is the file in views folder
extends layout
include mixins/_storeForm
block content
.inner
h2= title
+storeForm({name:'dkjd'})
I am new to nodejs/pug/express. What is wrong with this code. This code in the given video works fine but not on my desktop.
Inside your mixin storeForm, you need to indent form and its children once more. Like so:
mixin storeForm(store = {})
form(action="/add" method="POST" enctype = "multipart/form-data" class="card")
label(for="name") name
input(type="text" name="name")
I am getting this error I am trying to get the href to be /sendnotify/room.roomNumber.
Error: /root/13h31762/views/classmanager.jade:14
12| -var roomurl = "/sendnotify/"+ room.roomNumber;
13| li your Classes --->
> 14| a(href=roomurl, class='roomlink')#{room.roomName}
15|
16|
Unexpected token `interpolation` expected `text`, `code`, `:`, `newline` or `eos`
I have no clue why. My jade view is included below
extends layout
block content
div.container
div.row
div.col-sm-6.col-md-4.col-md-offset-4
#user
h1.text-center.login-title Welcome #{user.firstName}. Check your details below:
div.signup-wall
ul.user-details
each room in user.room
-var roomurl = "/sendnotify/"+ room.roomNumber;
li your Classes --->
a(href=roomurl, class='roomlink')#{room.roomName}
Try adding a space before your variable for roomname:
a(href=roomurl, class='roomlink') #{room.roomName}
Or since you only have the variable in the a-tag you can use:
a(href=roomurl, class='roomlink')= room.roomName
Running through this useful walkthrough for Node.js authentication with Passport, but utilising Jade templating rather than ejs. When actually running the app, the correct values are displayed in the HTML, but it annoys me that command-line jade complains. Any ideas why?
Here is the calling code:
exports.myAccount = function (req, res) {
res.render('myAccount', {
title: 'Welcome back.',
user: req.user
})
};
... and a snippet of the Jade file (myAccount.jade) :
div.row
div.col-sm-6
div.well
h3
span(class="fa fa-user")
| Local
p
strong id
| : #{user._id}
br
strong Username
| : #{user.local.username}
Finally, the error when running Jade is:
TypeError: myAccount.jade:22
20| p
21| strong id
> 22| | : #{user._id}
23| br
24| strong Username
25| | : #{user.local.username}
Cannot read property '_id' of undefined
at eval (eval at <anonymous> (..../lib/jade.js:172:8), <anonymous>:138:49)
As already mentioned, the values do actually render, so how do I get Jade to quit complaining??
adv-THANKS-ance
The short answer: provide some data on the command line so jade can properly render your string interpolation expressions such as #{user._id}.
jade --obj '{"user": {"_id": "42", "local": {"username": "bob"}}}' myAccount.jade
Explanation: Jade takes 2 things as input: some jade syntax plus some data. In your app, the data is provided by your code taking req.user, etc, so jade has what it needs to render the template to HTML. On the command line, there's no data there, so you have to provide it as I've done above.
Bonus Tip: There's more concise ways to express your template without so many pipes:
div.row
div.col-sm-6
div.well
h3
span.fa.fa-user Local
p
strong= "id: #{user._id}"
br
strong= "Username: #{user.local.username}"
I am trying to run sparkleshare-dashboard which is an open source. Up till now i got many errors because i have no fimiliarity with the technology used in it. So, this time when i run app.js from command prompt using node command i got this error.
Warning: missing space before text for line 20 of jade file "D:\Imports\sparkles
hare-dashboard/views/createFirstUser.jade"
Error: D:\Imports\sparkleshare-dashboard/views/createFirstUser.jade:21
19| script(type="text/javascript")
20| $("#login").focus(function()
{
> 21| $("#loginlabel").fadeOut();
22| });
23| $("#login").blur(function() {
24| if ($("#login").val().length == 0) {
unexpected token "indent"
at Parser.parseExpr (D:\Imports\sparkleshare-dashboard\node_modules\jade\lib
\parser.js:229:15)
at Parser.block (D:\Imports\sparkleshare-dashboard\node_modules\jade\lib\par
ser.js:689:25)
at Parser.tag (D:\Imports\sparkleshare-dashboard\node_modules\jade\lib\parse
r.js:806:26)
at Parser.parseTag (D:\Imports\sparkleshare-dashboard\node_modules\jade\lib\
parser.js:719:17)
at Parser.parseExpr (D:\Imports\sparkleshare-dashboard\node_modules\jade\lib
\parser.js:188:21)
at Parser.block (D:\Imports\sparkleshare-dashboard\node_modules\jade\lib\par
ser.js:689:25)
at Parser.tag (D:\Imports\sparkleshare-dashboard\node_modules\jade\lib\parse
r.js:806:26)
at Parser.parseTag (D:\Imports\sparkleshare-dashboard\node_modules\jade\lib\
parser.js:719:17)
at Parser.parseExpr (D:\Imports\sparkleshare-dashboard\node_modules\jade\lib
\parser.js:188:21)
at Parser.parseExpr (D:\Imports\sparkleshare-dashboard\node_modules\jade\lib
\parser.js:227:21)
You have a syntax error in your code, you simply missed a dot and this causes another error, see my fixed example at the end:
script(type="text/javascript")
$("#login").focus(function(){
$("#loginlabel").fadeOut();
});
will prompt an Unexpected token "indent" error. Because Jade sees your $("#loginlabel").fadeOut(); as another line of code and this line has, for Jade, a wrong indentation.
Generally this "indent" errors are always pointing, in the end, to a wrong indentation.
So to get rid of this error, just add a dot at the end of the script tag and make clear thats a hole part oft none Jade code is following, like:
script(type="text/javascript").
$("#login").focus(function() {
$("#loginlabel").fadeOut();
});
This (see that dot) will give you the following HTML output:
<script type="text/javascript">
$("#login").focus(function() {
$("#loginlabel").fadeOut();
});
</script>
The correct syntax is:
script.
document.location = "https://google.com"
This is my configuration file.
docpadConfig = {
templateData:
site:
title: 'hello docpad'
getTitle: ->
#site.title
getString: ->
'just a string'
}
# Export the DocPad Configuration
module.exports = docpadConfig
From a jade layout when I do title= site.title it renders ok. When I try to call the helper function title= getTitle() the console outputs this:
error: An error occured:
ReferenceError: /Volumes/Data/project/am/lab/docpad/hello_docpad/src/layouts/default.html.jade:21
19|
20| //- Our site title and description
> 21| title= getTitle()
22|
23| //- Output DocPad produced meta elements
24| != getBlock('meta').toHTML()
site is not defined
at docpadConfig.templateData.getWat (/Volumes/Data/project/am/lab/docpad/hello_docpad/docpad.coffee:10:16)
at eval (eval at <anonymous> (/Volumes/Data/project/am/lab/docpad/hello_docpad/node_modules/docpad-plugin-jade/node_modules/jade/lib/jade.js:170:8), <anonymous>:47:64)
Looks like I can't access the site object from inside the helper function.
I'm sure I'm missing something trivial, maybe a plugin is needed for this... can't find out "wat" is wrong here.
I've found the solution looking into a similar issue in a docpad skeleton. This relates to a bug in the Jade pre-processor.
Update to "docpad-plugin-jade": "~2.4.1" fixes the issue.