Good evening all, I have a Node.JS application running ejs templates, and on one of those pages is a datatable that has revealable “child” rows. In those child rows are a couple of buttons, and one opens a model to display a form that is going to be populated from a JSON object in data.form_data.
I have my modal html being pulled in via:
<%- include("../dataView/viewFullformModal") %>
All of my data is available in the “data” variable. It is rendering data.formType, data.customer_name, data.dateReceived, and others; HOWEVER, I am needing to include another ejs file with the specific layout for the various forms. So I figured the easiest way was either an “if” or a “switch” statement and here is where I am having issues: the “data” variable is accessible to the <% if statement.
My if statement is as follows:
<% if ( data.formType === 'Schedule Consultation Form') { %>
'<p> yes </p>' +
<% } else { %>
console.log(data.formType) +
<% } %>
This is returning “undefined”; however right before this I have the following code that is working:
'formType: ' + formType + '</br>' +
This returns: “formType: undefined”
And, before this code i have the following that is NOT working:
<% data.formType %>
This returns: “NaN”
This is one of two problems, but it is the major problem right now.
Here is my main template file being loaded as the body: dataTable.ejs
<div class="card">
<div class="card-header">Submitted Form Data</div>
<div class="card-body">
<div class="table-responsive">
<table id="customer_data" class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Date Received</th>
<th>Form Type</th>
<th>Customer Name</th>
<th>Email</th>
<th>Form Status</th>
<th>Reviewed By</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Date Received</th>
<th>Form Type</th>
<th>Customer Name</th>
<th>Email</th>
<th>Form Status</th>
<th>Reviewed By</th>
</tr>
</tfoot>
<tbody></tbody>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function(){
function format ( data ) {
// `d` is the original data object for the row
console.log ( data.form_data);
console.log ( data.formType);
let formType = data.formType;
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
<%- include("../dataViews/childRowHeader") %>
<%- include("../dataViews/childRowDetails") %>
<%- include("../dataViews/childRowFormData") %>
// include Modals
<%- include("../dataViews/viewFullFormModal") %>
<%- include("../dataViews/addNotesModal") %>
<%- include("../dataViews/markReviewedNotesModal") %>
'</table>';
}
//let dataTable = $('#customer_data').DataTable({
let dataTable = new DataTable($('#customer_data'), {
'processing' : true,
'serverSide' : true,
'serverMethod' : 'get',
'ajax' : {
'url' : '/get_data'
},
'aaSorting' : [],
'columns' : [
{
className: 'dt-control',
orderable: false,
data: null,
defaultContent: ''
},
{ data : 'dateReceived' },
{ data : 'formType' },
{ data : 'customer_name' },
{ data : 'customer_email' },
{ data : 'form_status' },
{ data : 'reviewed_by' }
]
});
dataTable.on('click', 'td.dt-control', function (e) {
let tr = e.target.closest('tr');
let row = dataTable.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
}
else {
// Open this row
row.child(format(row.data())).show();
}
});
});
</script>
<script src='../../assets/scripts/modalScript.js' type="application/json"> </script>
Here is the included viewFullFormModal.ejs
'<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">'+
'<div class="modal-dialog modal-dialog modal-xl" role="document">'+
'<div class="modal-content">'+
'<div class="modal-header">'+
'<h5 class="modal-title" id="exampleModalLabel"><strong>' + data.formType + '</strong> submitted by: ' + data.customer_name + ' on ' + data.dateReceived + '</h5>'+
'<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">'+
'<span aria-hidden="true">×</span>'+
'</button>'+
'</div>'+
'<div class="modal-body">'+
'formType: ' + data.formType + '</br>' +
'formType: ' + formType + '</br>' +
<% data.formType %> + '</br>' +
<% if ( data.formType === 'Schedule Consultation Form') { %>
'<p> yes </p>' +
<% } else { %>
'<br>' +
console.log(data.formType) +
<% } %>
'</div>' +
'<div class="modal-footer">'+
'<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>'+
'</div>'+
'</div>'+
' </div>'+
'</div>'+
'</div>'+
I can remove the whole “if” statement and include the following file (scheduleConsultationFormLayout.ejs) and it returns the data correctly:
'<p>' +
'First Name: ' + data.form_data[4.3] + '</br>' +
'Last Name: ' + data.form_data[4.6] +
'</p>' +