i am currently using NodeJS with ejs Templates an a mySQL Database.
I created an ejs which can print a table dynamically which represents a table in the Database:
The Code looks like this:
<% for(var i=0; i<info.length; i++) {%>
<tr>
<td><b><%= info[i].id %></b></td>
<td><%= sinfo[i].path %></td>
</tr>
<% } %>
This work fine.
Somewhere in the same ejs you can find form with an input field.
Looks like this:
<input type="text" name="id" placeholder="id input"required>
Now i want to create a button in every row of the table.
When pressing the button the id-entry out of the colum where the button is in should be filled into my Form-Field. So every row would have one button!
I can't find a way to accomplish this.
This should work:
<% for(var i=0; i<info.length; i++) {%>
<tr>
<td><b><%= info[i].id %></b></td>
<td><%= info[i].path %></td>
<td><input type="button" onclick="document.getElementById('myText').value='<%= info[i].id %>'" value="Click" /></td>
</tr>
<% } %>
Than set the id myText to your input text:
<input type="text" name="id" id="myText" placeholder="id input">
A cleaner solution is to create a function somewhere in your javascript code:
function onClick(id){
document.getElementById('myText').value=id;
}
And so your ejs code will be:
<% for(var i=0; i<info.length; i++) {%>
<tr>
<td><b><%= info[i].id %></b></td>
<td><%= info[i].path %></td>
<td><input type="button" onclick="onClick('<%= info[i].id %>')" value="Click" /></td>
</tr>
<% } %>
Related
I have a code problem I need to do for a class. I have a database that has users, another table has the titles which the user has access to. I'm trying to make a page where they can edit a user and when they click the button the form fills automatically with the id, first name and last name fine.
Now I'm trying to show what access the user selected has access to at the moment. And what I thought would just be a simple if statement has turned into a headache, it seems I can't access the id variable inside the html code that I want to insert and when I try to put the if statement outside, it says errors with the http headers, like it is sending too many renders. How can I accomplish this?
So here the code works but it loads the tabs of all of the users but I would like to filter the results based on the id.
<tbody>
<% all_users_to_modify.forEach(function(row){ %>
<tr>
<td>
<button class="btn btn-primary m-b-0"
onClick="fillForm('<%= row.id %>','<%= row.f_name %>','<%= row.l_name %>');";
onclick="moneyCalc('<%= row.id %>')" >
<%= row.id %>
</button>
</td>
<td><%= row.f_name %></td>
<td><%= row.l_name %></td>
<td><%= row.email %></td>
<td><%= row.phone_number %></td>
</tr>
<% }); %>
</tbody>
<table class="table table-striped table-bordered nowrap">
<thead>
<tr>
<th>Acceso</th>
</tr>
</thead>
<tbody id="lastResult">
</tbody>
</table>
function moneyCalc(id) {
'use strict';
var id = document.getElementById('id').value;
if (id) {
var html_to_insert = `
<% list_of_all_users_tabs.forEach(function(row1){ %>
<tr>
<td><%= row1.tab_name %> </td>
</tr>
<% }); %>
`;
lastResult.innerHTML += html_to_insert;
}
}
Now this is what I would like to do, in each row of the list_of_all_users_tabs it has a column that is the user_id and the other column is tab_name. So I have had two ideas but neither seem to work.
First idea was to put a while loop to compare the user_id in the db and the input id however I get: Error [ERR_HTTP_HEADERS_SENT]:
function moneyCalc(id) {
'use strict';
var id = document.getElementById('id').value;
if (id) {
while(list_of_all_users_tabs.user_id == id) {
var html_to_insert = `
<% list_of_all_users_tabs.forEach(function(row1){ %>
<tr>
<td><%= row1.tab_name %> </td>
</tr>
<% }); %>
`;
lastResult.innerHTML += html_to_insert;
}
}
}
Second idea had an if statement in the html code however it says id not defined:
function moneyCalc(id) {
'use strict';
var id = document.getElementById('id').value;
if (id) {
var html_to_insert = `
<% list_of_all_users_tabs.forEach(function(row1){ %>
<% if(row1.id == id) { %>
<tr>
<td><%= row1.tab_name %> </td>
</tr>
<% } %>
<% }); %>
`;
lastResult.innerHTML += html_to_insert;
}
}
Wrap your javascript code into <script> tag.
<script>
//Your code goes here
</script>
You need to set you header status to 200 in your route file.
res.json({
success: 'updated',
status: 200
})
And write you JS code inside <script> </script> tags only.
My table filter in html with Javascript does not work. I'm trying to filter a table generated from a ruby on rails query. I want to filter the table by the fields in the first column, I have a code that I tried with a simple table and it works fine, but using the same function in the ruby on rails html table does not work. I think tr [i] .style.display = "none";It does not work, but I'm not sure. When I run the filter, the table is recharged but remains the same.
<table id = "myTable" class="table table-hover table-bordered">
<thead>
<tr align="justify-center">
<th>Pais</th>
<th>Jugador</th>
<th>Partido</th>
<th>Minuto</th>
<th>Tarjeta</th>
</tr>
</thead>
<tbody>
<tr align = "center">
<td> Alemania </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<% #tarjetasAmarilla.each do |tarjAm| %>
<tr align="center">
<td><%= tarjAm.player.country.nombre %></td>
<td><%= tarjAm.player.nombre %> <%= tarjAm.player.apellido
%> </td>
<td><%= #calendarios[tarjAm.match.calendar.id-1]
[0].country.nombre %> - <%= #calendarios[tarjAm.match.calendar.id-1]
[1].country.nombre %></td>
<td><%= tarjAm.minuto %>'</td>
<td><span class ="fa fa-sticky-note" style="color:yellow">
</span></td>
</tr>
<% end %>
<% #tarjetasRojas.each do |tarjAm| %>
<tr align="center">
<td><%= tarjAm.player.country.nombre %></td>
<td><%= tarjAm.player.nombre %> <%=
tarjAm.player.apellido %> </td>
<td><%= #calendarios[tarjAm.match.calendar.id-1]
[0].country.nombre %> - <%= #calendarios[tarjAm.match.calendar.id-1]
[1].country.nombre %></td>
<td><%= tarjAm.minuto %>'</td>
<td><span class ="fa fa-sticky-note" style="color:red">
</span></td>
</tr>
<% end %>
</tbody>
</table>
Javascript
function myFunction(id) {
var input, filter, table, tr, td, i, j, visible;
input = document.getElementById(id);
filter = input.id.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
visible = false;
td = tr[i].getElementsByTagName("td");
if (td[0] && td[0].innerHTML.toUpperCase().indexOf(filter) > -1) {
visible = true;
}else {
visible = false;
}
if (visible === true) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
I have a table in an ejs file that loop through a collection(schema) and populate the information. i want to add the values of 2 cells(subQamount and subClaimsum) in that table and show it in another cell(the last one). Apparently i cant use a javascript function and get the element by id (it only get the element of first run). Is there any other way I can do this math?
Here is the table:
<% tracker.subcontractors.forEach(function(data){ %>
<tr>
<td class="button"><%= data.subName %></td>
<td class="button"><%= data.subContact %></td>
<td class="button"><%= data.subQno %></td>
<td class="button">$ <%= commaNumber(data.subQamount) %></td>
<td class="button">$ <%= commaNumber(data.subClaimsum) %></td>
<td class="button"><button style="font-size:13px; padding: 2px; margin-left: 20px;" class="btn btn-info">open</button></td>
<td class="button">$ </td>
</tr>
You just need to add these 2 :
<%= commaNumber(data.subQamount) + commaNumber(data.subClaimsum) %>
Im trying to render a table, my variable was extracted from mongodb. This is my attempt in index.ejs
what have I done wrong here?
<table>
<tr>
<th>HomeTeam</th>
</tr>
<% for (var i = 0; i < result.length; i++) { %>
<tr>
<td><%= result[i].hteam %> </td>
</tr>
<% }); %>
</table>
In the console I get syntax error.
Any help to compile this would be much helpful as it has taken me several weeks to reach this point in my project :)
frederik
You have unnecessary bracket in closing for.
I think it should be:
<table>
<tr>
<th>HomeTeam</th>
</tr>
<% for (var i = 0; i < result.length; i++) { %>
<tr>
<td><%= result[i].hteam %> </td>
</tr>
<% }; %>
</table>
Can't how to deal with my problem: part of view are hidden, when page is loaded.
Here is this part:
<table>
<% #websites.each do |website| %>
<%if (current_user.id == website.user_id)%>
<tr>
<td> <%= link_to(image_tag("/images/caret-horizontal.png", id: "caret-horizontal"), '#') %> </td>
<td> <h4><%= website.name %></h4> </td>
</tr>
</table>
<table id="<%= website.id %>"> // or can be like this:
//I don't what variant is better
<table id="table-data" data-id="<%= website.id %>">>
<tr >
<td >
<%= website.url %>
</td>
</tr>
<tr>
<td >
<%= website.category %>
</td>
</tr>
<tr>
<td><%= website.language %></td>
</tr>
</table>
And I can get attributes in JavaScript like this(thanks to good people):
var yourWebsiteId = $("#table-data").attr("data-id");
How I can choose approriate element and show it? I should use getElementById or something like this, but I don't know exactly how to do it.
Please help me, if you can.
$("#table-data").show()
You can find information on this from here
$("#table-data") gets a reference to the part of the dom you are trying to access (# denotes id, . denotes class), once you have a reference you can then call any jquery operation you want on it