CODEWITHSUNDEEP
javascriptnode.jsexpressxmlhttprequestejs
E Alexis MT
E Alexis MT

Reputation: 313

How to post data to the same ejs view or partial after using res.render get?

I need to display data that gets posted after rendering view with res.render() in get. When I use <% date %> my view throws an error saying that date is not defined and I know this happens because my value does not exist before rendering the view and its getting set after. So how do I set this variable to be displayed in my ejs file before or after my view gets rendered?

I have tried a few things like using res.send(), using another get() inside my post() and even creating a partial view but nothing works. I dont want to click any buttons to be able to do this and if its only possible with clicking well then. I know you cant use res.send() on the same view twice.

My post XMLHttpRequest is executed when the page loads in javascript to set my date variable and send it to my node.js file then I use express to fetch it. My node.js code is the following:

app.get('/', function (req, res) {

    res.render('index', {
        time: time,
        views: visitors,
        mobileViews: mobileVisitors,
    });
}

app.post('/', function(req, res){
    console.log('working');

    getInfo = req.body;

    console.log(getInfo);

    //getInfo.date = 1

    res.render('index', {dataTest: getInfo.date}); //this doesnt work

    //OR res.send({dataTest: getInfo.date}); doesnt work

    //OR app.get('/', function (req, res) {res.render ... doesnt work
}

My ejs view is:

<h1 class="test">test <%= dataTest %></h1>

My js file:

var waitForEl = function (selector, callback) {
    if (jQuery(selector).length) {
        callback();
    } else {
        setTimeout(function () {
            waitForEl(selector, callback);
        }, 100);
    }
};

waitForEl(".daterangepicker", function () {

    var element = document.querySelector('.ranges ul').childNodes[0].childNodes[0].data.toString();

    console.log(element);

    var date = 0;
    date = sendData(date, element);

    var obj = JSON.stringify({date: date});

    console.log(obj);

    var xhr = new XMLHttpRequest();

    xhr.open("POST", "http://localhost:4000", true);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

    xhr.send(obj);
});

function sendData(date, element) {


    if(element == 'Today') {

        date = 1;
    }

    return date;
}

Upvotes: 1

Views: 5273

Answers (2)

Fauzul Chowdhury
Fauzul Chowdhury

Reputation: 54

What I see is the first time you are trying to get "/" you don't have agetInfo.date

So make a getInfo.date = Date.now()

Or getInfo.date = new Date()

And pass it in into your initial get('/') call.

const bodyParser =require('body-parser'); const urlencodedParser = bodyParser.urlencoded({ extended: false }); app.get('/', function (req, res) { res.render('index', { time: time, Views: visitors, mobileViews: mobileVisitors, getinfo: getInfo}); } app.post('/',urlencodedParser,function(req, res){ console.log('working'); getInfo = req.body; console.log(getInfo); res.render('index', {getInfo: getInfo}); }.

on the other hand you may also choose to make the getInfo.date = null or getInfo.date = ''

And check in your ejs with if condition if(getinfo.date){<=getinfo.date>}

Trying from mobile. Hope this solves

Upvotes: 0

mohamed ibrahim
mohamed ibrahim

Reputation: 583

try this :

const bodyParser =require('body-parser');
const urlencodedParser = bodyParser.urlencoded({ extended: false });
app.get('/', function (req, res) {

    res.render('index', {
        time: time,
        Views: visitors,
        mobileViews: mobileVisitors,
    });
}

app.post('/',urlencodedParser,function(req, res){
    console.log('working');

    getInfo = req.body;

    console.log(getInfo);

    res.render('index', {getInfo: getInfo});

}

you need also a midlleware to handle post method in express app

npm i body-parser

it's better to use the object's key name as its value name to ease cycling through the properties

then in your ejs view use :

<%= getInfo.date %>

there is an = sign,don't forget it.

Upvotes: 4

Related Questions