How to update a portion of a webpage without redirecting to a new page? Express, nodejs, mongoose

Question

I am creating a two player game where the player has 10 tries to guess a word. I need to put his guess and the score up on a table without refreshing the entire page. The problem is that I only know how to make routes the express way which only redirects to another url. I am looking for a break down of what to do in baby terms so that I can apply it to other projects in the future. Every other post on this matter did not teach how to incorporate the express code, etc and did not break it down.

Here is the express/nodejs code

router.get( "/arena", function ( req, res, next){
    res.render('arena', {Title:"Arena"});
})

router.post( "/arena", function ( req, res, next){
    if( req.body.matchTitle && req.body.newGuess &&  req.body.newGuess.length == 5){
        var newGuess = req.body.newGuess;
        var oldGuesses = req.body.oldGuess;   //an array of the previously guessed words

        //verify this word is found in the dictionary
        var res = loadDicCompare(newGuess); //returns true or false

        //Give the guess a score
        var score = Score(newGuess);

        //save new Guess to the database
        Game.findAndUpdate( { matchTitle : req.body.matchTitle } , { $push : { guess : newGuess } } , function (){
            if( err ) {
                return next(err)
            } 
            else {
                res.render('arena', {Title:"Arena", Score : score, Guess: newGuess, pastGuesses : oldGuesses});
            }
        })

    } 
    else{
        res.render('arena', {Title:"Arena", Alert : "Sorry insufficient data"});
    }

})

And here is my pug template (it has to load all the old guess and their scores back into the table plus the recent guess then it has to add a new table row with the input field for the new guess):

extend layout
block content
    h2.h2WithTable #{Gid}Stacy vs. Kelly#{cGid}
    form( method = 'POST'  action = '/arena' )
        table#gameTable
            if ( Alert)
                - alert('Alert')
            else
            if pastGuesses
                each word, ind in pastGuesses
                    tr.hideme( type = 'text' maxlength=5 name = 'oldGuess' )
                    tr.hideme( type = 'text' maxlength=5 name = 'oldScore' )
                    tr
                        td #{word[0]}
                        td #{word[1]}
                        td #{word[2]}
                        td #{word[3]}
                        td #{word[4]}
                        td #{pastScores[ind]}
            if newGuess
                tr
                        td #{newGuess[0]}
                        td #{newGuess[1]}
                        td #{newGuess[2]}
                        td #{newGuess[3]}
                        td #{newGuess[4]}
                        td #{Score}
            tr
                td
                    input#newGuess( type = 'text' maxlength=5 name = 'newGuess' )
                td.wide
                    button#send( type = 'submit' ) Try

With this code, it makes the page reload the header, nav, table, all table data and footer over and over till the game ends. Here is what I want to happen

get the newGuess (only)
score the newGuess ( i have a score function made )
Add a row to the table with each letter of the word in a column (5 letters) and the score in the last column
Add another new row with an input field in the first column and submit button in the last

How to update a portion of a webpage without redirecting to a new page? Express, nodejs, mongoose

Answers (1)

Related Questions