ejs ajax node,node.js - render output in ejs file from ajax post request using nodejs - Stack Overfl...

it's been one week now that i am struggling with this, I have searching to the internet, but i a am not able to succeed on this.

context : i have a form with 2 select lists. what i want is to use ajax to not have to reload the whole page each time i submit the form and also that the user selection stay keeped.

i can see the exact response i want to display on my page when i am looking to the devtools in firefox.

but, the page is not refreshing/displaying the data....

this is my first project with nodejs/ejs/mongodb/ajax , i haven't yet enough experience i think.

there are mayebe something i am not understanding on the success/done part of my ajax request...

can anyone help me?

how to display, render what i can see in the response from the server in my devtool?

server part : the post request:

app.js

EDIT : i forgot to mention that i have the following line too:

//SETTING BODY-PARSER FOR JSON REQUESTS:

app.use(bodyParser.json()); in my app.js file.

app.post('/games-query',urlencodedParser, (req, res) => {

console.log(req.body);

let titlepage = 'Games list :';

let platform = req.body.platformAjax;

let genre = req.body.genreAjax;

console.log('PLATFORM PARAM = '+ platform );

console.log('GENRE PARAM = '+ genre );

mameGames = [];

if ((genre == "") || (genre == "All")){

Game.find({gameplatform: platform}).sort({ gametitle: 1 }).limit(100).exec(function (err, games) {

var count = "results :"+games.length;

if(err){

console.error('could not retrieve games from DB');

res.sendStatus(500);

}else {

mameGames = games;

console.log("GAMES : "+mameGames.gametitle);

res.render('games', {games: mameGames, count: count, title:titlepage});

}

});

}else{

Game.find({gameplatform: platform, gamegenre:genre}).sort({ gametitle: 1 }).limit(100).exec(function (err, games) {

var count = "results :"+games.length;

if(err){

console.error('could not retrieve games from DB');

res.sendStatus(500);

}else {

mameGames = games;

// console.log('mameGames : ' + mameGames);

res.render('games', {games: mameGames, count: count, title:titlepage});

}

});

}

});

the ajax request (in /public/js/posrequest.js) :

$( document ).ready(function() {

function ajaxPost(){

const selectForm = document.getElementById('btnquery');

selectForm.addEventListener('click', (e)=>{

e.preventDefault();

let platform = document.getElementById('platformId').value;

let genre = document.getElementById('genreId').value;

let payload = {

platformAjax:platform,

genreAjax:genre

}

// DO POST

$.ajax({

type : "POST",

url : "games-query",

contentType : "application/json",

// data : {platformAjax:platform, genreAjax:genre},

data : JSON.stringify(payload),

dataType : "json",

}).done(function(data){

$('#gametitle').text(JSON.parse(data.gametitle));

return;

});

});

}

ajaxPost();

});

the ejs file : (in /views/games.ejs) :

games

By Name:

Chercher

OR

By Platform:

Arcade

NeoGeo

SMS

Genesis

Saturn

DC

NES

SNES

NGC

Wii

WiiU

Switch

PS1

PS2

PS3

PS4

PC

And Genre:

All

shmup

fighting

beatThemUp

platform

lightgun

run&gun

race

flight

puzzle

pinball

sport

rpg

adventure

Submit

let term = document.querySelector('#term');

const btnSearch = document.querySelector('#btnSearch');

loadProgressBar()

Edit 2 :

I see that it is not obvious to anyone.

i am going to isolate my code to see if something else is in the party!

Edit 3 : i have made a ton of new test since i posted it last sunday.

Always the same thing..

actually i move the following line :

into my head html tag as i saw on w3school website.

how could i send the response in my page?

actualy what i saw in the firefox web console when i send DC as platform and All to genre input:

HEADERS:

**Response headers:**

XHRPOSThttp://localhost:3000/games-query

[HTTP/1.1 200 OK 98ms]

URL de la requête :http://localhost:3000/games-query

Méthode de la requête :POST

Adresse distante :[::1]:3000

Code d’état :

200

Version :HTTP/1.1

En-têtes de la réponse (333 o)

En-têtes bruts

HTTP/1.1 200 OK

X-Powered-By: Express

Access-Control-Allow-Origin: localhost:3000

Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept

Content-Type: text/html; charset=utf-8

Content-Length: 32157

ETag: W/"7d9d-m2EHsBSaOIu0E/Jr6q+X8UJQtdo"

Date: Tue, 19 May 2020 22:10:00 GMT

Connection: keep-alive

En-têtes de la requête (604 o)

En-têtes bruts

Accept

application/json, text/javascript, */*; q=0.01

Accept-Encoding

gzip, deflate

Accept-Language

fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3

Connection

keep-alive

Content-Length

36

Content-Type

application/json

Cookie

hblid=SAF2ExIBZf2cIdPG3m39N0O0…ID=7hvm3c3ie9k4ku9cue18777h82

DNT

1

Host

localhost:3000

Origin

http://localhost:3000

Referer

http://localhost:3000/games?platform=Arcade

User-Agent

Mozilla/5.0 (Windows NT 10.0; …) Gecko/20100101 Firefox/76.0

X-Requested-With

XMLHttpRequest

Parameters:

JSON:

genreAjax ""

platformAjax "DC"

Transmission de la requete:

{"platformAjax":"DC","genreAjax":""}

Response / response payload:

Ready 2 Rumble Boxing: Round 2