Express framework: How to capture a value on clicking an image and use that value to fetch database details into another html page

Question

I have the following ejs file and I want to capture the NAME field value inorder to fetch the respective details from database and display onto another page. I know how to do this using form tag, but I am unsure how to capture in this case. Any help would be appreciated. Thanks.

search.ejs file:

<a href="/menu/<%= tablelist[i].NAME %>">
                <img alt="<%= tablelist[i].NAME %>" class="restaurant-card-cover" src="<%= tablelist[i].IMAGELINK %>" style="height: 115px;">
                    <div class="restaurant-card-content-text">
                        <div id="catererName" class="restaurant-card-name heading-color" variable="<%= tablelist[i].NAME %>"><%= tablelist[i].NAME %></div>
                            <div class="card-description"><%= tablelist[i].DESC2 %></div></a>

In app.js file, I added the following:

app.get('/menu/:name', routes.menu(ibmdb,connString));

And, I have another folder "routes" and I am mentioning all my SQL queries in index.js file. Here it is:

    exports.menu = function(ibmdb,connString) {
return function(req, res) {

var name = req.param.name;

 ibmdb.open(connString, function(err, conn) {
        if (err ) {
         res.send("error occurred " + err.message);
        }
        else {

            conn.query("SELECT ITEM_NAME, PRICE FROM HOMEBASEDAPP.MENU WHERE CATERER_NAME='"+name+"';", function(err, tables, moreResultSets) {


            if ( !err ) { 
                res.render('menu', {"tablelist" : tables, name: name});

            } else {
               res.send("error occurred " + err.message);
            }

            /*
                Close the connection to the database
                param 1: The callback function to execute on completion of close function.
            */
            conn.close(function(){
                console.log("Connection Closed");
                    });
            });
        }
    } );

}
}

I tried to print the "name" in menu.ejs file but its not getting the value.

Answer 1

This is done on the frontend.

One way to do that would be to add a data tag, say on the same div where you want to capture the click. I will take this div from you, but you can adapt:

<div class="restaurant-card-name heading-color"><%= table[i].NAME %></div>

Now, add a data tag, something we can put data in:

<div class="restaurant-card-name heading-color" data-restaurant="<%= table[i].NAME %>">
    <%= table[i].NAME %>
</div>

Now, your div will render the name as a data attribute.

Then you have some click handler. Assuming jQuery here, you can grab a click on such divs. This bit javascript loaded when the dom is ready should do it:

$('.restaurant-card-name').click(function(evt) {

    evt.preventDefault();
    var name = this.data('restaurant');
    $.ajax({
      url: '/where/you/want/to/fetch/stuff/from',
      method: 'POST',
      // other stuff here, like displaying the data or image in a modal or similar.
    })
 });

Alternatively, if you want to just navigate to another page, as you say, there are a few steps.

First one is to prepare the url instead of the data attribute:

<a href="/my-restaurant-handler-route/<%= table[i].NAME %>">
    <div class="restaurant-card-name heading-color">
        <%= table[i].NAME %>
    </div>
</a>

Now, your href value will be, for example, /my-restaurant-handler-route/mcdonalds

The second step is to prepare a route on the server. Since you're using ejs and you've tagged Node, I'll assume you're using express.

You need to prepare a route handler like this:

app.get('/my-restaurant-handler-route/:name', function(req, res) {

    // param is on the request, whatever you named it after the `:` in app.get.
    var name = req.param.name;
    // now do the db dance
    database.getData({restaurantName: name}).then(function(data) {

       // you have the data, put it on the response or render it:
       res.render('restaurant-handler.ejs', {data: data});
    });
});

That is one way to do it. There are others, but you'll have to specify your situation a bit more for more details.