Wednesday, 10 May 2017

Node.js, JQuery, and Express.js rout not found, only returning 404. Could anyone else help point out what might be going wrong?

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var request = require('request');
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

//Books Data---------------------------------------------------
var newBooks = [
    {
    img: 'Eragon.png',  
    title: 'Eragon',
    author: 'Christopher Paolini',
    genre: 'Fantasy',
    published: 2002},
    {
    img: 'Eldest.png',  
    title: 'Eldest',
    author: 'Christopher Paolini',
    genre: 'Fantasy',
    published: 2005},
    {
    img: 'Brisingr.png',  
    title: 'Brisingr',
    author: 'Christopher Paolini',
    genre: 'Fantasy',
    published: 2008},
    {
    img: 'Inheritance.JPG',  
    title: 'Inheritance',
    author: 'Christopher Paolini',
    genre: 'Fantasy',
    published: 2011},
    {
    img: 'Harry_Potter_and_the_Philosophers_Stone.jpg',
    title: "Harry Potter and the Philosopher's Stone",
    author: 'J.K. Rowling',
    genre: 'Fantasy',
    published: 1997},
    {
    img: 'Harry_Potter_and_the_Chamber_of_Secrets.jpg',  
    title: 'Harry Potter and the Chamber of Secrets',
    author: 'J.K. Rowling',
    genre: 'Fantasy',
    published: 1998},
]
//-------------------------------------------------------------


//Routes-------------------------------------------------------
app.get('/', function(req, res, next) {
  res.render('index', { title: 'Express', books: newBooks})
});

app.post('/signout', function(req, res, next){ //<---- The problem route
  var title= req.body.book.title;
  console.log(title);
});

app.get('/searching', function(req, res, next){
  var val = req.query.search;
  var searchData = [];
  if(val.length > 0){
    for(var i = 0; i < newBooks.length; i++){
      if(newBooks[i].title.toUpperCase().includes(val.toUpperCase()))
        searchData.push(newBooks[i]);
    }
  }
    res.json(searchData);
});
//-------------------------------------------------------------



// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

app.listen(3000, function(){
  console.log('App is listening on port 3000!');
})

module.exports = app;

main.js

$(function(){
    $('.searchBar').on('keyup', function(e){
 //       if(e.keyCode === 13){
         var parameters = { search: $(this).val()};
         $.get('/searching', parameters, function(data){
             var $stuff = $('<section class="bookSection"><h4 style="text-align: center">Search Results:</h4><br></section>');
             if(data.length > 0){
                for(var i = 0;i < data.length; i++){
                    $stuff.append('<div><span><img src="'+data[i].img+'"></span><hr><span class="title">'+data[i].title+'</span><hr><span class="author">'+data[i].author+'</span><hr><span>'+data[i].genre+'</span><hr><span>'+data[i].published+'</span></div>');
                }
             } else {
                 $stuff.append('<h2 style="text-align: center">No results available, sorry!</h2>');
             }
             $('#results').html($stuff);
         });
 //       };
    });
});
$(function(){
    $('.bookSection div').on('click', function(e){
        var book = {
            title: $(this).find('.title').text(),
            author: $(this).find('.author').text()
        }
        if(window.confirm('Would you like to sign out '+book.title+' by '+book.author+'?') == true){
            $.post('/signout', book, function(){ //<--------------- the problem post
                alert(book.title+' signed out.');;
            });
        }
    });
});

Now, the issue. I am basically trying to make it so that when a user clicks on a book, a window will pop up that asks them if they would like to sign it out. When they click okay, the book information is supposed to be sent to the '/signout' route in app.js. However, all I receive is a 404, despite having another very similar function for a '.get' route in main.js as well. Could anyone please tell me what is going on in regards to why the route is not being accessed when the other two routes I have are perfectly fine?



via TheWhalePhail

No comments:

Post a Comment