Develop Reference

EJS console.log() does print correctly, but it doesn't while writing it to the table

Good Day everybody
If i use a console.log it prints it correctly, but it doesn't write it to a table. And i have no idea why it doesn't. Can someone help me please?
My EJS looks like this:
<% insrtdJngls.forEach((item) => { %>
<tr></tr>
<% console.log(item, "ejs print") %>
<% console.log(item.insrtdDateiname, "ejs print") %>
<td id="table_firma" class="tdList"><%=item.insrtdFirmaname%></td>
<td id="dateiname_table" class="tdList"><%=item.insrtdDateiname%></td>
<td id="table_time" class="tdList"><%=item.insrtdDateTime%></td>
<form method="post" action="/deleteOne">
<td><button class="DelOne"><img
src="https://img.icons8.com/ios/25/000000/empty-trash.png" /></button></td>
</form>
<form method="post" action="/deleteAll">
<td><button class="DelAllBtn"><img
src="https://img.icons8.com/fluency-systems-regular/25/000000/garbage-truck.png" /></button>
</td>
</form>
<% }); %>
And my ejs print looks like this:
{
insrtdDateTime: 2022-01-12T01:18:00.000Z,
insrtdDateiname: 'fantaWerbung',
insrtdFirmaname: 'Fanta'
} ejs print
fantaWerbung ejs print
{
insrtdDateTime: 2022-01-13T01:18:00.000Z,
insrtdDateiname: 'fantaWerbung',
insrtdFirmaname: 'Fanta'
} ejs print
fantaWerbung ejs print
But in the td, there is no output at all... if i write it with just item, it shows me, that there is one object, can someone explain?
Why doesn't it write to the table like fantaWerbung? Because obviously the data it receives is correct...
Thanks a lot
Mats Groeneweg

Place form inside the td:
<table>
<tbody>
<% insrtdJngls.forEach((item) => { %>
<tr>
<% console.log(item, "ejs print") %>
<% console.log(item.insrtdDateiname, "ejs print") %>
<td id="table_firma" class="tdList"><%=item.insrtdFirmaname%></td>
<td id="dateiname_table" class="tdList"><%=item.insrtdDateiname%></td>
<td id="table_time" class="tdList"><%=item.insrtdDateTime%></td>
<td>
<form method="post" action="/deleteOne">
<button class="DelOne"><img
src="https://img.icons8.com/ios/25/000000/empty-trash.png" /></button>
</form>
</td>
<td>
<form method="post" action="/deleteAll">
<button class="DelAllBtn"><img
src="https://img.icons8.com/fluency-systems-regular/25/000000/garbage-truck.png" /></button>
</form>
</td>
</tr>
<% }); %>
</tbody>
</table>

Dynamic Button in ejs to fill a form-field

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>
<% } %>

Create dynamic table - 3 Columns by N-rows?

I have a JS object that I'd like to iterate through, creating a three column, N-row, table.
I could have anywhere from 1 to N entries, but always want it a 3colxNrow table.
So far, I can get a single column, N row table:
<% for (var person in contacts){ %>
<div>
<table>
<tbody>
<tr>
<td>
<h2><u><%= person; %></u></h2>
<p id="email"><%= contacts[person]["email"]; %></p>
<p id="phoneNumber"><%= contacts[person]["phone number"]; %></p>
</td>
<td>
<img src=<%= contacts[person]["image"] %> >
</td>
</tr>
</tbody>
</table>
</div>
<br>
<% } // for (var person in contacts) %>
I'm stuck on how to do this for rows. The above returns this. Note it's 7 rows all one column.
I know I need to somehow loop through and add three td within the tr, but can't quite get how.
...
<tbody>
<tr>
<% for (var person in contacts){ %>
<td>
<h2><u><%= person; %></u></h2>
<p id="email"><%= contacts[person]["email"]; %></p>
<p id="phoneNumber"><%= contacts[person]["phone number"]; %></p>
</td>
<td>
<img src=<%= contacts[person]["image"] %> >
</td>
<% } // for (var person in contacts) %>
</tr>
</tbody>
...
This results in a single row, N columns wide. Do I need some logic, like for (var i = 1; i < 4; i++){ ??? } somewhere?

I thing, that for create some rows with 3 column, you can try insert for to before tr
rebuild your contacts arr:
let arrContacts = [];
let j = -1, i = 0;
for(let p in contacts ){
if(i%3===0){
arrContacts.push([]);
j++;
}
arrContacts[j].push(contacts[p]);
i++;
}
and use next template:
<tbody>
<% for (var i=0;i<arrContacts.length; i++){ contacts =arrContacts[i] ;%>
<tr>
<% for (var person in contacts){ %>
<td>
<h2><u><%= person; %></u></h2>
<p id="email"><%= contacts[person]["email"]; %></p>
<p id="phoneNumber"><%= contacts[person]["phone number"]; %></p>
</td>
<td>
<img src=<%= contacts[person]["image"] %> >
</td>
<% } %>
</tr>
<% } %>
</tbody>

After writing a 3 column, 4 row HTML table manually, physically printing the HTML out and taking a pen to it...I think I got it!
<div>
<table>
<tbody>
<% var i = 1; %>
<% var numCols = 3; %>
<tr>
<% for (var person in contacts){ %>
<% console.log("Person: " + person);%>
<td>
<h2><u><%= person; %></u></h2>
<p id="email"><%= contacts[person]["email"]; %></p>
<p id="phoneNumber"><%= contacts[person]["phone number"]; %></p>
</td>
<td>
<img src=<%= contacts[person]["image"] %> >
</td>
<% if (i%(numCols)===0 && i > 1){%>
</tr>
<tr>
<% } // (i%(numCols)===0 && i > 1) %>
<%i+=1;%>
<% } // for (var person in contacts) %>
</tr>
</tbody>
</table>
</div>
Yay! I think the trick was figuring out the conditional inclusion of <tr></tr> to end a row only when we hit our column limit.
(If someone comes across this and has any comments, improvements, warnings, please let me know!)

How can a dropdown list be displayed at a dynamic table?

I have code for table
<fieldset class="tabular"><legend><%= l(:redmine_taskjuggler) %></legend>
<%= labelled_fields_for(#issue) do |f| %>
<div id="taskjuggler" class="attributes">
<div class="splitcontent">
<div class="splitcontentright">
<table id="ResTable" cellspacing="0" border="1" width="850">
<thead>
<tr>
<th width="450" align = center> TJ allocation (?) </th>
<th width="200" align = center> TJ efficiency (?) </th>
<th width="200" align = center> TJ limits (?) </th>
</tr>
</thead>
<tbody>
<tr>
<% users_array = User.all.map { |user| [user.firstname + ' ' + user.lastname, user.login.sub('-','_') ] } %>
<td> <%= select(:issue,:tj_allocates,users_array) %> </td>
<td> <%= f.text_field :tj_efficiency %> </td>
<td> <%= f.text_field :tj_limits %> </td>
</tr>
</tbody>
</table>
Add string
</div>
</div>
</div>
At the same page script to add rows dynamically
<script type="text/javascript">
function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
var td2 = document.createElement("TD")
var td3 = document.createElement("TD")
td1.innerHTML = '<%= select(:issue,:tj_allocates,users_array) %>'
td2.innerHTML = '<%= f.text_field :tj_efficiency %>'
td3.innerHTML = '<%= f.text_field :tj_limits %>'
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
tbody.appendChild(row);
}
</script>
<% end %>
</fieldset>
But it's not working, because not work
td1.innerHTML = '<%= select(:issue,:tj_allocates,users_array) %>'
and I have an error
SyntaxError: unterminated string literal
td1.innerHTML = '<select id="issue_tj_allocates" name="issue[tj_allocates]">
----------------^
I looked to the code of the html-page, and I saw that I've created
td1.innerHTML = '<select id="issue_tj_allocates" name="issue[tj_allocates]"><option value="admin">Redmine Admin</option>
<option value=""> Anonymous</option>
<option value="namiko">Namiko Namiko</option>
<option value="kitsune">Kitsune Kitsune</option>
<option value="tanuki">Tanuki Tanuki</option>
<option value="ookami">Ookami Ookami</option>
<option value="kirin">Kirin Kirin</option></select>'
How can I create a downdrop in this table?

You can create a template and then use it like this:-
<script type="text/template" id="some_select">
<%= select(:issue,:tj_allocates,users_array) %>
</script>
and then refer this template like this
td1.innerHTML = document.getElementById('some_select').innerHTML;
Hope this will help.

i want to write value in different textfield (rhodes and java)

i'm using rhostudio to create a mobile app. currently i do have this kind of codes
<div data-role="page">
<script type="text/javascript">
function call(harga,nama){
var quantity=prompt("Insert Quantity");
var pri=harga;
var nam="document.form1."+nama;
alert("unit price RM" + pri+".00");
price= quantity * pri;
alert(quantity);
alert("total price RM" + price+".00");
alert("total price RM" + price+".00" + " should be displayed into " + nam +" textfield");
document.form1."name".value = quantity;
nam.value = quantity;
document.form1."name".value = "RM " + price;
// document.form1.hidden3.value = nam;
}
</script>
<div data-role="header" data-position="inline">
<h1>Displays</h1>
<a href="<%= Rho::RhoConfig.start_path %>" class="ui-btn-left" data-icon="home" data-direction="reverse" <%= "data-ajax='false'" if is_bb6 %>>
Home
</a>
<a href="<%= url_for :action => :new %>" class="ui-btn-right" data-icon="plus">
New
</a>
</div>
<div data-role="content">
<form name="form1">
<table>
<tr align="center">
<td>Product</td>
<td>Quantity</td>
<td>Total Price</td></tr>
<% #products.each do |product| %>
<tr align="center">
<td><%= product.name %></td>
<td><input type="text" name="<%= product.name %>" value="textfield <%= product.name %>"></td>
<td><input type="text" name="<%= product.price %>" value="textfield <%= product.price %>"></td>
</tr>
<% end %>
</table>
<br/>
<br/>
<% #products.each do |product| %>
<input type="hidden" value="price :<%= product.price %>" name="harga"/>
<input type="button" onclick="call(<%= product.price%>,value);" name="Press" value="<%= product.name %>">
<% end %>
</form>
</div>
</div>
i called a function call once i pressed a button.each textfield have different name and value.same goes to the value of the button and value as parameter for function call. it suppost to write the result calculated in the call() function into the specific textfield. unfortunately, it does not! help me..
each text field has different name and it based on object created. since i have created many textfilelds based on the amount of object, is suppose to have different name and write the result into that textfield as well.unfortunately, it does not! help me..

You have lots of error through out the code man. Don't know what are you trying to achieve.
If you just want to pass the values of product.price and product.name to the call function, try this
<input type="button" onclick="call('<%= product.price %>','<%= product.price %>');" value="Press" />
Then on the function like below,
function call(harga,nama){
var quantity=prompt("Insert Quantity");
quantity = isNaN(parseFloat(quantity)) ? 0 : parseFloat(quantity);
var pri = isNaN(parseFloat(harga)) ? 0 : parseFloat(harga);
alert("unit price RM" + pri);
var price= quantity * pri;
alert("total price : " + price);
// specify your rest code over here
}
Hope this helps you.