0

I am trying to complete the following function which sends values through AJAX to backend as parameters to a query which will output report results on user's screen without reloading.

If I work only with one parameter (datereport: '2017-06-21') it works ok and I get results on the very same page without reloading it.

View url is localhost/reports

However when I try to work with second value like currencyreport is not getting it till the AJAX function and the backend of course.

EJS

<input id="datereport" class="form-control" name="datereport" value="2017-06-21">
<input id="currencyreport" class="form-control" name="currencyreport" value="GBP">

<input type="button" value="Search" class="btn btn-info mr-1" onClick="searchReport([document.getElementById('datereport').value,document.getElementById('currencyreport').value])">

AJAX Function for sending and getting values to/from backend

function searchReport(datereport, currencyreport) {

    console.log(datereport) // it outputs both datereport,currencyreport values instead of the first one only  ["2017-06-21","GBP"]
    console.log(currencyreport) // it outputs undefined
    $.ajax({
        url: "/reports",
        type: "get",
        data: $("#report-form").serialize(),
        success: function(res) {
            $.post("/reportsdate/" + data, function(data) {
                // it builds GET /reports?datereport=2017-06-21&currencyreport=GBP
                ok(data);
            });
            return false;
        },
        error: function(xhr, status, error) {
            // error stuff
        }
    });
}

// The part which takes the backend results and output in the same page without reloading

function ok(datares) {
    document.getElementById("results").innerHTML = Object.values(datares.data[0])
}

Backend

var express = require('express');
var router = express.Router();
var bodyParser = require('body-parser');
var url = require('url');

router.use(bodyParser.urlencoded({ extended: true }));
router.use(function(req, res, next) {
    console.log(req.method, req.url);
    next();
});


var reports = router.route('/reports');
var reportsdate = router.route('/reportsdate');

router.get('/reportsdate', function(req, res) {
    res.render('reports');
});

router.get('/reports', function(req, res) {
    res.render('reports');
});

reportsdate.post(function(req, res, next) {

    datereport = req.query.datereport;
    currencyreport = req.query.currencyreport;

    req.getConnection(function(err, conn) {

        if (err) return next("Cannot Connect");

        var queryString = "SELECT SUM(total_profit) AS fee_total FROM transactions WHERE date_created = ?";
        var queryParams = [];
        queryParams.push(datereport);

        if(currencyreport){
              queryString += ' AND currency = ? ';
              queryParams.push(currencyreport);
        }

        var query = conn.query(queryString, queryParams,  function(err, rows) {
            if (err) {
                console.log(err);
                return next(err);
            }
            var ab = {data: rows};
            console.log('hohohoho ' + JSON.stringify(ab));
            res.send(ab)

        });
    });
});

router.get('/reports', function(req, res) {
    res.render('reports', {data: ab});
});

1 Answer 1

0

You are using:

onClick="searchReport([document.getElementById('datereport').value,document.getElementById('currencyreport').value])">

That means you call searchReport with an array. But your function expects just to variables.

So if you remove the braces everything should work.

onClick="searchReport(document.getElementById('datereport').value,document.getElementById('currencyreport').value)">
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, that was indeed the first issue for getting the values till the AJAX function. However values still cannot reach the backend part (mysql query parameters) so the output query result can be sent back to frontend.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.