We Keep Coding

Fetching database to node.js

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.

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.

Getting undefine trying to get the ObjectId of a Collection

i'm making a voting system for a Message Board app using Backbone.
The problem here is that when i try to get the objectId of an object and set it as a "rel" attribute in a certain tag the attribute is set as "undefined" .
<% if(models.length>0) {
_.each(models, function(value, key, list) {%>
<tr>
<td><%= value.attributes.username %></td>
<td><%= value.attributes.message %></td>
<td>
<table>
<tr>
<td><a id="voteUp" class="btn btn-default btn-sm" rel="<%= value.attributes.objectId%> "><img width="30" src="img/appbar.thumbs.up.png"/></a></td>
<td width="30">
+<%= value.attributes.thumbsup %>
</td>
<td>
<a id="voteDown" class="btn btn-default btn-sm" rel=" <%= value.attributes.objectId %> "><img width="30" src="img/appbar.thumbs.down.png"/></a>
</td>
<td width="30">
-<%= value.attributes.thumbsdown %>
</td>
</tr>
</table>
</td>
</tr>
<% });
In my DB on Parse the objectId is show but i only can access to username, message, thumbsup, thumbsdown.
Here is my jsfiddle with my complete home.html and app.js

I think you should debug the backbone/parse collection layer and first determine what TYPE reference you are dealing with??
attributes OR objects at the level of entries in the backbone collection
The answer to that determines how you get backbone to unwrap the individual collection entries.
Note this thread remembering that parse referents can be a little finicky regarding the valueOf(objectId).
If you are getting other field values OK from the target class and the objectId is the only one with bug, then this is definitely the issue.

jquery not picking up html

So I have the following HTML
<div class="tmpl" id="query_tmpl">
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</div>
and the following JS:
console.log($('#query_tmpl').html());
For some reason this only logs the 'a' tag. (Ex: http://jsfiddle.net/L8RQq/ )
Why does this happen and how do I get around it so that I can properly pick up the tr/td? I'm using jQuery 1.9.2 if that makes any difference.
Update:
Yes, the markup is 'bad html', but the whole point of this question is how to get around that. Using the HTML present and without altering it, how can I grab the contents even though it's 'bad'?

You don't have table tags around your tr. Try this:
<div class="tmpl" id="query_tmpl">
<table>
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</table>
</div>
This will log the div's contents properly.
the reason it wasn't logging, is because the browser sees some invalid tr and td tags, and removes those, because they can only be in a table, leaving you with only the a.
If you can't change the markup, tell the person / company that wrote that markup to fix it. It's invalid HTML.

Make it like this
<table class="tmpl" id="query_tmpl">
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</table>
Then it will surely work correctly

If you want to pick up tr's or td's you can use css manipulation functions such as children([selector]) where selector is eventually a class

Making whole table row linkable with JQuery issue

Here is HTML markup of 2 rows from my huge table (which generated by PHP and applied Datatables after that)
<tr url="?page=item&id=850">
<td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="850" class="checkbox"/> 850</td>
<td> 9007</td>
<td style="text-align:center">BK</td>
<td style="text-align:center">41</td>
<td style="text-align:center" id="qt">1</td>
<td style="text-align:center">7</td>
<td style="text-align:center">11</td>
<td>09.02.2012</td>
</tr>
And here is second row
<tr url="?page=item&id=587">
<td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="587" class="checkbox"/> 587</td>
<td> 779-59</td>
<td style="text-align:center">BR</td>
<td style="text-align:center">37</td>
<td style="text-align:center" id="qt">2</td>
<td style="text-align:center">15</td>
<td style="text-align:center">14</td>
<td>08.02.2012</td>
</tr>
Function below works for 90% rows. I really have no idea why this script works for second row from examples but doesn't do anything for first row. These 2 rows are nearly same.
$("td").not('.item_id').click(function(){
window.open ($(this).closest("tr").attr("url"));
});
How do you think, what can cause this problem?

Instead use this which will attach click handler on tr and ignore if clicked on checkbox or its containing cell. Try this.
$("tr").click(function(){
window.open($(this).attr("url"));
});
$("td.item_id").click(function(e){
e.stopPropagation();
});
Alertnatively you can also use event.target to check if it is checkbox don't do any this.
$("tr").click(function(e){
if(!$(e.target).is(':checkbox') && !$(e.target).is('.item_id')){
window.open($(this).attr("url"));
}
});

I understand this piece:
$("td").not('.item_id').click(function(){
...
});
But could this piece be updated to perform better?
window.open ($(this).closest("tr").attr("url"));
Also, does the property url validate? You may want to use data attributes for a more predictable experience. Maybe this would work better:
<tr data-url="">
...
</tr>
with your window open even like this:
window.open( $(this).parent().attr("data-url") );
See this example: http://jsfiddle.net/Zuhrx/

its working HERE something else is wrong. Are you wrapping up the code in ready handler?