I am looking for a solution for my EJS template. I am working on a project and I have completed about 50% of it. Currently I am working on a web page where I have to display the SQL data into EJS web template.
I have posted my coding which is i am working on it.
data is receiving from database (I checked with console.log and I posted the Json out put).
I tried all the possible ways to work it out but I did not get the result. It would be great if someone could help me..
Thanks in advance.
/* app.js */
app.get('/data', receiveData);
function receiveData(req, res)
{
db.executeSql("SELECT * FROM arduino", function (recordsets, err, ) {
var data = JSON.stringify(recordsets);
if (err) {
httpMsgs.show500(request, res, err);
}
else {
var Jdata = JSON.parse(data);
res.render('arduino',{Jdata:Jdata});
console.log(data);
}
});
}
/* arduino.ejs */
<html>
<head>
<body>
<div class="page-data">
<div class="data-table">
<table border="1" cellpadding="7" cellspacing="7">
<tr>
<th> - </th>
<th>ID</th>
<th>Machine</th>
<th>Start Time</th>
<th>End Time</th>
<th>Length Time</th>
<th> Day/Night</th>
<th>Job Number</th>
</tr>
<% if(Jdata.length){
for(var i = 0;i < Jdata.length;i++) { %>
<tr>
<td><%=(i+1)%></td>
<td> </td>
<td><%=Jdata[i].Machine%></td>
<td><%=Jdata[i].StartTime%></td>
<td><%=Jdata[i].EndTime%></td>
<td><%=Jdata[i].LengthTime%></td>
<td><%=Jdata[i].Day%></td>
<td><%=Jdata[i].ID %></td>
<td><%=Jdata[i].JobNumber %></td>
</tr>
<% }
}else{ %>
<tr>
<td colspan="3">No Data</td>
</tr>
<% } %>
</table>
</div>
</div>
</body>
</head>
</html>
{"recordsets":[[{"ID":1,"Machine":"TRUMPF 5000","StartTime":"2018-11-01T15:28:51.000Z","EndTime":"2018-11-01T15:52:11.000Z","LengthTime":271,"Day":"Day","JobNumber":null}]]
Related
I am facing the problem in redirecting to index page. Instead page refreshes to same create page perhaps due to large size images are still copying but why page refreshing instead of images waiting copying to finish and then redirecting.
module.exports.create_customModel_post = async (req, res) => {
const {images} = req.files
let myPromise = []
if (images) {
const dir = `./public/${req.body.slug}`
fs.mkdirSync(dir, { recursive: true });
for (let i = 0; i < images.length; i++) {
const uploadTo = `${dir}/${images[i].name}`
myPromise.push(new Promise(function(resolve, reject) {
images[i].mv(uploadTo, (err) => {
if(err){
reject(err);
}else{
resolve(uploadTo);
}
});
}));
}
}
Promise.all(myPromise).then(function(values) {
console.log(values),
// THIS REDIRECT IS NOT WORKING
res.redirect('/admin/custom-models')
}).catch(function (reasons) {
console.log(reasons);
});
}
Response from server
POST /admin/create-custom-model - - ms - -
new model is created & saved
[
'./public/testing/attachment_48549925.svg',
'./public/testing/brand-name.png',
'./public/testing/design.svg',
'./public/testing/model-name.png',
'./public/testing/path9080.png',
]
GET /admin/create-custom-model 200 12.375 ms - -
here is form I am using. Removed extra
<main>
<section class="">
<div class="container">
<h1>Create Custom Model</h1>
<table class="">
<form enctype="multipart/form-data" method="post">
<tr>
<td></td>
<td>
<input type="file" name="images" multiple>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Cancel </td>
<td><button type="submit" >Save</button></td>
</tr>
</form>
</table>
</div>
</section>
</main>
I want to use the "Flat Json"-Bootstrap 5 Table example. [Link][1]
I am using expressjs with nodejs and ejs.
My Code so far:
```<link href="https://unpkg.com/bootstrap-table#1.18.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.18.1/dist/bootstrap-table.min.js"></script>
<body>
<h2>JOB DASHBOARD</h2>
<table id="table" data-toggle="table" data-flat="true" data-search="true" >
<thead>
<tr>
<th data-field="" data-sortable="true">Order ID</th>
<th data-field="" data-sortable="true">Liefertermin</th>
<th data-field="" data-sortable="true">Fertigstellungstermin</th>
<th data-field="" data-sortable="true">Keyline Nr</th>
</tr>
</thead>
<tbody>
<% var count = 0; %>
<% orders.forEach((order)=>{ %>
<tr data-index="<%= count %>">
<td><%= order.order_id %></td>
<td><%= order.due_at %> </td>
<td><%= order.deliver_at %> </td>
<td><%= order.keyline_obj.event.data.attributes.reference %> </td>
</tr>
<% count +=1; %>
<% }) %>
</tbody>
</table>
</body>
</html>```
I am loading the content from my mongoDB Database. The Variable "orders" is an array of order documents.
At the moment the data is loading but the searchfield doesnt appear at all and all the styling doesnt work although I have loaded the bootsrap css and js.
[1]: https://examples.bootstrap-table.com/index.html?bootstrap5#welcomes/flat-json.html
i think the problem is that the is successfully sent but the respond is in json as the browser waiting
you can check data is received or not by => clicking right click on the screen =>press inspect => Network => click on the page file => then choose Response
you will find your html page with the updated data in it
you can render it from your js script after fetching api like so
await fetch(----your fetching code-----).then(res=>{
document.open();
res.text().then(function(text) {
document.write(text)
});
})
I am working on a project but unable to find the bug i have made in the following code.
I dont find any issues (imo) in the following code but somehow it's not posting requests.
Im unable to receive post requests on this route:
Error: Cannot POST /campgrounds/5c023e5f1452761b2b937e91/maketreasurer
router.post("/:id/adminpanel/maketreasurer",function(req,res){
res.send("posted");
});
Im sending my request from this page:
<% include ../partials/header %>
//show all faculty heads
//select faculty header
//assign faculty head
<h3>Users</h3>
<table id="t01">
<tr>
<th>firstname</th>
<th>----</th>
<th>Username</th>
<th>----</th>
<th>Faculty Number</th>
<th>----</th>
<th>Student Number</th>
<th></th>
</tr>
<% parm.users.forEach(function(users){ %>
<tr>
<td><%= users.firstname %></td>
<td></td>
<td><%= users.username%></td>
<td></td>
<td><%= users.facultynumber%></td>
<td></td>
<td><%= users.studentnumber%></td>
</tr>
<% }); %>
</table>
</form>
Make A Treasurer
<form action="/campgrounds/<%=parm.id%>/maketreasurer"
method="POST">
<button>Submit</button>
</form>
The error is pretty obvious,
Cannot POST `/campgrounds/5c023e5f1452761b2b937e91/maketreasurer`
where id = 5c023e5f1452761b2b937e91
Now, you're route is /:id/adminpanel/maketreasurer considering /campgrounds as base url, where is adminpanel? The post request should have been:
/campgrounds/5c023e5f1452761b2b937e91/adminpanel/maketreasurer
I'm using Node.js with bootstrap 4 and to display data in ejs file, I used bootstrap table from this link.
https://datatables.net/examples/styling/bootstrap4.html
The Issue is then I put static data in table it works fine. But when I fetch from database(MySql) and going to print data. Data print's fine but search and pagination not active/display.
When page load I have set this code to active it.
<script>
$(document).ready(function () {
$('#example').DataTable({
"paging": true,
"ordering": true,
"info": false
});
});
</script>
And in table I print data in this way.
<tbody>
<% if(data.length > 0) { %>
<% for(var i = 0 ; i < data.length ; i++){ %>
<tr>
<td>
<%= i+1 %>
</td>
<td>
<%= data[i].customer_name %>
</td>
</tr>
<% } %>
<% } %>
</tbody>
As I look into your code, Every thing looks good. I have a sample working code in same situation. It may help you.
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Index</th>
<th>Your_header_name</th>
</tr>
</thead>
<tbody>
<% if(data.length > 0) { %>
<% for(var i = 0 ; i < data.length ; i++){ %>
<tr>
<td>
<%= i+1 %>
</td>
<td>
<%= data[i].filed_name %>
</td>
</tr>
<% } %>
<% } %>
</tbody>
</table>
I'm trying to get selected rows from a table in express js.
Here is a html+ejs table code I have in my ejs view file. I'm trying to get only the rows where the checkbox is checked.
<table class="table">
<thread class = "thread-inverse">
<tr>
<th>Item Id</th>
<th>Name</th>
<th>Category</th>
<th>Manufacturer</th>
<th>Supplier</th>
<th>Buying Price</th>
<th>Selling Price</th>
<th>Action</th>
</tr>
<% for(var i =0; i < itemList.length; i++){%>
<tr>
<td><%= itemList[i].productId %></td>
<td><%= itemList[i].itemName %></td>
<td><%= itemList[i].category %></td>
<td><%= itemList[i].manufacturer %></td>
<td><%= itemList[i].supplier %></td>
<td><%= itemList[i].buyingPrice %></td>
<td><%= itemList[i].sellingPrice %></td>
<td><input type="text" name="quantity""></td>
<td><input type="checkbox" name="productId" value="<%= itemList[i].productId %>"> | ADD </td>
</tr>
<% } %>
</thread>
</table>
I have tried several things but nothing is working..
Can anyone please give me a solution ?
Modify your code a bit,
//HTML
//add a **onclick** listener on checkbox
<td><input type="checkbox" class="checkbox" name="productId" value="<%= itemList[i].productId %>"> | ADD </td>
//In java script file
$('.checkbox').click(function() {
var productId = $(this).closest("tr").find('td:eq(0)').text();
//changing td:eq(x) will give you corresponding clicked row's cell
}
I tried with the following way, and works well.
Modify the code snippet by adding class name to :
<% for(var i =0; i < itemList.length; i++){%>
<tr class="tbl-item">
...
<% } %>
And implement the click function:
$(".checkbox").each(function(index) {
$(this).click(function(e) {
let item = $(".tbl-item")[index];
console.log(item);
}) ;
})
Then the console will show the desired tag data and you can get every item like:
item.children[4].innerText
Thanks.