I wrote a JSP to get data from server and list as table. The code is below:
<script type="text/javascript">
var thislist;
</script>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Address</th>
</tr>
</thead>
<tbody>
<%
int index = 1;
getCustomers ActionGet = new getCustomers();
List list = ActionGet.getCustomer();
Iterator it = list.iterator();
while (it.hasNext()) {
Customer customer = (Customer) it.next();
%>
<tr>
<th scope="row"><%=index++%></th>
<td><%=customer.getName()%></td>
<td><% if (customer.getAddress().length()>10) { %><%=customer.getAddress().substring(0,10) %><% } else { %>
<%=customer.getAddress() %><% } %></td>
</tr>
<%
}
%>
</tbody></table>
It only list the first 10 characters of address, Now I want to create a modal to view the whole address. To do that I want to create object array to store the whole address value ? Any hint? Thx.
I can read the database and render it in the file mascotas.ejs but can't do it in the file index.ejs, it throw an error "arrayMascotas is not defined".
For the database I'm using mongoDB, also I'm using ejs templates and express.
Sorry if I didn't explain something correctly, it's my first web using mongoDB and probably is a small thing but I've trying resolve it during hours.
The idea is to read and render the data from mongodb into a table, in mascotas.ejs is working but not in index.ejs
mascotas.ejs
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">a</th>
</tr>
</thead>
<tbody>
<% if(arrayMascotas.length > 0) { %>
<% arrayMascotas.forEach(mascota => { %>
<tr>
<th scope="row"><%= mascota.id %></th>
<td><%= mascota.a %></td>
</tr>
<% }) %>
<% } %>
</tbody>
</table>
index.ejs
<table class="table">
<thead>
<tr>
<th scope="col">name</th>
</tr>
</thead>
<tbody>
<% if(arrayMascotas.length > 0) { %>
<% arrayMascotas.forEach(mascota => { %>
<tr>
<td><%= mascota.state %></td>
</tr>
<% }) %>
<% } %>
</tbody>
</table>
app.js
app.use("/", require("./router/Rutasweb"));
app.use("/mascotas", require("./router/Mascotas"));
Mascotas.js
const express = require("express");
const router = express.Router();
const Mascota = require("../models/mascota")
router.get("/", async (req, res) => {
try {
const arrayMascotasDB = await Mascota.find()
console.log(arrayMascotasDB)
res.render("mascotas", {
arrayMascotas: arrayMascotasDB
})
} catch (error) {
console.log(error)
}
})
module.exports = router;
I have the following files:
my EJS page with <select>
<!doctype html>
<html lang="en">
<%- include('../views/partials/header.ejs') %>
<body>
<h1 style="padding-left: 20px; padding-top: 10px;">AidaLinux</h1>
<%- include('../views/partials/nav.ejs') %>
<div class="table-responsive" style="padding: 20px 20px 0px 20px;" >
<h2><%= name.printername %> jobs List</h2>
<!-- select in question -->
<!-- this prints all my available printers -->
<select class="form-select" onchange="onChange();">
<% for ( var i = 0; i<name.length; i++ ) { %>
<option value="<%= name[i] %>"> <%= name[i] %> </option>
<% } %>
</select>
<table class="table table-hover table-striped table-borderless">
<thead>
<tr class='table-dark'>
<th scope="col">Job Rank</th>
<th scope="col">Job Commissioner</th>
<th scope="col">Job ID</th>
<th scope="col">Job File Name</th>
<th scope="col">Job Size</th>
</tr>
</thead>
<tbody>
<% for(var i=0; i<command.length; i++){ %>
<tr>
<th scope="row"><%= command[i].rank %></th>
<th scope="row"><%= command[i].owner %></th>
<th scope="row"><%= command[i].identifier %></th>
<th scope="row"><%= command[i].files %></th>
<th scope="row"><%= command[i].totalSize %></th>
</tr>
<% } %>
</tbody>
</table>
</div>
<div class="table-responsive" style="padding: 20px 20px 50px 20px;" >
<h2>All Printer Jobs List</h2>
<table class="table table-hover table-striped table-borderless">
<thead>
<tr class='table-dark'>
<th scope="col">Printer name</th>
<th scope="col">Job Commissioner</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
<% for(var i=0; i<job.length; i++){ %>
<tr>
<th scope="row"><%= job[i].printername %></th>
<th scope="row"><%= job[i].owner %></th>
<th scope="row"><%= job[i].date %></th>
</tr>
<% } %>
</tbody>
</table>
</div>
<%- include('../views/partials/footer.ejs') %>
<!-- test function to test the onchange -->
<script>function onChange(){
console.log("ciao");
}</script>
</body>
</html>
my function sent with express, it's only a part of the whole file cupsApis.js, where all my functions are stored, like this i only have to do one request in app.js and i have them all available there, but that's the one i'm interested in
lpq = function (name) {
let self = this;
self = utils.list()[6];
let args = ["-P", self];
let lpq = spawnSync("lpq", args, { encoding: "utf-8" });
let stdoutSpawnSync = utils.parseStdout(lpq.stdout);
stdoutSpawnSync.shift();
stdoutSpawnSync.shift();
let InfoJob = stdoutSpawnSync.map(function (line) {
line = line.split(/ +/);
return {
rank: line[0] === "active" ? line[0] : parseInt(line[0].slice(0, -2)),
owner: line[1],
identifier: parseInt(line[2]),
files: line[3],
totalSize: parseInt(line[4]),
};
});
return InfoJob;
};
my express file
const express = require("express");
const app = express();
const cups = require("./api/cupsApis.js")
app.listen(3000);
app.set("view engine", "ejs");
app.get("/", (req, res) => {
res.redirect("/home");
res.render("home");
});
app.get("/home", (req, res) => {
res.render("home");
});
app.get("/lpq", (req, res) => {
const name = cups.lpstat()
const command = cups.lpq();
const job = cups.lpstatJobs();
res.render("lpqView", {
command,
job,
name,
});
});
app.get("/classes", (req, res) => {
res.render("classes");
});
app.get("/lpstat", (req, res) => {
const command = cups.lpstat();
res.render("lpstatView", {
command,
});
});
app.get("/lp", (req, res) => {
const command = lp("/home/finsoft/ProgettoStampanti/file/file.txt");
console.log("command", command);
res.render("lpView", {
command,
});
});
app.get("/lpadmin", (req, res) => {
const command = cups.lpadmin("PrinterProva2", "HP Printer", "FINSOFT");
res.render("lpadminView", {
command,
});
});
What i'm trying to achieve is a 'refresh' of this EJS page when i click on a different <option> of the <select>, and when it happens i will change the values inside the first table, so i will see the current jobs for the selected printer.
I tried to find something online and a AJAX call and a fetch where the first results, i tried learning something about those topics with some example, but failed.
can someone explain what should i do? are those the only to methods? am i doomed to study them?
The question almost looks like "implement a feature for me", but if the gist was: is it possible to make a dynamic form without using AJAX, then the answer is yes. You can define a <form> and submit it programmatically with JS in the onChange() function (instead of outputting "ciao").
AJAX would make the user experience much better though, since the page would not reload. It just looks weird if the user is on the form and suddenly page starts loading and then turns to be the same page with just a few fields changes. With AJAX you can display a nice in-progress animation (a spinner) and simply update the current page based on the server response. It slightly more work though.
So answering to your second question: you are doomed to study if you wish to be a good developer. And not only regarding AJAX but you'll have to study through your entire career.
I have a table in my nodeJS project that has data with a status. I would like to show this status in red and green. To render the HTML page I use EJS.
I've already tried using an if/else statement, but there I always get the first value of the statement.
MySQL:
SELECT g_id, g_name, g_status FROM games
EJS:
<table class="table table-hover">
<thead>
<tr class="table-info">
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<% if (data) {
data.forEach(function(game){
var status = game.g_status;
if (status = '1') {
status = 'color-green';
} else {
status = 'color-red';
}
%>
<tbody id="myTable">
<tr>
<td><%= game.g_name %></td>
<td><%= status %></td>
</tr>
</tbody>
<% }) %>
<% } %>
</table>
What's the problem, and how do I get the SQL output to a specific colour?
use ternary condition like this way :
<table class="table table-hover">
<thead>
<tr class="table-info">
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<% if (data) {
data.forEach(function(game){ %>
<tbody id="myTable">
<tr>
<td><%= game.g_name %></td>
<td><%= game.g_status=='1'?'color-green':'color-red' %></td>
</tr>
</tbody>
<% }) %>
<% } %>
well.
there is many places to look for.
read on equals operator in JavasScript
status is not part of the list, just app variable
create function returning color for given status
I have the following code in my server.js:
app.get('/animal/:id', function (request, response)
{
Animal.find({_id: request.params.id}, function(err, animals)
{
response.render('animal', { animals: animals });
})
})
I am trying to get the animal id to show up in the template url.
<table border='1'>
<tr>
<th>Name</th>
<th>Actions</th>
</tr>
<% for (var i in animals){ %>
<tr>
<td><a href='/animal/?id=**ID RIGHT HERE** %>><%= animals[i].name %></a></td>
<td><a href='#'>Edit</a> <a href='#'>Delete</a></td>
</tr>
<% } %>
</table>
If I just put in animals[i]._id, it treats as a string, but if I write it as <%= animals[i]._id %>, the whole column is removed.
use the expression, you shouldn't send this as query.
<%= animals[i]._id %> will be used as params id in your server.js and the <%= animals[i].name %> as anchor tag name
<table border='1'>
<tr>
<th>Name</th>
<th>Actions</th>
</tr>
<% for (var i in animals){ %>
<tr>
<td><a href='/animal/<%= animals[i]._id %>'><%= animals[i].name %></a></td>
<td><a href='#'>Edit</a> <a href='#'>Delete</a></td>
</tr>
<% } %>
</table>