How to make page change with GET request in JavaScript with Node.js and Express?

Question

In this app, the user has a table they can enter data into. Each row has an "Edit" button, and when they click that button, I want to take them to a new page called "/update" where they can modify the values in that row.

I have it now so that when they click the the update button, it runs the editRow function, passing along the id of the table, and the data in the row. However, I'm having trouble figuring out how to get the routes to work correctly.

I'm using Node.js, Express, Handlebars but no jQuery.

app.js (server side)

app.get('/update', function(req,res){
    var context = {};
    context.tableID = req.ID;
    context.element = req.element;
    res.render('update', context);
});

update.handlebars

<h1>test for now</h1>

main.handlebars

<!doctype html>
<html>
<head>
    <title>Workout Tracker</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="scripts/buttons.js" type="text/javascript"></script>
</head>
<body>
    {{{body}}}
</body>
</html>

buttons.js (client side)

function editRow(tableID, element) {

    var httpRequest;

    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
        alert('Giving up :( Cannot create an XMLHTTP instance');
    }

    httpRequest.open('GET', 'http://localhost:3000/update');
    httpRequest.send();
};

With the new configuration above, I am now able to reach the /update code, but the render doesn't seem to be occurring. There are no error messages in server or client-side console.

What's is the desired behavior of your app, and what is its actual behavior? Do you have any error output? — Ezra Chang
– Ezra Chang, Commented Mar 17, 2017 at 15:33
Currently I'm just trying to display "test for now". If I can get that far, I should be fine. With the current configuration above, when I click the button that launches the editRow function, the page does not change. I'm not very good at routing so I'm sure my buttons.js file has a lot of errors. — Taylor Liss
– Taylor Liss, Commented Mar 17, 2017 at 15:47

Brian Glaz · Accepted Answer · 2017-03-17 15:59:20Z

2

As your error says, there is no get function on a XMLHttpRequest object. I think you meant to use req.open instead.

You can refer to this documentation which will show you how to make reuqests using XMLHttpRequest: https://developer.mozilla.org/enUS/docs/AJAX/Getting_Started#Step_3__A_Simple_Example

answered Mar 17, 2017 at 15:59

Brian Glaz

15.7k4 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Taylor Liss Over a year ago

Thank you for the helpful link! I've updated my code using what I learned, but I still cannot get the new page to render. I'm not sure why. I've updated my code above to reflect my changes.

Collectives™ on Stack Overflow

How to make page change with GET request in JavaScript with Node.js and Express?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related