jQuery pjax is not working on Express - javascript

I'm using expressjs framework and I want to enable jQuery pjax, everything is coded well, but it's not working in a pjax way yet!
I figured out that when I click on a link from /login to /signup for example: the logger give me this:
GET /signup?_pjax=%23content
GET /signup
It seems that the request is working multiple times!!!
This is the code that I'm using:
// main.js
$(document).pjax('a', '#content');
// app.js
app.get('/login', function(req, res) {
if (req.user) {
return res.redirect('/');
}
res.render('account/login', {
title: 'login page'
});
});
app.get('/signup', function(req, res) {
if (req.user) {
return res.redirect('/');
}
res.render('account/signup', {
title: 'signup page'
});
});
//layout.jade
body#content
block content
//login.jade
extends ../layout
block content
...etc
//signup.jade
extends ../layout
block content
...etc
Can you help me, please?!

I just figured out that i have to send a part of the layout jade, and everything will be nice, for more information see this solution

Related

app.get() being called multiple times express

I'm fairly new to node.js and trying to make a simple website which first asks the authentication and then redirects the user to a page.
so, what i do is that i create a middleware which listenes to every request made to my website.
what this middleware does that it checks if the the user is logged in with my website or not is yes then redirect to the requested page if not, then redirect to the login page, here is my code for that.
var express = require('express');
var app = express();
// middleware for using static files
app.use('/public', express.static(__dirname + '/public')); // all the js files for check_before.html
app.use('/templates', express.static(__dirname + '/templates')); // here are css/js files for login.html
// setting up views folder
app.set('views', __dirname + '/views'); // check_before.html is sitting here
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use((req, res, next) => {
res.render('check_before.html');
// here in the html I implement the logic using js files which are located in public folder.
next();
});
// if not logged in , the user gets here
app.get('/login', (req, res, next) => {
res.render('login.html')
});
// if logged in redirect to some page
app.get('/welcome_page', (req, res) => {
return 'welcome'
});
everything goes well untill the user hits the http://localhost:8000/login page (after the check if they are signed in or not) the page keeps on loading multiple times and it won't stop reloading.
I have defined all the css, js files of login.html page in the templates folder which is loaded above the middleware by reffereing to this question
Express middleware getting called many times. could that be a problem?
what could be the reason for this?
here is the error i'm getting in the console.
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
any guesses?
Edit1
I went through this question Error: Can't set headers after they are sent to the client , and i guess it concludes that setting headers explicitly could be problematic.
Could this be a reason? because in my logic if the user is not signed In, I'm just using window.location.replace('http://localhost:8000/login') to redirect the user to login page.
should I use any another method for redirection?
Edit2
There are suggestions that i must write a middleware to check is the user is authenticated or not, and get a sort of flag for that, but as i've stated above that i'm implementing the logic in check_before.html(client side). so it won't be possible to use that.
I have two guesses:
You shouldn't call send (or any other function )after res.render.
Middleware to verify user is logged in should be something like this (applied only to routes you want to verify user)
Middleware should be something like this
const isAuthenticated = (req, res, next) => {
if(req.isAuthenticated()) {
next();
} else {
res.redirect('/');
}
}
app.get('/welcome_page', isAuthenticated, (req, res) => {
return 'welcome'
});
The reason is that middleware is called before your /login request. To fix it, you need to modify your middleware function. It should be something like:
app.use((req, res, next) => {
if(isLoggedIn) { //isLoggedIn is a flag that checks whetehr user is logged-in or not
res.render('check_before.html');
} else {
// here in the html I implement the logic using js files which are located in public folder.
next();
}
});

ExpressJS cannot get /route in Openshift, but locally it is working

My project have this following structure.
server.js
/node_modules
/build
vendor.js
main.js
index.html
I'm using express, and AngularJS's ui-router.
In server.js I have this code:
app.get('/*', function(req, res) {
res.sendFile(__dirname + '/build/index.html');
});
And locally it is working if I pass localhost:8080/hellothere, I get the correct page but when I've deployed, it doesn't.
Within the application if use the links to navigate the routes run, the URL is modified to /hellothere, but if I update the page or try to go straight to the absolute URL I get:
Cannot GET /hellothere
I'm already have tryied put:
app.get('/page1', function(req, res) {
res.sendFile(__dirname + '/build/index.html');
});
app.get('/page2', function(req, res) {
res.sendFile(__dirname + '/build/index.html');
});
...
And the behavior is the same of '/*'. Fine local, broke on cloud.
Any idea what's happening here?
homolog Website link
And locally it is working if I pass localhost:8080/hellothere, I get
the correct page but when I've deployed, it doesn't.
The possible reason might be after deploying your base url might be domainname.com/appname and your local code is for localhost:portNumber not for localhost:portNumber/appname
So modify your path to
app.get('/appname/hellothere', function(req, res) {
res.send("hellothere is working");
});
instead of
app.get('/hellothere', function(req, res) {
res.send("hellothere is working");
});
To run it locally, now you will need localhost:portNumber/appname/hellothere

Express routing issue

I am learning expressjs and I've been stuck at moment how to make the navigation between pages:
What I've done:
1. Installed express, and converted regular html to jade format.
2. In app.js I've added following code:
app.get('/', function(req, res){
res.render('views/index.jade', { title: 'index' });
});
app.get('/about', function(req, res){
res.render('views/portfolio.jade', { title: 'about' });
});
All files I've stored in views folder and in index.jade I've added following code:
a.selected(href='/views/index.jade') TIMELINE
a(href='/views/portfolio.jade') PORTFOLIO
a(href='/views/about_me.jade') ABOUT ME
a(href='/views/store.jade') STORE
When I click on portfolio button, the following error appears:
You need to link href the route path:
a.selected(href='/') TIMELINE
a(href='/about') PORTFOLIO
a(href='/about') ABOUT ME
a(href='/store') STORE
You are actually creating routes, which enable a browser to ask the server for data on a specific path. What the server sends to the browser based on that path is up to the programmer.
In your case, you're internally configuring the /about route to render the file views/portfolio.jade.
Thus, instead of linking to the .jade files like you're doing, you should be linking to the actual routes you created:
a.selected(href='/') TIMELINE
a(href='/portfolio') PORTFOLIO
a(href='/about') ABOUT ME
a(href='/store') STORE
Assuming you have the following routes:
app.get('/', function(req, res){
res.render('views/index.jade', { title: 'index' });
});
app.get('/about', function(req, res){
res.render('views/about_me.jade', { title: 'about' });
});
app.get('/store', function(req, res){
res.render('views/store.jade', { title: 'store' });
});
app.get('/portfolio', function(req, res){
res.render('views/portfolio.jade', { title: 'portfolio' });
});

404 Not Found when form is submitted but works when the same URL is reloaded

I made a simple login system using ExpressJs and on submission of form the user is directed to www.mywebsite.com/submit and see "Not Found 404" but when i refresh the same page i see the view for that.
I am not sure why it is happening but here is the code
Index.js(Route)
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
res.render('index', { title: 'Express' });
});
router.get('/submit', function(req, res){
res.render('submit');
});
module.exports = router;
Submit.jade
extends layout
block content
h1 Successfully Logged In
404 Not Found Error
Error: Not Found at Layer.app.use.res.render.message [as handle (/Applications/MAMP/htdocs/nodejs/app.js:29:15)
at trim_prefix (/Applications/MAMP/htdocs/nodejs/node_modules/express/lib/router/index.js:240:15)
at /Applications/MAMP/htdocs/nodejs/node_modules/express/lib/router/index.js:208:9
at Function.proto.process_params (/Applications/MAMP/htdocs/nodejs/node_modules/express/lib/router/index.js:269:12)
at next (/Applications/MAMP/htdocs/nodejs/node_modules/express/lib/router/index.js:199:19)
at next (/Applications/MAMP/htdocs/nodejs/node_modules/express/lib/router/index.js:176:38)
at /Applications/MAMP/htdocs/nodejs/node_modules/express/lib/router/index.js:137:5
at /Applications/MAMP/htdocs/nodejs/node_modules/express/lib/router/index.js:250:10
at next (/Applications/MAMP/htdocs/nodejs/node_modules/express/lib/router/index.js:160:14)
at next_layer (/Applications/MAMP/htdocs/nodejs/node_modules/express/lib/router/route.js:77:14)
I guess the form is being submitted via POST, but you have defined the route only for GET
router.get('/submit', function(req, res){
res.render('submit');
});
should be
router.post('/submit', function(req, res){
res.render('submit');
});
According to the documentation:
The app.VERB() methods provide the routing functionality in Express,
where VERB is one of the HTTP verbs, such as app.post().
Source: http://expressjs.com/api.html#app.VERB

How do I handle Page Refresh with Angular.js?

I just followed the setup from http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application
This tutorial introduced controllers and services with angular.js for a single-page app..
When I directly visit /pageName, or click the anchor-link for the /pageName route and then press the browser 'Refresh', the page displays:
Error: ENOENT, stat './public/views/index.html'
After reading some answers to similar questions, I changed:
app.get('*', function(req, res) {
res.sendfile('./public/views/index.html');
});
to:
res.sendfile(__dirname + '/public/views/index.html');
..though now the result is Error: ENOENT, stat '/app/app/public/views/index.html'
well, first of all, your file is in ./public/index.html , and you are searching in ./public/views/index.html , try:
res.sendfile('./public/index.html');
if that doesen't work,try this:
app.get('*', function(req, res) {
res.sendfile('index.html', { root: './public' });
});

Categories