Iterating through JSON object to display a public holidays table - javascript

I am trying to display a table with a list of public holidays. At the moment I have a table row with the holiday name on the left and date on the right.
The data which appears is from the final array of the JSON object only where I want to display all of the public holidays.
html of table:
<table class="table table-striped" >
<tbody class="summT">
<div class="resptext">
<tr>
<td align="left" id="txtHolidayName">
</td>
<td class="fontGrey" id="txtHolidayDate">
</td>
</tr>
</div>
</div>
</tbody>
</table>
I have the following code within the success block of the AJAX call to the api:
.............
result.data.response.holidays.forEach(datepoint => {
$dateIterate = new Date(datepoint.date.iso);
$('#txtHolidayDate').html($dateIterate.toDateString());
$('#txtHolidayName').html(datepoint.name);
})
Any ideas are gratefully appreciated. Thank you so much.

I think what you are going to need to do is have template HTML within your loop that you populate with each iteration, and then inject each copy of the filled out template into the table HTML:
HTML:
<table class="table table-striped" >
<tbody class="summT">
<div id="holidates" class="resptext">
</div>
</tbody>
</table>
JavaScript loop:
result.data.response.holidays.forEach(datepoint => {
$('#holidates').append('<tr>\n' +
'<td align="left" >' + datepoint.name + '</td>' +
'<td class="fontGrey" >' + new Date(datepoint.date.iso).toDateString() + '</td>\n' +
'</tr>');
});

Related

creating a table in html using javascript and crm data

In my javascript file, I'm trying to create a table using html.
I have list of records of an entity which has fields like contractid, name, address etc.
var filter = "?$select=*&$filter=_plus_franchisee_value eq " + serviceProviderID;
PlusCRM.RetrieveMultiple("plus_franchiseecontracts", filter, function (records) {
$("#tblNewAssignments").find("tbody").empty();
console.log("vendorcontracts list....................");
console.log(records);
});
In the first column of table I want to show the dropdown which should show all the contract id's. Once I select the id, the 2nd and 3rd column should populate its respective name and address.
Once its filled, 2nd row should appear and dropdown should show again the list of accounts.
html:
<body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
<div class="row">
<div class="col-md-12">
<h5>New Assignments</h5>
<hr>
<div id="divNewAssignments">
<table id="tblNewAssignments">
<thead>
<tr>
<th>Vendor Contract</th> (this should be drop down)
<th>Volume Purchased</th>
<th>% Fulfilled</th>
<th>Volume Owed</th>
<th>Vendor Amount</th>
</tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
<div class="inline-loader"></div>
<div class="no-records" style="display: none">No records found</div>
</div>
</div>
</div>
</body></html>
Please help me to achieve this.
Thanks
This may help you i am not sure.
add-a-drop-down-in-a-table-using-html
and if you want to do above same thing with javascript you can do like this.
function func(){
var addrow = '<tr>'
addrow += <td>'
addrow += '<select>
<option value="">record1</option>
<option value="">record2</option>
<option value="">record3</option>
<option value="">record4</option>
</select>'
addrow += '</td>'
addrow += '</tr>'
for(var i = 0; i < length_of_records; i++){
jQuery("#tblNewAssignments tbody").append(addrow);
}
}

Delete contents of table and replace using JavaScript

I am trying to delete the contents of a upon click and repopulate it based on what they are clicking.
I was able to succesfully modify the with the new title, but I keep running into issues when I want to delete the contents of and replace it with a new one. I've tried doing the removeChild(), the replaceChild(), as well as innerHTML (which doesn't work based on documentation).
How would I successfully on a click, remove the existing table and repopulate it with HTML generated from JavaScript.
HTML:
<table id="captable" border = "5" width="100%" cellpadding="4" cellspacing="5">
<thead>
<tr>
<th colspan="100%">
<div id="table-title"></div>
</th>
</tr>
<th>Input Date</th>
<th>Requested Date</th>
</thead>
<tbody id="tbodyid">
<div id="table-entries">
<tr align = "center">
<td>3/27/2018</td>
<td>6/12/2018</td>
</tr>
</div>
</tbody>
</table>
JavaScript:
function(evt) {
$("#table-title").html("<h2><b>" + Title + ":</b><i> " + Subtitle + "</i></h2>");
var tBodyInner;
for (i of dataPoints) {
console.log("data" + i);
var data = json.Data[i];
tBodyInner += ("<tr align = \"center\">");
tBodyInner += ("<td><a target=\"_blank\" href=" + data.cap_url + ">" + data.capNumber + "</a></td>");
tBodyInner += ("</tr>");
}
//Not sure what to do here so that I clear the existing table, and appened the new tBodyInner html as a replacement
modal.style.display = "block";
}
First of all, you have to get rid of <div id="table-entries">, this is not a valid location for a DIV.
Second, you need to initialize the variable tBodyInner to an empty string.
Finally, you can use $("#tbodyId").html() to fill in the HTML of the table body.
function(evt) {
$("#table-title").html("<h2><b>" + Title + ":</b><i> " + Subtitle + "</i></h2>");
var tBodyInner = "";
for (i of dataPoints) {
console.log("data" + i);
var data = json.Data[i];
tBodyInner += ("<tr align = \"center\">");
tBodyInner += ("<td><a target=\"_blank\" href=" + data.cap_url + ">" + data.capNumber + "</a></td>");
tBodyInner += ("</tr>");
}
$("#tBodyId").html(tBodyInner);
modal.style.display = "block";
}
<table id="captable" border="5" width="100%" cellpadding="4" cellspacing="5">
<thead>
<tr>
<th colspan="100%">
<div id="table-title"></div>
</th>
</tr>
<th>Input Date</th>
<th>Requested Date</th>
</thead>
<tbody id="tbodyid">
<tr align="center">
<td>3/27/2018</td>
<td>6/12/2018</td>
</tr>
</tbody>
</table>
Where do you exactly change the html inside the element? You are setting the variable tBodyInner, but never using it. You should use it like you updated the title above, for example:
$("#table-entries").html(tBodyInner);
Also the parentheses around the string concats on the right side are redundant. No harm, but no effect either.

Adding id to dynamically generated table before appending to div

I am creating a table as below in my Javascript:
var l_table = op.script.table_dom_start + op.script.l_table_header + l_table_rows + op.script.table_dom_end;
Which results in:
<table class="table table-hover">
<tr>
<th class="capitalize">
...
</th>
</tr>
</table>
Which is then appended to target div:
$(l_table).appendTo('#l-ajax-response-div');
Now, before appending, I want to give this class an id and tried below ways:
$(l_table).attr('id', 'l-entry-table');
and
l_table.id='l-entry-table';
Both of these fail to work, what is going on here?
Variable contents:
table_dom_start: '<table class="table table-hover">',
header: specific header for that table
row: specific rows for that table
table_dom_end: '</table>',
Try something like this:
var mytable=$(l_table);
mytable[0].id="l-entry-table";
mytable.appendTo('#l-ajax-response-div');
Check this below example it will alert no of tables found by id.
var l_table = '<table class="table table-hover"><tr><th class="capitalize">Table with ID</th></tr></table>';
$(l_table).attr('id', 'l-entry-table').appendTo('#l-ajax-response-div');
alert($('#l-entry-table').length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="l-ajax-response-div"></div>

Displaying search results in an HTML table

I am using a javascript template to display the results coming from a search query.
Currently
<script id="collection-template" type="text/html"> <div
class="partners__item"> <%=CustomerName%>,<%=CustomerType%> </div>
</div> </script> <div id="collection"></div>
gives me the results with comma in between. This script loops as many times as records.
If I want to use a table to present the search results, i am adding table content in the looping section, which generates separate tables with individual headings.
<script id="collection-template" type="text/html">
<div class="partners__item">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
</tr>
</thead>
<tbody>
<tr>
<div class="row">
<td><%=CustomerName%></td><td><%=CustomerType%></td>
</div>
</tr>
</tbody>
</table>
</div>
</script>
<div id="collection"></div>
I tried to move the thead section out of the loop, then the table structure goes away.
As a structure I want to be able to build something like this:
<Table><thead></thead>
<script>
<tr><td></td></tr>
</script>
</Table>
Any suggestion is much appreciated.
The template I am using is from filter.js
function _renderHTML(str, data) {
var tmpl = 'var __p=[],print=function(){__p.push.apply(__p,arguments);};' +
'with(obj||{}){__p.push(\'' +
.replace(/'/g, "\\'")
.replace(/<%-([\s\S]+?)%>/g, function(match, code) {
return "',escapeStr(" + code.replace(/\\'/g, "'") + "),'";
})
.replace(/<%=([\s\S]+?)%>/g, function(match, code) {
return "'," + code.replace(/\\'/g, "'") + ",'";
})
.replace(/<%([\s\S]+?)%>/g || null, function(match, code) {
return "');" + code.replace(/\\'/g, "'")
.replace(/[\r\n\t]/g, ' ') + ";__p.push('";
})
.replace(/\r/g, '\\r')
.replace(/\n/g, '\\n')
.replace(/\t/g, '\\t')
+ "');}return __p.join('');";
var func = new Function('obj', tmpl);
return data ? func(data) : function(data) { return func(data) };
}

How to set value in dynamically added rows form using jquery?

I have a form in php with dynamically added rows (after clicking button the row is added). I want to fill the field with value "xx" and i want to do it in jquery.
This loop create the dynamically added rows in jquery. I want to fill added fields with value "xx":
while($personsArrayLength>2){
echo '
<script>
$(document).ready(function(){
var i = 2;
var rowTemplate2 = jQuery.format($("#template2").html());
rowTemplate2.value = "xx";
addRow2();
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
});
</script>
';
Here is html for that:
function addRows2(){
global $personsError_css;
$personsArray = $_POST['persons'];
JB_var_dump($_POST['whichRow']);
$html = '<table id="template2" align="right" style="display:none; ">
<tr id="row_{0}">
<td><input type="text" size="52" id="persons" name="persons[]" maxlength="100"></td>
<td><img src="/../_img/row_del.png" id="delete_{0}" alt="usun"></td>
</tr>
</table>
<table id="list2" style="margin-left:200px;">
<thead >
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" size="52" name="persons[]" maxlength="100" style="'.$personsError_css.';" value="'.$personsArray[1].'"></td>
<td></td>
</tr>
<tr>
<td colspan="2" id="app_here2"></td>
</tr>
</tbody>
</table>';
return $html;
}
This is properly filled form
In this epty fields I want to add values "xx"
Sorry for my english.
How can i set values in added rows? What i should change in my code?
Thanks for help.
Change your 'addRow2' to this:
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
//UPDATE: var rowTemplate2 is not a jQuery Object, as i thought
$("#template2").find("input:empty").val("xx");; // added this row
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}

Categories