Jquery avec nodejs

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Salut salut!

Depuis quelques temps que j’apprends nodejs (avec le framework expressjs), j’essaye avec l’aide de jquery de supprimer un nom d’une base de donnée. Et bien, surprise, ça ne marche pas :p.

Alors, si quelqu’un pouvais m’aider?

(shéma pour organiser ici => https://pastebin.com/dvexigk6)

App.js

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
const express  = require('express')
const bodyparser = require('body-parser')
const path = require('path')
const expressVal = require('express-validator')
const mongojs = require('mongojs')
const db = mongojs('customerapp', ['users'] )
const app = express();

/*const logger = (req, res, next) =>{
    console.log('Logging...')
    next()
}

app.use(logger)*/

//View Engine
app.set('view engine', 'ejs')
app.set('views', path.join(__dirname, 'views'))

//Body Parser Middleware
app.use(bodyparser.json())
app.use(bodyparser.urlencoded({extended: false}))

//Set Static Path
app.use(express.static(path.join(__dirname, 'public')))

// Global Vars
app.use( (req,res,next) => {
    res.locals.errors = null
    next()
})

// Express Validatior Middleware
app.use(expressVal({
    errorFormatter: (param, msg, value) => {
        const namespace = param.split('.'),
        root = namespace.shift(),
        formParam = root;

        while(namespace.length){
            formParam += '[' + namespace.shift() + ']';
        }
        return {
            param: formParam,
            msg: msg,
            value: value
        };
    }
}))


app.get('/', (req, res) => {

    db.users.find( (err, docs) => {
        if (err){
            console.log('Error at finding users on db, check \
            parmeters.\n')
            console.log(err)
        }else{
            console.log('Users:\n++++++++++++++++++')
            console.log(docs)
            console.log('\n++++++++++++++++++++++++')

            res.render('index', {
            title: 'Our customers:',
            users: docs
        })
        }
    })
})

app.post('/users/add',(req, res) => {

    req.checkBody('fname', ' first name required').notEmpty()
    req.checkBody('lname', 'last name required').notEmpty()
    req.checkBody('mail', 'mail required').notEmpty()

    const errors = req.validationErrors();

    if (errors) {
        res.render('index', {
            title: 'Our customers:',
            users: users,
            errors: errors
        })
    }else{
        const new_user = {
            fname : req.body.fname,
            lname : req.body.lname,
            mail  : req.body.mail,
        }
        db.users.insert(new_user, (err, result) => {
            if (err){
                console.log('Can not insert user to database.\n')
                console.log(err)
            }

            res.redirect('/')
        })
    }
} )

app.delete('/users/delete/:id', (req, res) => {
    //console.log('deleted user id ' + req.params.id)
    db.users.remove({_id: ObjectId(req.params.id)}, (err, result) => {
        if (err){
            console.log('Can not delete user\n')
            console.log(err)
        }

        res.redirect('/')
    })
})

app.listen(3000, () => {
    console.log('Server started on port 3000...')
})

index.ejs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<% include partials/header %>

    <h1>Add Customer</h1>
    <% if (errors){ %>
        <ul>
            <% errors.forEach(function(error){ %>

            <li><em><font color="#8e2a42"><%= error.msg %></font></em></li><% }) %>
        </ul>
    <% } %>
    <form method="POST" action="/users/add">
        <label>First name</label><br>
        <input type="text" name="fname" placeholder="first name.."><br>

        <label>Last name</label><br>
        <input type="text" name="lname" placeholder="last name.."><br>

        <label>Mail</label><br>
        <input type="text" name="mail" placeholder="mail.."><br><br><br>

        <input type="submit" value="submit"><br>

    </form>
    <h1><%= title %></h1>
    <ul>
    <% users.forEach(function(user){ %>

    <li><%= user.fname %> <%= user.lname %> - <a href="#" class="deleteUser" data-id="<%= user._id %>">Delete</a></li><% }) %>
    </ul><br>
<% include partials/footer %>

header.ejs

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Customer app</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>

main.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready( function() {

    $('.deleteUser').on("click", deleteUser)
})

function deleteUser(){
    const confirmation = alert('Are you sure?')

    if (confirmation){
        alert('user deleted')
        $.ajax({
            type: 'DELETE',
            url: '/users/delete/'+ $(this).data('id')

        }).done( function(response) {
            window.location.replace('/')
        })
        window.location.replace('/')
        else {
            return false
        }
    }
}

`
+0 -0

Quand tu dis que ça ne fonctionne pas, il se passe quoi exactement ?

  • Est-ce que la requête réseau est bien envoyée (cf. Devtools > Network) ?
  • Y a-t-il une erreur JS dans la console ?
  • Est-ce que le serveur reçoit quelque chose ? Si oui, quoi ?
  • As-tu une erreur sur le serveur ? Si oui, laquelle ?

Mes tutos — Développeur JS (front principalement) — Consultant qualité, ergonomie et UX

+1 -0
Auteur du sujet

Je pense que le dossier "js" n’est pas accessible contrairement au dossier "public".

EtienneR En effet, le fichier ejs n’arrive pas a trouver le code query je les donc mis dans une balise script est ça marche, c’est juste un peu plus moche. :)
+0 -1
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte