Update part of HTML page using NODE.JS and EJS

Question

I have the following express app which just renders the sample.ejs page. On that page when I press the button the attached script changes the div text to "THIS IS FROM J QUERY. I want the same thing to happen but I want the data to be coming from a database. In my express app if I try to use res.render(); every time I click the button then it reloads the page which I don't want. So is there a way to achieve this without reloading page and only update part of page? I have searched stack overflow and the web but can't get an appropriate answer or maybe I just am unable to understand. I know this is a very basic thing to ask.

APP.js

var express = require('express');
var app = express();
app.use(express.static('public'));
app.use(express.static('./src/views'));
app.set('views', './src/views');
app.set('view engine' , 'ejs');

app.listen(3000 , (err)=>{console.log('Listening')});

app.get('/' , function(req , res) {
    res.render('sample' , {result_from_database: res.body} );   
});

sample.ejs

<!doctype html>
<html lang="en">
<head>
    <title>Sample HTML File</title>
</head>

<body>
    <div id="holder">
        WELCOME
    </div>
    <form>
        <button type="button" id="HButton"> HELLO </button>
    </form>
</body>

<script>
    $(document).ready(function () {
        var form = $("#holder");

        $("#HButton").on("click", function () {
            form.html("THIS IS FROM J QUERY");
        });
    });
</script>

<script src="/lib/jquery/dist/jquery.js"></script>

</html>

Now this is what I want to do

<!doctype html>
<html lang="en">
<head>
    <title>Sample HTML File</title>
</head>

<body>
    <div id="holder">
        <%= result_from_database %>
    </div>
    <form>
        <button type="button" id="HButton"> HELLO </button>
    </form>
</body>

<script>
    $(document).ready(function () {
        var my_div = $("#holder");
        $("#HButton").on("click", function () {

          /* Tell app.js that I clicked a button and then app.js
             query the database and using ejs or something else update the
             my_div inner html with the database result without
             reloading page */
        });
    });
</script>

<script src="/lib/jquery/dist/jquery.js"></script>

</html>

NOTE: I'm not asking how to query the database

-Thanks

What you are asking for needs client side JavaScript and is typically known as Ajax. There are plenty of tutorials if you search for that name. — Quentin
– Quentin, Commented Apr 20, 2017 at 15:18
You have to define a api endpoint in node.js that retrives you the needed infromation in json format. Then from your frontend you can use JQuery, Angular or React to call the api and display the information in front end. — Cristian Colorado
– Cristian Colorado, Commented Apr 20, 2017 at 15:20

Cristian Colorado · Accepted Answer · 2017-04-20 15:30:09Z

6

You have to define and endpoint in your back end that return the information you want to display:

app.js

var express = require('express');
var app = express();
app.use(express.static('public'));
app.use(express.static('./src/views'));
app.set('views', './src/views');
app.set('view engine' , 'ejs');

app.listen(3000 , (err)=>{console.log('Listening')});

app.get('/' , function(req , res) {
    res.render('sample' , {result_from_database: res.body} );   
});

app.get('/api/books', function(req, res) {
     res.json({
       message: 'Your database information'
     });
});

then on your front end you need to make a call to api endpoint like:

sample.ejs

<script>
    $(document).ready(function () {
        var my_div = $("#holder");
        $("#HButton").on("click", function () {

          $.ajax({
             url: "/api/books"
          })
          .done(function( data ) {
             console.log( "Sample of data:", data );
             $('#holder').html(data.message);
          });
        });
    });
</script>

You can find more information on ajax call with jquery here.

However i would suggest you to use any framework like angular or react to make it easier to render the data in your html, otherwise you will have to write a lot of code using jquery.

answered Apr 20, 2017 at 15:30

Cristian Colorado

2,0403 gold badges19 silver badges24 bronze badges

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

4 Comments

Syed Ahmed Jamil Over a year ago

Thanks looks like what I need, well I was trying to avoid jquery stuff after seeing what ejs can do. You know direct from node to your html page in a flash with all that javascript logic right where I wanted. Anyway can you refer me any specific link or keyword by which I should search for Angular or React on this.

Cristian Colorado Over a year ago

You can check AngularJS 1.x here docs.angularjs.org/tutorial, for react there is a great tutorial here facebook.github.io/react/tutorial/tutorial.html, Angular 4 is a little bt more complicated if you are new to java script.

Syed Ahmed Jamil Over a year ago

Thank you for your time, I'll check by those links.

Swapnil Over a year ago

how can I get updated data on ejs page without reloading it ?

Collectives™ on Stack Overflow

Update part of HTML page using NODE.JS and EJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related