Fetch drop down box multi selector - jsp-tags

I have written this program to fetch the drop down multi selector data from the data base and show all the options of multi selectors with highlighting the selected ones with the rest options.
<% String[] skills=(String[])request.getAttribute("skills");
//skills[]={"Core Java","Hibernate","Sql}; // it is dynamic d
String[] allSkills={"Core Java","J2ee","Spring","Hibernate","Sql",".net"};
%>
<tr>
<td>Skills Known</td>
<td><select name="skills" multiple STYLE="width: 148px">
<% for(int i=0;i<allSkills.length-1;i++){
for (int j=0;j<skills.length-1;j++){
if(allSkills[i].equals(skills[j])){%>
<option value=<%=allSkills[i] %> selected="selected"><%=allSkills[i] %></option>
<%return; %>
<%}else if(j==skills.length-1){%>
<option value=<%=allSkills[i] %>><%=allSkills[i] %></option>
<%}
}
}%>
</select>
</td>
</tr>

<%
/* get the skills as a array from the data base*/
String[] skills = (String[]) request.getAttribute("skills");
/* write all the options availbale in the drop do*/
String[] allSkills = { "Core Java", "J2ee", "Spring", "Hibernate", "Sql", ".net"
>%
/* the code for multiple selector will be */
<tr>
<td>Skills Known</td>
<td><select name="skills" multiple STYLE="width: 148px">
<%
for (int counter = 0; counter < allSkills.length; counter++) {
int status = 0;
for (String str : skills) {
if (!(str.equalsIgnoreCase(allSkills[counter]))) {
continue;
} else {
status++;
}
}
if (status > 0) {
%>
<option value="<%=allSkills[counter]%>" selected="selected"><%=allSkills[counter]%></option>
<%
} else {
%>
<option value="<%=allSkills[counter]%>"><%=allSkills[counter]%></option>
<%
}
}
%>
</select></td>
</tr>

Related

ASP.NET Core MVC - How to display data from Excel into HTML table before inserting into the DB

In ASP.NET Core-6 MVC, I have excel file (student.xlsx) with this code:
Model:
public class Students
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int AdmissionYear { get; set; }
public string RegistrationNo { get; set; }
}
Controller:
public async Task<IActionResult> Upload(IFormFile file)
{
if (file == null)
{
return RedirectToAction(nameof(Index));
}
List<Students> studentList = new List<Student>();
using(var memoryStream = new MemoryStream())
{
await file.CopyToAsync(memoryStream).ConfigureAwait(false);
using(var package = new ExcelPackage(memoryStream))
{
var worksheet = package.Workbook.Worksheets[0];
if (worksheet.Dimension.Rows > 0 && worksheet.Dimension.Columns > 0)
{
for (int row = 2; row <= worksheet.Dimension.Rows; row++) // start at row 2 to skip header
{
Students student = new Students();
student.FirstName = worksheet.Cells[row, 1].Value.ToString();
student.LastName = worksheet.Cells[row, 2].Value.ToString();
student.AdmissionYear = int.Parse(worksheet.Cells[row, 3].Value.ToString());
student.RegistrationNo = worksheet.Cells[row, 4].Value.ToString();
studentList.Add(student);
}
}
}
}
return View("Index", studentList);
}
View:
<div class="form-group">
<label name-for="file">Excel xlsx Upload</label>
<input type="file" name="file" />
</div>
<input type="button" name="display" value="Show Data" id="btnShow" class="btn btn-primary" />
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th class="table-head">
<input type="checkbox" onchange="checkAll(this)" name="chk[]" />
</th>
<th>First Name</th>
<th>Last Name</th>
<th>AdmissionYear</th>
<th>RegistrationNo</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="middle" align="center" style="width: 2%;">
<input type="checkbox" onchange="checkSingle(this)" name="chk[]" />
</td>
<td></td>
<td></td>
<td> </td>
<td></td>
</tr>
</tbody>
</table>
As soon as the user choose the excel file to be uploaded, when he clicks on choose file, and clicks on Show Data, it should display the excel data in the table in html without even the submit upload button
I want to first display the imported data into HTML table in the view page before the user then submits and insert into the DB.
How do I achieve this?
Thanks
You can use JavaScript to monitor the status of the file, then read the file and load it through xlsx.full.
You can refer to my test code below:
<div class="container">
<h2 class="text-center mt-4 mb-4">Convert Excel to HTML Table using JavaScript</h2>
<div class="card">
<div class="card-header"><b>Select Excel File</b></div>
<div class="card-body">
<input type="file" name="file" id="excel_file" />
<input type="button" name="display" value="Show Data" id="btnShow" onclick="ShowData()" class="btn btn-primary" />
</div>
</div>
<div id="excel_data" class="mt-5"></div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonyous" />
<script type="text/javascript" src="https://unpkg.com/xlsx#0.15.1/dist/xlsx.full.min.js"></script>
<script>
var table_output = "";
var excel_file = document.getElementById("excel_file");
excel_file.addEventListener("change",(event) =>{
var reader = new FileReader();
reader.readAsArrayBuffer(event.target.files[0]);
reader.onload = function(event){
var data = new Uint8Array(reader.result);
var work_book = XLSX.read(data,{type:'array'});
var sheet_name = work_book.SheetNames;
var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]],{hearder:1});
if(sheet_data.length > 0)
{
table_output += '<table class="table table-striped table-bordered">';
table_output += '<thead><tr><th>First Name </th><th> Last Name </th><th> AdmissionYear </th><th> RegistrationNo </th></tr></thead>';
table_output += '<tbody>';
for(var row = 0; row < sheet_data.length; row++)
{
table_output += '<tr>';
table_output += '<td>' + sheet_data[row].FirstName + '</td>';
table_output += '<td>' + sheet_data[row].LastName + '</td>';
table_output += '<td>' + sheet_data[row].AdmissionYear + '</td>';
table_output += '<td>' + sheet_data[row].RegistrationNo + '</td>';
table_output += '</tr>';
}
table_output += '</tbody></table>';
}
}
})
function ShowData()
{
document.getElementById("excel_data").innerHTML = table_output;
}
</script>
Test Result:
When file is selected and ShowData is clicked:
Hope this can help you.
You can import the Sheetjs library which can read your excel file and render it to a table. Demo
The library can read your data into Json, you can modify that Json to add an empty column and then hook into the render event to render the checkbox.

Convert form select box from .pug to .ejs

I'm trying to convert the below from pug to ejs. It's a select box of authors (from an associated collection) in a form to add a book to the db. It throws error "Cannot read property '_id' of undefined" pointing to the first option element when I add a new book (but I can update an existing book for some reason). And in the pug version it doesn't throw this error. Is my conversion right?
select#author.form-control(type='select', placeholder='Select author' name='author' required='true' )
- authors.sort(function(a, b) {let textA = a.family_name.toUpperCase(); let textB = b.family_name.toUpperCase(); return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;});
for author in authors
if book
option(value=author._id selected=(author._id.toString()==book.author._id.toString() ? 'selected' : false) ) #{author.name}
else
option(value=author._id) #{author.name}
My conversion:
<select class="form-control" id="author" type="select" placeholder="Select author" name="author" required="true">
<% authors.sort(function(a, b) {let textA = a.family_name.toUpperCase(); let textB = b.family_name.toUpperCase(); return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;}); %>
<% authors.forEach(function(author) { %>
<% if(typeof book !== 'undefined') { %>
<option value="<%= author._id %>" selected=<%= (author._id.toString() == book.author._id.toString()) ? 'selected' : 'false' %>><%= author.name %></option>
<% } else { %>
<option value="<% author._id %>"><%= author.name %></option>
<% } %>
<% }) %>
</select>
The conversion is right. Just a little mistake here <%= instead of <%
<option value="<%= author._id %>"><%= author.name %></option>
For any reason book.author is not present. Pug is catching undefined variables and continues rendering while ejs doesn't. So there is something wrong in your data.
Modify this line to prevent the error <% if(typeof book !== 'undefined' && 'author' in book) { %>
<select class="form-control" id="author" type="select" placeholder="Select author" name="author" required="true">
<% authors.sort(function(a, b) {let textA = a.family_name.toUpperCase(); let textB = b.family_name.toUpperCase(); return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;}); %>
<% authors.forEach(function(author) { %>
<% if(typeof book !== 'undefined' && 'author' in book) { %>
<option value="<%= author._id %>" selected=<%= (author._id.toString() == book.author._id.toString()) ? 'selected' : 'false' %>><%= author.name %></option>
<% } else { %>
<option value="<%= author._id %>"><%= author.name %></option>
<% } %>
<% }) %>
</select>

Bootstrap table search and pagination is not work properly

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>

How to make the pagination a component in Sailsjs?

I use sailsjs and ejs template engine to build my website. And I use bootstrap. I have found that the pager appears in almost of my pages. So I want to make it a component, which can be inserted into other ejs pages without pain. Because each pager has different jump urls but with the same page query, include keyword might not help from ejs.
How can I do it?
You can achieve this with a pattern like this
a template.ejs
<% if (typeof paginateurl != 'undefined' && typeof count != 'undefined') { %>
<div class="col-md-12 col-xs-12 col-lg-12">
<ul class="pagination col-md-8 col-xs-12 tcenter">
<% for (i = 1; i < totalpages; i++) { %>
<li <% if (i == currentpage) { %> class="active" <% } %>>
<%- i %></li>
<% } %>
</ul>
</div>
<% }%>
and by adding this in your listing template
<% include pagination %>
More complex example with next/prev button:
There is still some logic in this template, couse i have no time to refactor it. It is there to make it look more like this:
Prev 1 ... 3 4 5 6 7 ... 10 Next
<% if(pages > 1) { %>
<div class="prev">
<% if(page > 1) { %>
Prev
<% } %>
</div>
<div class="numbers">
<% if(page == 1) { %>
<span class='current'>1</span>
<% } else {%>
<a class='page' href="<%= link + linkDelimiter + 1 %>">1</a>
<% } %>
<% if((page - 2) > 1) { %>
...
<% } %>
<% var start = page - 1 %>
<% var end = page + 1 %>
<% var addToStart = end - pages %>
<% if (addToStart < 0) { %>
<% addToStart = 0 %>
<% }; %>
<% var addToEnd = 3 - end %>
<% if (addToEnd < 0) { %>
<% addToEnd = 0 %>
<% }; %>
<% for(var i=(start - addToStart); i <= (end + addToEnd); i++) {%>
<% if(i > 1 && i < pages) { %>
<% if(page == i) { %>
<span class='current'><%= i %></span>
<% } else { %>
<a class='page' href="<%= link + linkDelimiter + i %>"><%= i %></a>
<% } %>
<% } %>
<% }%>
<% if((page + 2) < pages) { %>
...
<% } %>
<% if(page == pages) { %>
<span class='current'><%= pages %></span>
<% } else { %>
<a class='page' href="<%= link + linkDelimiter + pages %>"><%= pages %></a>
<% } %>
</div>
<div class="next">
<% if(page < pages) { %>
Next
<% } %>
</div>
<% } %>

trouble embedding ejs tags inside other ejs tags

I'm trying to execute a for loop within one of my ejs templates. It's a board for a game and I want to be able to vary the dimensions with an ejs variable <%= units %> but I'm having trouble because I'm using this as the parameter for my loop
<div id="boardGridContainer">
<table class="boardGrid">
<% for(var i = 0; i < <%= units %> - 1; i++ ) { %>
<tr>
<% for(var j = 0; j < <%= units %> -1; j++){ %>
<td></td>
<% } %>
</tr>
<% } %>
</table>
</div>
any suggestions on how to accomplish this, or perhaps better ways to do it are appreciated
There is no way to use ejs tags inside of other ejs tags. And you don't need it for your stuff. You can access any exported variables in any ejs tags. For your example:
<div id="boardGridContainer">
<table class="boardGrid">
<% for(var i = 0; i < units - 1; i++ ) { %>
<tr>
<% for(var j = 0; j < units - 1; j++){ %>
<td></td>
<% } %>
</tr>
<% } %>
</table>
</div>

Resources