Is there any way to get value in node js server while clicking on div

Here is my EJS file

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Sart Plug</title>
    <script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/usrDashboard.css">
    <link rel="icon" href="/images/plugimg.png" type="image/x-icon" />
  </head>
  <body>
    <div class="container">
      <div class="header">
        <a href="#" class="logo">Select Device</a>
        <div class="header-right">
          <a href="/logout">Log Out</a>
        </div>
      </div>
      <div class="jumbotron" id="jumbo">
        <p><%=data.noResult%></p>
        <div class="row">
          <% for(var i=0; i < data.result.length; i++) { %>
            <div class="col-25">
              <a href="/plugDashboard">
                <p><img class="img-fluid" src="/images/plugimg.png" alt="Plug Image"></p>
                <p><h3><%= data.result[i].device_name %></h3></p>
                <p><h6><%= data.result[i].device_address %></h6></p>
              </a>
            </div>
          <% } %>
        </div>
      </div>
    </div>
  </body>
</html>

JavaScript
​x
 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Sart Plug</title>
    <script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/usrDashboard.css">
    <link rel="icon" href="/images/plugimg.png" type="image/x-icon" />
  </head>
  <body>
    <div class="container">
      <div class="header">
        <a href="#" class="logo">Select Device</a>
        <div class="header-right">
          <a href="/logout">Log Out</a>
        </div>
      </div>
      <div class="jumbotron" id="jumbo">
        <p><%=data.noResult%></p>
        <div class="row">
          <% for(var i=0; i < data.result.length; i++) { %>
            <div class="col-25">
              <a href="/plugDashboard">
                <p><img class="img-fluid" src="/images/plugimg.png" alt="Plug Image"></p>
                <p><h3><%= data.result[i].device_name %></h3></p>
                <p><h6><%= data.result[i].device_address %></h6></p>
              </a>
            </div>
          <% } %>
        </div>
      </div>
    </div>
  </body>
</html>
​

Html view here

My routes are in the below route:-

app.get('/usrDashboard', checkAuthenticted, (req, res) => {
  let email = req.user.email;
  con.query("SELECT device_name, device_address FROM pluglist WHERE email ='"+ email +"' " , (err, result, fields)=> {
    if(err) throw err;
    console.log(result);
    if (result.length === 0) {
      res.render('usrDashboard',{data:{email: email,
                                        result:result,
                                        noResult:'You have no saved device'}});
    }
    else {

      res.render('usrDashboard',{data:{email: email,
                                        result:result}});
    }
  });
})

app.get('/plugDashboard', checkAuthenticted, (req, res) => {
  console.log(req);
  res.render('plugDashboard');
})

JavaScript
 
app.get('/usrDashboard', checkAuthenticted, (req, res) => {
  let email = req.user.email;
  con.query("SELECT device_name, device_address FROM pluglist WHERE email ='"+ email +"' " , (err, result, fields)=> {
    if(err) throw err;
    console.log(result);
    if (result.length === 0) {
      res.render('usrDashboard',{data:{email: email,
                                        result:result,
                                        noResult:'You have no saved device'}});
    }
    else {
​
      res.render('usrDashboard',{data:{email: email,
                                        result:result}});
    }
  });
})
​
app.get('/plugDashboard', checkAuthenticted, (req, res) => {
  console.log(req);
  res.render('plugDashboard');
})
​

SO here I want, whenever I click on any of the div I want to print the mac id in log from the respective div in plugDashboard section. So is there any way to do so? I searched for many solutions none of them were helpful for me.

Answer

You can add new GET express route, for example:

router.get('/get_mac_info/:mac_id', function(req, res, next) {
  res.json({
    mac_id: 'test_id'

  });
});

JavaScript
 
router.get('/get_mac_info/:mac_id', function(req, res, next) {
  res.json({
    mac_id: 'test_id'
​
  });
});

and after that just add ajax call on click event:

$(function () {
    $(document).on('click', '.col-25', function (e) {
        $.get('/get_mac_info/' + mac_id, function(data){
          $('.print_container').text(data)
        })
        e.preventDefault();
    });

});

JavaScript
 
$(function () {
    $(document).on('click', '.col-25', function (e) {
        $.get('/get_mac_info/' + mac_id, function(data){
          $('.print_container').text(data)
        })
        e.preventDefault();
    });
​
});

Advertisement

Answer