For example, I have a pug view 'VIEW.pug', it contains two parts
part A: with some data
part B: empty
after request a GET from express/node, I would like to keep part A's data and refresh part B with new data by using the res.render('VIEW', {xxx}) function.
So how can I make this happen? Once I render VIEW.pug, though I refresh part B with the correct data, but the data in part A are gone.
I wanna both of part A and part B have data, A with old existing data, and B with new data.
create a layout.pug file :
html
head
title My Site - #{title}
block scripts
script(src='/jquery.js')
body
block content
now create a file with partA.pug , which extends layout file :
-extends layout.pug
block content
h1= PART A
now use include to include partB in partA file
include includes/partB.pug
your partB.pug should be rendered based on condition
#partB
- if(section=== 'DEMO-1') {
| <p>DEMO 1</p>
- }
- if(section === 'DEMO-2') {
| <p>DEMO 2</p>
- }
app.js
var express=require('express');
let app = express();
app.set("view engine", "pug");
app.set("views", path.join(__dirname, "views"));
app.get('/demo1',function(req,res){
return res.render("partA",{section:'DEMO-1'});
});
app.get('/demo2',function(req,res){
return res.render("partA",{section:'DEMO-2'});
});
Related
I am new to the ExpressJS and Jade game, as like today new. I can't figure out how to render data into a div identified by its id attribute. Here is my sample Jade file:
extends layout
block content
div
h1= title
div(id="content", class="main")
I want to pass the data into the div with id Content. Here is the snippet of my ExpressJS file:
...
router.get('/', function(req, res, next) {
res.render('index', { title: 'Hello World!' });
res.render('index', { content: 'Wazzzaaapp' });
});
...
I'm able to display the title Hello world but not the Wazzzaaapp.
Sample screenshot of what I got:
Is this possible to do in render or am I missing something?
I'm not sure if this is the correct or actual answer, but I got it solved by adding (in the Jade/ Pug file of course) either the placeholder #{var_name} or = var_name as:
div(id="content", class="main")= content
OR
div(id="content", class="main") #{content}
either one works and shows the Wazzzaaapp output as intended:
Hope this solution helps others!
Here, I have use.js and use.jade.
In use.js, I am simply mapping hardcoded image variable img_01 from jade to use.js by specifying var $image= $(pclass + 'img_01');
In .js, I am assigning $image by some useful image using
$image.attr('src', useful_image)
Using img.use--img_01 in .jade, I am able to display the image (useful_image).
Now, my constraint is I don't want to hard code in .jade and let .jade display images as many as provided by .js.
So, I am able to create the array in .js of var $image=[] and then $image.push($(pclass + 'img_' + N.toString()) where N varies from 0 to K (lets say K =3).
Now I want to call these img_0, img_1, img_2 .....img_K in .jade and display them on page.
So my specific question is I am not able to iterate [img_0, img_1, img_2 .....img_K] in .jade. Can anyone tell what could be best method to do so????
Pls note: I used rendering method. For the same I used
var express = require('express');
var app = express();
But, node.js gets crashed with this itself leave aside using app.get...
You can pass object from server to client in this way.
app.get(..., function (req, res) {
var stats = { ... };
res.render('chart', { images: $arrImage });
});
For looping at client ,you can use jade#each.
each oneImage in images
img( src=oneImage.image)
Note : Jade is depricated,So try to use Pug#each
I have a controller in Play Framework 1.3.x in which I have defined the following:
public static void plots(Long id) {
//... (Code goes here)
render(list); //Data to render
}
And then in a separate html file in the views folder I want to "display" the result from another html file. I'm trying to do it in the following way:
<script type="text/javascript">
setInterval(function() {
$.get("plots", id, function(${list}){ //I want to give the list needed by the file plots.html
$("#result").html(list); //And then in "result" show the plots obtained
})
}, 1000);
</script>
...
<span id="result"></span>
But it does not display anything at all. This plots file just needs this list and then does a plot with the data but I'm pretty sure I'm not writing code in the right way, I mean, I'm not giving the function the right syntaxis or parameters. Any ideas? Thanks!
PS: My routes file
# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~
# Home page
GET / Application.index
# Ignore favicon requests
GET /favicon.ico 404
# Map static resources from the /app/public folder to the /public path
GET /public/ staticDir:public
# Catch all
* /{controller}/{action} {controller}.{action}
you need to define route
GET /plots Application.plots(id:Long)
and
$.get("/plots", id, function(${list})
or according to your code
* /{controller}/{action} {controller}.{action}
use
$.get("Application/plots", id, function(${list}){ //Application is your controller name
but i will suggest to use first one
I've been developing a mean.js application. I have an admin theme that I'm trying to integrate with the existing application.
My question is
Can we have multiple Server Layouts, ? If the logged-in user is Regular User, use layout-1 if the user is Admin use layout-2
If we cannot have multiple server layout (I presume it isn't possible). Is there any way to detect the params or scope variable in the Angular Client App and dynamically load a partial inside the main Layout.
Let say I have an Index.html file, if the intended route is Dashboard, I just replace a section of the page view, ( Ruby on Rails Developers would know this)
UPDATE 1 :
I've created 2 files with my required Admin Index, and Layout files.
admin.index.server.view.html
and
admin.layout.server.view.html
I've also added the following code in my core.server.routes.js
module.exports = function(app) {
// Root routing
var core = require('../../app/controllers/core');
app.route('/').get(core.index);
app.route('/admin/').get(core.adminIndex);
};
I've also added the following code in my core.server.controller.js
exports.adminIndex = function(req, res) {
res.render('admin.index', {
user: req.user || null
});
};
and when I hit localhost:3000/admin/ I get Error: Cannot find module 'index'
Rename the two view files from admin.index.server.view.html and admin.layout.server.view.html to admin-index.server.view.html and admin-index.server.view.html respectively.
Also, change this line in your core.server.controller.js file;
res.render('admin.index', {
to this;
res.render('admin-index', {
I am using Node.js and ExpressJS 3.0. Moving to 3.0, I found that partials were no longer supported and subsequently found express-partials to provide similar functionality.
Looking at the example on the GitHub page, I find this:
app.get('/',function(req,res,next){
res.render('index.ejs')
// -> render layout.ejs with index.ejs as `body`.
})
This is fine, but what if I have a layout that depends on multiple partials? That is, what if I have a block in the layout.ejs file for the header, one for the content, and one for the footer? For example, what if I use one template file for the entire web application, but different kinds of users have different headers, content blocks, and footers?
Looking at the limited documentation of express-partials, I cannot find this functionality. I was expecting something like this:
app.get('/', function (req, res) {
res.render({header: 'header1.ejs', content: 'some_file.ejs', footer: 'footer1.ejs'});
// -> render layout.ejs with header1.ejs as `header`, some_file.ejs as `content, and footer.ejs as `footer
});
How can I achieve this functionality?
I'd suggest you to use ejs includes + switches
Sorry, I'm not familliar with ejs syntax, so – jade, but the essense is the same:
app.get('/', function (req, res) {
res.render('index', {
header: 'header1',
, content: 'content1',
, footer: 'footer1'
});
});
index.jade
===========
//- header
case header
when "header1":
include "includes/header1"
when "header2":
include "includes/header2"
...
case content
when "content1":
include "includes/some_file1"
when "content2":
include "includes/some_file2"
....