How to change jade variable dynamically with JavaScript?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
For example in my file index.jade I have:
extends layout
block varScope
-var selected = 'Home';
-var isEmpty = 'false';
body
button(onclick='changeState()') Click
script.
function changeState(){
// change isEmpty variable here to true -- how to ?
}It is possible to setup my pug/jade variable with javascript?
If not, what alternatives do I have please?
javascript node.js pug
asked Nov 26 '18 at 23:50
Marek BernádMarek Bernád
358516
add a comment |
For example in my file index.jade I have:
extends layout
block varScope
-var selected = 'Home';
-var isEmpty = 'false';
body
button(onclick='changeState()') Click
script.
function changeState(){
// change isEmpty variable here to true -- how to ?
}It is possible to setup my pug/jade variable with javascript?
If not, what alternatives do I have please?
javascript node.js pug
asked Nov 26 '18 at 23:50
Marek BernádMarek Bernád
358516
add a comment |
For example in my file index.jade I have:
extends layout
block varScope
-var selected = 'Home';
-var isEmpty = 'false';
body
button(onclick='changeState()') Click
script.
function changeState(){
// change isEmpty variable here to true -- how to ?
}It is possible to setup my pug/jade variable with javascript?
If not, what alternatives do I have please?
javascript node.js pug
asked Nov 26 '18 at 23:50
Marek BernádMarek Bernád
358516
For example in my file index.jade I have:
extends layout
block varScope
-var selected = 'Home';
-var isEmpty = 'false';
body
button(onclick='changeState()') Click
script.
function changeState(){
// change isEmpty variable here to true -- how to ?
}It is possible to setup my pug/jade variable with javascript?
If not, what alternatives do I have please?
extends layout
block varScope
-var selected = 'Home';
-var isEmpty = 'false';
body
button(onclick='changeState()') Click
script.
function changeState(){
// change isEmpty variable here to true -- how to ?
}extends layout
block varScope
-var selected = 'Home';
-var isEmpty = 'false';
body
button(onclick='changeState()') Click
script.
function changeState(){
// change isEmpty variable here to true -- how to ?
}javascript node.js pug
javascript node.js pug
asked Nov 26 '18 at 23:50
Marek BernádMarek Bernád
358516
asked Nov 26 '18 at 23:50
Marek BernádMarek Bernád
358516
edited Nov 27 '18 at 0:51
Marek Bernád
asked Nov 26 '18 at 23:50
Marek BernádMarek Bernád
358516
asked Nov 26 '18 at 23:50
Marek BernádMarek Bernád
358516
asked Nov 26 '18 at 23:50
Marek BernádMarek Bernád
358516
358516
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
No, what you're asking to do here isn't possible. Pug is run on the server and JavaScript is run on the client in the browser. Once the pug template is rendered on the server that's it, there's no more pug in the process.
What you can do is preload the variable name using pug:
script.
var isEmpty = !{isEmpty};
function changeState(){
// change isEmpty variable here to true -- how to ?
}
Or if you have a more complex object you can stringify it before you pass it to the template:
script.
var user = !{user};
function changeUserName(){
user.name = ...
}
answered Nov 27 '18 at 2:41
GrahamGraham
3,902143860
yess this all I well know now.. ok, it is impossible then... I even tried localStorage, or pug preload functions ... but as you said, the client and server are too far viceversa... isn't there an option to do it somehow through routing? For example client JS will send parameters through URL to route which will set that pug variable after next load of that page? ... (I am trying to do FB login with GraphAPI , I have obtained successfully session token, but do not know how to change my pug menu items, how pug would know... I tried many tutorials with 12 hours working now but without success...)
– Marek Bernád
Nov 27 '18 at 2:56
I think you're trying to do advanced web development before you have the basics understood.
– Graham
Nov 27 '18 at 5:42
add a comment |
Well, we know that directly, it is impossible, but I found out a way how to do it with JS. I know that this is maybe not official and correct behavior and things like this could be done with for example facebook-passport, but for those who need quick tests and need save time with reading new SW module documentation, can do this:
As I mentioned in a comment, it is possible to make it with URL. In my server file app.js I need to configure my route, that will send to my same view (to pug/jade) my variable that is obtained through URL from javascript of the view page:
app.get('/home/user/:id', function(req, res) {
var id = req.params.id;
// do the DB or other stuff here
console.log('I received in the server user id from JS(FB GraphAPI): '+ id);
app.locals.isEmpty= id
res.redirect('/home');
});
app.get('/home', function(req, res) {
res.render('home', { isEmpty: app.locals.id }); // or if you want send anything
});
And I have this in my home.jade file:
extends layout
block varScope
-var selected = 'Home';
-var isEmpty = 'true'; // here will be setted variable from JS
body
button(onclick='changeState()') Click
script.
function changeState(){
window.location.assign("http://localhost:3000/home/user/34sfd")
}
Now in my home.jade I have my variable from JS:
-var isEmpty = 34sfd
The price for doing it like this is that in result the manual page refresh will occur.
For those, who were looking for sending this variable to extension jade/pug file (layout.jade), you even do not have to send it as object, you can easily pick it now from set of local variables:
-var isEmpty= locals.isEmpty
answered Nov 28 '18 at 14:18
Marek BernádMarek Bernád
358516
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490792%2fhow-to-change-jade-variable-dynamically-with-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
No, what you're asking to do here isn't possible. Pug is run on the server and JavaScript is run on the client in the browser. Once the pug template is rendered on the server that's it, there's no more pug in the process.
What you can do is preload the variable name using pug:
script.
var isEmpty = !{isEmpty};
function changeState(){
// change isEmpty variable here to true -- how to ?
}
Or if you have a more complex object you can stringify it before you pass it to the template:
script.
var user = !{user};
function changeUserName(){
user.name = ...
}
answered Nov 27 '18 at 2:41
GrahamGraham
3,902143860
yess this all I well know now.. ok, it is impossible then... I even tried localStorage, or pug preload functions ... but as you said, the client and server are too far viceversa... isn't there an option to do it somehow through routing? For example client JS will send parameters through URL to route which will set that pug variable after next load of that page? ... (I am trying to do FB login with GraphAPI , I have obtained successfully session token, but do not know how to change my pug menu items, how pug would know... I tried many tutorials with 12 hours working now but without success...)
– Marek Bernád
Nov 27 '18 at 2:56
I think you're trying to do advanced web development before you have the basics understood.
– Graham
Nov 27 '18 at 5:42
add a comment |
No, what you're asking to do here isn't possible. Pug is run on the server and JavaScript is run on the client in the browser. Once the pug template is rendered on the server that's it, there's no more pug in the process.
What you can do is preload the variable name using pug:
script.
var isEmpty = !{isEmpty};
function changeState(){
// change isEmpty variable here to true -- how to ?
}
Or if you have a more complex object you can stringify it before you pass it to the template:
script.
var user = !{user};
function changeUserName(){
user.name = ...
}
answered Nov 27 '18 at 2:41
GrahamGraham
3,902143860
yess this all I well know now.. ok, it is impossible then... I even tried localStorage, or pug preload functions ... but as you said, the client and server are too far viceversa... isn't there an option to do it somehow through routing? For example client JS will send parameters through URL to route which will set that pug variable after next load of that page? ... (I am trying to do FB login with GraphAPI , I have obtained successfully session token, but do not know how to change my pug menu items, how pug would know... I tried many tutorials with 12 hours working now but without success...)
– Marek Bernád
Nov 27 '18 at 2:56
I think you're trying to do advanced web development before you have the basics understood.
– Graham
Nov 27 '18 at 5:42
add a comment |
No, what you're asking to do here isn't possible. Pug is run on the server and JavaScript is run on the client in the browser. Once the pug template is rendered on the server that's it, there's no more pug in the process.
What you can do is preload the variable name using pug:
script.
var isEmpty = !{isEmpty};
function changeState(){
// change isEmpty variable here to true -- how to ?
}
Or if you have a more complex object you can stringify it before you pass it to the template:
script.
var user = !{user};
function changeUserName(){
user.name = ...
}
answered Nov 27 '18 at 2:41
GrahamGraham
3,902143860
No, what you're asking to do here isn't possible. Pug is run on the server and JavaScript is run on the client in the browser. Once the pug template is rendered on the server that's it, there's no more pug in the process.
What you can do is preload the variable name using pug:
script.
var isEmpty = !{isEmpty};
function changeState(){
// change isEmpty variable here to true -- how to ?
}
Or if you have a more complex object you can stringify it before you pass it to the template:
script.
var user = !{user};
function changeUserName(){
user.name = ...
}
answered Nov 27 '18 at 2:41
GrahamGraham
3,902143860
answered Nov 27 '18 at 2:41
GrahamGraham
3,902143860
answered Nov 27 '18 at 2:41
GrahamGraham
3,902143860
answered Nov 27 '18 at 2:41
GrahamGraham
3,902143860
3,902143860
yess this all I well know now.. ok, it is impossible then... I even tried localStorage, or pug preload functions ... but as you said, the client and server are too far viceversa... isn't there an option to do it somehow through routing? For example client JS will send parameters through URL to route which will set that pug variable after next load of that page? ... (I am trying to do FB login with GraphAPI , I have obtained successfully session token, but do not know how to change my pug menu items, how pug would know... I tried many tutorials with 12 hours working now but without success...)
– Marek Bernád
Nov 27 '18 at 2:56
I think you're trying to do advanced web development before you have the basics understood.
– Graham
Nov 27 '18 at 5:42
add a comment |
yess this all I well know now.. ok, it is impossible then... I even tried localStorage, or pug preload functions ... but as you said, the client and server are too far viceversa... isn't there an option to do it somehow through routing? For example client JS will send parameters through URL to route which will set that pug variable after next load of that page? ... (I am trying to do FB login with GraphAPI , I have obtained successfully session token, but do not know how to change my pug menu items, how pug would know... I tried many tutorials with 12 hours working now but without success...)
– Marek Bernád
Nov 27 '18 at 2:56
I think you're trying to do advanced web development before you have the basics understood.
– Graham
Nov 27 '18 at 5:42
yess this all I well know now.. ok, it is impossible then... I even tried localStorage, or pug preload functions ... but as you said, the client and server are too far viceversa... isn't there an option to do it somehow through routing? For example client JS will send parameters through URL to route which will set that pug variable after next load of that page? ... (I am trying to do FB login with GraphAPI , I have obtained successfully session token, but do not know how to change my pug menu items, how pug would know... I tried many tutorials with 12 hours working now but without success...)
– Marek Bernád
Nov 27 '18 at 2:56
yess this all I well know now.. ok, it is impossible then... I even tried localStorage, or pug preload functions ... but as you said, the client and server are too far viceversa... isn't there an option to do it somehow through routing? For example client JS will send parameters through URL to route which will set that pug variable after next load of that page? ... (I am trying to do FB login with GraphAPI , I have obtained successfully session token, but do not know how to change my pug menu items, how pug would know... I tried many tutorials with 12 hours working now but without success...)
– Marek Bernád
Nov 27 '18 at 2:56
I think you're trying to do advanced web development before you have the basics understood.
– Graham
Nov 27 '18 at 5:42
I think you're trying to do advanced web development before you have the basics understood.
– Graham
Nov 27 '18 at 5:42
add a comment |
Well, we know that directly, it is impossible, but I found out a way how to do it with JS. I know that this is maybe not official and correct behavior and things like this could be done with for example facebook-passport, but for those who need quick tests and need save time with reading new SW module documentation, can do this:
As I mentioned in a comment, it is possible to make it with URL. In my server file app.js I need to configure my route, that will send to my same view (to pug/jade) my variable that is obtained through URL from javascript of the view page:
app.get('/home/user/:id', function(req, res) {
var id = req.params.id;
// do the DB or other stuff here
console.log('I received in the server user id from JS(FB GraphAPI): '+ id);
app.locals.isEmpty= id
res.redirect('/home');
});
app.get('/home', function(req, res) {
res.render('home', { isEmpty: app.locals.id }); // or if you want send anything
});
And I have this in my home.jade file:
extends layout
block varScope
-var selected = 'Home';
-var isEmpty = 'true'; // here will be setted variable from JS
body
button(onclick='changeState()') Click
script.
function changeState(){
window.location.assign("http://localhost:3000/home/user/34sfd")
}
Now in my home.jade I have my variable from JS:
-var isEmpty = 34sfd
The price for doing it like this is that in result the manual page refresh will occur.
For those, who were looking for sending this variable to extension jade/pug file (layout.jade), you even do not have to send it as object, you can easily pick it now from set of local variables:
-var isEmpty= locals.isEmpty
answered Nov 28 '18 at 14:18
Marek BernádMarek Bernád
358516
add a comment |
Well, we know that directly, it is impossible, but I found out a way how to do it with JS. I know that this is maybe not official and correct behavior and things like this could be done with for example facebook-passport, but for those who need quick tests and need save time with reading new SW module documentation, can do this:
As I mentioned in a comment, it is possible to make it with URL. In my server file app.js I need to configure my route, that will send to my same view (to pug/jade) my variable that is obtained through URL from javascript of the view page:
app.get('/home/user/:id', function(req, res) {
var id = req.params.id;
// do the DB or other stuff here
console.log('I received in the server user id from JS(FB GraphAPI): '+ id);
app.locals.isEmpty= id
res.redirect('/home');
});
app.get('/home', function(req, res) {
res.render('home', { isEmpty: app.locals.id }); // or if you want send anything
});
And I have this in my home.jade file:
extends layout
block varScope
-var selected = 'Home';
-var isEmpty = 'true'; // here will be setted variable from JS
body
button(onclick='changeState()') Click
script.
function changeState(){
window.location.assign("http://localhost:3000/home/user/34sfd")
}
Now in my home.jade I have my variable from JS:
-var isEmpty = 34sfd
The price for doing it like this is that in result the manual page refresh will occur.
For those, who were looking for sending this variable to extension jade/pug file (layout.jade), you even do not have to send it as object, you can easily pick it now from set of local variables:
-var isEmpty= locals.isEmpty
answered Nov 28 '18 at 14:18
Marek BernádMarek Bernád
358516
add a comment |
Well, we know that directly, it is impossible, but I found out a way how to do it with JS. I know that this is maybe not official and correct behavior and things like this could be done with for example facebook-passport, but for those who need quick tests and need save time with reading new SW module documentation, can do this:
As I mentioned in a comment, it is possible to make it with URL. In my server file app.js I need to configure my route, that will send to my same view (to pug/jade) my variable that is obtained through URL from javascript of the view page:
app.get('/home/user/:id', function(req, res) {
var id = req.params.id;
// do the DB or other stuff here
console.log('I received in the server user id from JS(FB GraphAPI): '+ id);
app.locals.isEmpty= id
res.redirect('/home');
});
app.get('/home', function(req, res) {
res.render('home', { isEmpty: app.locals.id }); // or if you want send anything
});
And I have this in my home.jade file:
extends layout
block varScope
-var selected = 'Home';
-var isEmpty = 'true'; // here will be setted variable from JS
body
button(onclick='changeState()') Click
script.
function changeState(){
window.location.assign("http://localhost:3000/home/user/34sfd")
}
Now in my home.jade I have my variable from JS:
-var isEmpty = 34sfd
The price for doing it like this is that in result the manual page refresh will occur.
For those, who were looking for sending this variable to extension jade/pug file (layout.jade), you even do not have to send it as object, you can easily pick it now from set of local variables:
-var isEmpty= locals.isEmpty
answered Nov 28 '18 at 14:18
Marek BernádMarek Bernád
358516
Well, we know that directly, it is impossible, but I found out a way how to do it with JS. I know that this is maybe not official and correct behavior and things like this could be done with for example facebook-passport, but for those who need quick tests and need save time with reading new SW module documentation, can do this:
As I mentioned in a comment, it is possible to make it with URL. In my server file app.js I need to configure my route, that will send to my same view (to pug/jade) my variable that is obtained through URL from javascript of the view page:
app.get('/home/user/:id', function(req, res) {
var id = req.params.id;
// do the DB or other stuff here
console.log('I received in the server user id from JS(FB GraphAPI): '+ id);
app.locals.isEmpty= id
res.redirect('/home');
});
app.get('/home', function(req, res) {
res.render('home', { isEmpty: app.locals.id }); // or if you want send anything
});
And I have this in my home.jade file:
extends layout
block varScope
-var selected = 'Home';
-var isEmpty = 'true'; // here will be setted variable from JS
body
button(onclick='changeState()') Click
script.
function changeState(){
window.location.assign("http://localhost:3000/home/user/34sfd")
}
Now in my home.jade I have my variable from JS:
-var isEmpty = 34sfd
The price for doing it like this is that in result the manual page refresh will occur.
For those, who were looking for sending this variable to extension jade/pug file (layout.jade), you even do not have to send it as object, you can easily pick it now from set of local variables:
-var isEmpty= locals.isEmpty
answered Nov 28 '18 at 14:18
Marek BernádMarek Bernád
358516
edited Nov 28 '18 at 23:27
answered Nov 28 '18 at 14:18
Marek BernádMarek Bernád
358516
answered Nov 28 '18 at 14:18
Marek BernádMarek Bernád
358516
answered Nov 28 '18 at 14:18
Marek BernádMarek Bernád
358516
358516
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53490792%2fhow-to-change-jade-variable-dynamically-with-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
