I am in a situation where I have one anchor tag in pug template: The href tag is getting its value at runtime. This code was working with Jade but as soon as I take it to pug, It stops working
a.more(href='/posts/show/#{post._id}') Read more
in the above syntax #{post._id} is suppose the bring the data at runtime but it is not working as expected.
Please help me on this.
Just got it resolved by using the following line
href="/posts/show/" + post._id
Its kind of weird that they stopped support for jade syntax in pug.
Related
I have a webpage that I have the JavaScript in a separate file from my HTML file. I have imported
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
in my HTML file but when I attempt to work in my js file to make some updates after a while away I get the following error
ERROR: '$' is not defined.[no-undef]
ERROR: 'document' is not defined. [no-undef]
Example where the above errors are references in my js code:
$(document).ready(function () {
$("#screenNum").hide();
...
}
The document Renders in the browser with no issues and the JS functions as designed and when I look at the developer tools in the browser there are no errors. I would like to get rid of these errors so that I can focus on actual errors.
It has been a couple years since I have worked on this document and I wanted to make some enhancements to it and am just now getting back to it. I do not recall this error when I last worked in it in Dreamweaver and do not know what I am missing.
All the similar questions I have looked at similar to this seem to deal with when the JavaScript is in the HTML document and not in a separate file.
Thank you, Tim Hunter, adding the below code worked perfectly.
/* global $, document*/
I'm currently following this Jade tutorial https://www.youtube.com/watch?v=l5AXcXAP4r8 (I know Jade is Pug now but I'm watching jade tutorials to get familiar with it since many don't exist for pug) and at 24:25 the instructor places an 'extends filename' in the middle of his index.jade file. This works fine for him but this does not work for me when executing with pug. I get an error in my terminal saying "Declaration of template inheritance ("extends") should be the first thing in the file." Is it not possible in pug to put an extends in the middle of a file and it used to be possible with jade? Is there any way to make it possible? Thank you in advance for your help!
This is not possible with pug. The error message is fairly clear, extendsmust be the first thing in the file, it cannot be placed in the middle. Without any code (or idea of what you're trying to achieve), it is difficult to tell if you could find a workaround for this (using mixins perhaps?).
I'm playing around with Node and Express and I'm using the Pug (formerly Jade) templating engine to render my html. Everything has been working fine up until I started trying to inject variables into the href of my anchor links. Whats odd is that if I change my Express app view engine to jade then things start working as expected.
Based upon other articles I've read the issue appears to be an interpolation issue, however I can't seem to find a resource or documentation that shows how to correctly fix this issue.
Ex.
I'm pulling in data from a rooms json array and then using a for loop to cycle through each array element and output the data for each room. Using jade the following works.
table.table.table-striped
thead
tr
th Name
th Id
tbody
each room in rooms
tr
td(style="width: 50px;")
a(href!="/admin/rooms/delete/#{room.id}") Delete
td #{allTitleCase(room.name)}
td #{room.id}
Using pug the above does NOT work correctly. Specifically the a(href='/admin/rooms/delete/#{room.id}') Delete link doesn't work correctly. Instead of injecting the room id into the link href, it literally outputs #{room.id} as the end part the href link.
Any ideas how to fix this in pug?
Note that I've tried all of the following using pug but none of these options have worked.
a(href="/admin/rooms/delete/#{room.id}") Delete
a(href!="/admin/rooms/delete/#{room.id}") Delete
UPDATE: Pug 2.0 introduced breaking changes to how interpolation is handled.
Based on the changelog, any of the following should work:
// to solve OP's problem, the following can be used:
a(href="/admin/rooms/delete/" + room.id) Delete
// Here are a few additional scenarios which use the new API
// for anyone stumbling across this answer in the future
- var href = "/admin/rooms/delete/" + room.id;
a(href=href)
a(href=`${href}`) // Node.js/io.js ≥ 1.0.0
a(href=href + '?foo=bar')
I am having a problem with gulp-jade: The Jade compiler always adds a value to HTML attributes without a value, which breaks my AngularJS setup. (e.g. div(ui-view) becomes <div ui-view="ui-view"> when I want <div ui-view>.
The problem does not occur with files that have a doctype html, but since I am mostly working with 'partials' that is no help.
I am running .pipe(jade()) without additional options. Apparently gulp-jade supports all Jade API options, listed here, but I do not see which one would apply here.
There is an undocumented doctype option. .pipe(jade({doctype: 'html'})) compiles the template under the HTML5 doctype
For those finding this page who use Grunt, I found that the following works with ui-view.
div(ui-view="")
I am using express and Jade. When i pass variable that contains a link i get undefined in front and at the end of the url. What is this problem and how can i solve it?
The same problem as here :
Express image upload and view in jade
but it's not answered there.
Jade code:
block content
h1= title
p Your photos
#photos
img(src=#{purl})
p #{photo.title}
Rendering code
res.render('./user/show', { title: 'photos',photo: photo, purl: purl)});
purl is the variable of the link which when i console log just above the render appears as should and the photo.title appears too normally.
UPDATE
It's a JADE problem as with EJS everything works great.... Guess for a small problem i'll have to switch.. If anyone comes up with a solution, you're welcome.
First off, before res.render() add a console.log(purl);
You want to rule out that the variable is not undefined before it even reaches the Jade template.
In your jade, your image src does not need #{} around the purl variable. Try this:
img(src=purl)
You only need #{} when you are inside a text string and want to refer to javascript varaibles.
If you really wanted to, it could be written as img(src='#{purl}')
Your paragraph could also be written as:
p= photo.title
Where the = means the following is interpreted as javascript. No need for #{}.
If you wanted to mix text with the photo title using #{} works like a charm.
p #{photo.title} lorem ipsum