Fetching database to node.js - javascript

I'm very beginner and doing small project to fetch mysql database table using node.js to webpage.
I been following one tutorial and I was confused how the script is written inside html between <% %> these symbols. When I tried like that, for me it didn't recognised as a script.
Could someone explain how to make it work? Do I need to install anything additional for it to work? Would appreciate for any advice!
<table border="1">
<tr>
<th>S.N</th>
<th>Full Name</th>
<th>Email Address</th>
<th>City</th>
<th>Country</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<%
if (userData.length != 0) {
var i = 1;
userData.forEach(function(data){
%>
<tr>
<td><%= i %></td>
<td><%=data.fullName %></td>
<td><%=data.emailAddress %></td>
<td><%=data.city %></td>
<td><%=data.country %></td>
<td>Edit</td>
<td>Delete</td>
</tr>
i++; }) %>
else { %>
<tr>
<td colspan="7">No Data Found</td>
</tr>
<% } %>
</table>
When I refresh my webpage with script written like it shows as a text on the webpage instead of giving functionality.
I know that script in html written between <script></script> tags, but in youtube video dude was showing this way, but didn't explain about it.

I presume you are trying to EJS templating. Have you installed the correct version of EJS (npm install ejs) on your server side in that case? Check for any parsing errors on the server console when you encounter the render error on the browser.

Related

NodeJS : Href of a table element

Maybe I'm missing out something basic
But for some reason this code is not working :
<tr class="students">
<td><%=it%></td>
<td class="rollNo" href="/documents/getDocs"><%=stud %></td>
<td><%=classroom.studentNames[stud]%></td>
</tr>
The table is getting displayed, but nothing happens on clicking
Please help
<td> elements don't have href attributes. Use an anchor:
<td class="rollNo"><%=stud %></td>

Add and show result of the sum of columns in a table

Good day.
I am a beginner in this, I have a table with the following records and I want to add the Red Team, Yellow Team and Turquoise Equipment column and show the sum in the labels that are at the top of the table
For this I attach my html code with jsp and the reference image
Score Table
<div class="tabs-body">
<div class="tabs-item" id="tab1">
<div class="container">
<div class="con-contador">
<label>Puntaje Rojo :</label>
<label id="projo" class="contador"></label>
<label >Puntaje Amarillo :</label>
<label id="pamarillo" class="contador"></label>
<label>Puntaje Turqueza :</label>
<label id="pturqueza" class="contador"></label>
Reporte
</div>
<div class="table-responsive-vertical" >
<table id="reporte" class="table table-bordered table-striped table-hover table-mc-light-blue">
<thead>
<tr>
<th>Disciplina</th>
<th>Categoria</th>
<th>Genero</th>
<th style="background-color: red">Equipo Rojo</th>
<th style="background-color: yellow">Equipo Amarillo</th>
<th style="background-color: turquoise">Puntaje Turqueza</th>
</tr>
</thead>
<tbody>
<%
for (int i=0; i < v.size();i++){
puntaje p = (puntaje)v.elementAt(i);
%>
<tr>
<td data-title="Disciplina"><%=p.getNombredeporte()%></td>
<td data-title="Categoria"><%=p.getCategoria() %></td>
<td data-title="Genero"><%=p.getGenero() %></td>
<td data-title="Puntaje"><%=p.getPuntaje1() %></td>
<td data-title="Puntaje"><%=p.getPuntaje2() %></td>
<td data-title="Puntaje"><%=p.getPuntaje3() %></td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</div>
</div>
</div>
I understand that it can be done with a function in javascript but I am still a newbie, I ask for your kind support.
Firstly I'd say that JSP is Java Server Pages, not javascript. JSP code gets run (for example, generating puntaje sums) on the server before the webpage is returned to the web browser. In contrast, javascript code is executed after the webpage is returned to the web browser. Since you already have JSP code, why not just run your code server-side? Perhaps another "for" loop that runs to generate sums before your elements. That said, if you really want to use javascript then the general procedure will be: add another data-attribute to your points TDs, like
<td data-puntaje-rojo=<%=p.getPuntaje1() %>>
Add classed spans to your labels like:
<label>Puntaje Rojo : <span class="puntaje-sum-rojo"></span></label>
Then in your javascript, use some form of selector to iterate over a collection/array of the TDs and store the sum of all data-puntaje-rojo values. Then, use javascript or jquery to inject the appropriate sum value into the appropriate label span.
While best practice is to store your javascript code in an external file on your web server website location, you can also write javascript directly inside of your JSP page, the javascript code must be inside tags. And, it's best to have your javascript code run after your HTML is fully loaded: javascript and jquery both provide ways to accomplish that.

Static HTML, want to use ruby on rails

I have an app that hosts a static HTML webpage with text and some images. I want to use ruby on rails to learn about it more.
I have a simple ror app. I went to app/views/home.html.erb, and pasted the HTML I have there. This is not the best approach.
Is there a better approach to port this Static HTML to ror?
Where do javascript files go in ror?
You should checkout high_voltage, which is a gem for static pages.
1) You have helpers in RoR ERB to help you with HTML, especially if you connect to a DB, for example from their help:
<table>
<tr>
<th>Title</th>
<th>Summary</th>
<th></th>
<th></th>
<th></th>
</tr>
<% #books.each do |book| %>
<tr>
<td><%= book.title %></td>
<td><%= book.content %></td>
<td><%= link_to "Show", book %></td>
<td><%= link_to "Edit", edit_book_path(book) %></td>
<td><%= link_to "Remove", book, method: :delete, data: { confirm: "Are you sure?" } %></td>
</tr>
<% end %>
</table>
<br />
<%= link_to "New book", new_book_path %>
Everything between <%= .... %> are RoR helpers, so it's really up to your application if RoR will help you with your static HTML or not (maybe since you say it's static, i.e. not dynamic at all, the best approach would just be to leave it as is.
2) Javascript files are placed under app/assets, and you should definitely read about the asset pipeline

How to replace an empty selector inside the underscorejs template

I have 2 backbone nested views that render a table of products for a shopping cart.
Every view has its own underscore template. When the cart is empty only the main view will render replacing the empty div with: "cart is empty". Unfortunately the following solution didn't work:
<div class="container">
<div class="twelve columns">
<table class="standard-table">
<thead>
<tr>
<th>Remove</th>
<th>Product code</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody class="cart-table-body">
<% if (typeof(product_id)=="undefined") { %>
<tr>
<td>cart is empty</td>
</tr>
<% } %>
</tbody>
</table>
</div>
</div>
The nested template
<td><i class="icon-remove-sign"></i></td>
<td><%= product_id %></td>
<td><%= product_name %></td>
<td><%= price %></td>
<td><%= quantity %></td>
<td><%= price*quantity %></td>
I think, you never pass product_id into the first template, meaning it always shows cart is empty. You should pass there some flag variable like products_length or empty_cart so the template could check if cart is empty.
Also with this approach you need a way to check whether you add first product and in that case replace existing innards of cart-table-body (cart is empty message) with a first added product view element. Then append views of following elements.

CSV to html table - client side

I have a table that I want to append variable data to. I currently have the data in CSV format, and call the csv to HTML using PHP. The PHP call $line_of_text[10] allows me to access whatever data I want. However I need to do it client side not server side.
I have been looking into Javascript arrays, and these may or may not be the best idea. If there is code to parse the data, I would also need the actual code to call it from the HTML page, and put it into the table.
My table is like this: ( see JS Fiddle: http://jsfiddle.net/72jQR/2/)
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<td>Code</td>
</tr>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Size</td>
</tr>
</table>
And After the information from the csv or array or whatever - it looks like this:
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<td>Code</td>
<td>From DATA 12345</td>
</tr>
<tr>
<td>Description</td>
<td>From DATA</td>
</tr>
<tr>
<td>Size</td>
<td>500</td>
</tr>
</table>
What is the best way to do this client side?
This jQuery plugin should do it for you client-side: http://code.google.com/p/js-tables/
In particular see this page with an example: http://code.google.com/p/js-tables/wiki/Table
There is a CSV to HTML online service at:
http://okfnlabs.org/blog/2013/12/05/view-csv-with-data-pipes.html
There is also a very simple, lightweight javascript library here you could use: https://github.com/okfn/csv.js (very few dependencies)

Categories