I am attempting to use pushState to access a virtual path in my server. The desired flow of the code below should be
- User calls up login form on client side
- Window location changes to virtual path (which I have a middleware handling by the way)
- User fills form and submits via AJAX (At this point, my impression is that the request url is the one in the contrived push state and not the actual href, hence the middleware at my server should handle it)
However, this approach does not achieve my desired goal which is to process the submitted fields at the “fake” path and return output for me at the client side. First, I’ll post the front end code.
$("nav ul li a").click(function(e){
e.preventDefault();
history.pushState({username: undefined}, "", "/login");
}).colorbox({inline: true, width: '65%', onClosed: function(){
if ($("section").has("nav").length) { // Meaning if user is not signed in but closes colorbox, go back to home url
history.back();
}
}});
// login logic. if auth user, remove form
$(".auth_form").on("submit", function(e) {
e.preventDefault();
$.post("http://localhost:1717/", $("#auth_form form").serialize(), function(data){
console.log(data);
if (data.sessName.length > 1 ) {
history.replaceState({username: data.sessName}, "", data.sessName);
$("nav").replaceWith($("#logged-in").show().css("margin-left", "25%"));
$.colorbox.close();
}
else {
$(".message-text").html(data.errText);
}
});
});
And my server side code goes thus
app = app.use(static(__dirname + "/public"))/* a few other middlewares here, then */
.use(cookieSession({secret: "secret", maxAge: this.maxAge + (60 * 60 * 24 * 1000)}))
.use("/login", login);
function login (req, res, next) {
var params = queryParser.parse(req.body), resObj = {errText: "", sessName: ""}; console.log(params);
db.query("SELECT * FROM `users` WHERE `email`=? AND `password`=?", [params.email, params.pwd], function(err, rows) {
if (err) throw err;
if (rows.length >= 1) {
req.session.name = params.email.split("@")[0];
resObj.sessName = req.session.name;
res.end(resObj);
}
else {
resObj.errText = "Incorrect email or password";
res.end(resObj);
}
});
next();
}
Now, there are no errors returned at my server. The error is reported in the client console, after a successful AJAX trip. I guess it’s successful since the error reads
POST http://localhost:1717/ 404 (Not Found)
XHR finished loading: POST “http://localhost:1717/”.
What could I possibly be doing wrong?
EDIT: The back end technology is NODEJS. Just thought I should chip that in since Sitepoint neither has it in the tags nor in languages.