Below is the complete html code with jQuery ajax call to consume node.js service
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Forecasting - Bottoms Up(T&M)</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<style>
a {
display: inline-block;
color: white;
text-align: center;
padding: 4px 4px;
text-decoration: none;
background-color: #2c64b2;
}
a:hover {
color: white;
background-color: #827f7b;
}
</style>
</head>
<body>
<script type="text/javascript">
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
if (ed){
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
}
editIndex = index;
} else {
setTimeout(function(){
$('#dg').datagrid('selectRow', editIndex);
},0);
}
}
}
function onEndEdit(index, row){
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'ID'
});
row.JanTotalBilling = row.Rate * row.JanActualHours;
row.FebTotalBilling = row.Rate * row.FebActualHours;
row.MarTotalBilling = row.Rate * row.MarActualHours;
row.AprTotalBilling = row.Rate * row.AprActualHours;
row.MayTotalBilling = row.Rate * row.MayActualHours;
row.JunTotalBilling = row.Rate * row.JunActualHours;
row.JulTotalBilling = row.Rate * row.JulActualHours;
row.AugTotalBilling = row.Rate * row.AugActualHours;
row.SepTotalBilling = row.Rate * row.SepActualHours;
row.OctTotalBilling = row.Rate * row.OctActualHours;
row.NovTotalBilling = row.Rate * row.NovActualHours;
row.DecTotalBilling = row.Rate * row.DecActualHours;
}
function actionApplyFilters(){
$('#dg').datagrid({
url:'http://samplesite.com:8182/BottomsUpBTMFiltered?parentCustomer='+$( "#parentCustomerId option:selected" ).text()+'&verticalShortname='+$( "#verticalShortnameId option:selected" ).text()
});
}
function actionClearAllFilters(){
$.messager.alert('Clear All Filters');
}
function actionSubmit(){
var rows = $('#dg').datagrid('getChanges');
if(!jQuery.isEmptyObject(rows)){
json = JSON.stringify(rows);
console.log('json before submit' + json);
$.ajax
({
type: "POST",
url: "http://samplesite.com:8182/BottomsUpBTM_save",
crossDomain:true,
dataType: 'json',
contentType: 'application/json',
data:json
}).done(function (data) {
console.log('inside done method ' + typeof data);
console.log('inside done method ' + JSON.stringify(data));
if(!jQuery.isEmptyObject(data)){
if(data.status == "SUCCESS"){
console.log("successfully saved");
$.messager.alert('SUCCESS','<p style="color:green;font-weight:bold;text-align:center">Data Saved !!!<p>');
}
}
});
}else{
$.messager.alert('ERROR','<p style="color:red;font-weight:bold">Modify rows and step off to save...<p>');
}
}
$(document).ready(function(){
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
}
var loginid = $.urlParam('loginid');
$.ajax
({
url: "http://samplesite.com:8182/PicklistValuesFiltered?loginid="+loginid,
crossDomain:true,
dataType: 'json',
contentType: 'application/json'
}).done(function (data) {
var pcArray = data;
$.each(pcArray,function(index,value){
$('#parentCustomerId').append($('<option>', {
value: value.parentcustomer,
text : value.parentcustomer
}));
});
});
$("#parentCustomerId").change(function(){
$.ajax
({
url: "http://samplesite.com:8182/PickVerticalShortName?parentcustomer="+$( "#parentCustomerId option:selected" ).text(),
crossDomain:true,
dataType: 'json',
contentType: 'application/json'
}).done(function (data){
var vsArray = data;
$('#verticalShortnameId').find('option').remove().end();
$.each(vsArray,function(index,value){
$('#verticalShortnameId').append($('<option>',{
value: value.Verticalshortname,
text : value.Verticalshortname
}));
});
});
});
});
</script>
<table width="100%">
<tr>
<td align="left"><h2>Forecasting - Bottoms Up(T&M)</h2></td>
<td align="right"><img src="images/Cognizant_Logo.png" alt="logo View"></td>
</tr>
</table>
<table align="center">
<tr>
<td><a href="BottomsUpBTM.html">T&M Adjustments</a></td>
<td><a href="BottomsUpBTMView.html">T&M View</a></td>
<td><a href="BottomsUpBFB.html">Fixed Bid Adjustments</a></td>
<td><a href="BottomsUpBFBView.html">Fixed BidView</a></td>
<td><a href="BottomsUpVSCForecast.html">Bottoms Up vs CForecast</a></td>
<td><a href="WorkingDays.html">Working Days</a></td>
<td><a href="CustomerAccess.html">Customer Access</a></td>
</tr>
</table>
<hr/>
<table width="100%">
<tr>
<td>
<label>Parent Customer:</Label>
<select id="parentCustomerId">
</select>
<label>Vertical Short Name:</Label>
<select id="verticalShortnameId">
</select>
<a href="#" class="easyui-linkbutton" onclick="actionApplyFilters()">Apply Filters</a>
<a href="#" class="easyui-linkbutton" onclick="actionClearAllFilters()">Clear All Filters</a>
<label>Forecasting Month: <B>Mar-2017</B></Label>
<label id="selectRowsMsg"></label>
</td>
</tr>
</table>
<br/>
<table id="dg" class="easyui-datagrid" iconCls="icon-save" title="Utilization Data for Adjustments" style="width:99%;height:450px" sortName="AssociateID" remoteSort="false" sortOrder="asc"
data-options="
iconCls:'icon-edit',
singleSelect:true,
toolbar:'#tb',
method:'get',
onClickCell:onClickCell,
onEndEdit:onEndEdit">
<thead data-options="frozen:true">
<tr>
<th data-options="field:'AssociateID',sortable:true">AssociateID</th>
<th data-options="field:'ID',formatter:function(value,row){return row.AssociateName;}">Associate Name</th>
<th data-options="field:'ProjectId'">Project ID</th>
<th data-options="field:'ProjectName',align:'left',sortable:true">Project Name</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'Utilizationlocation',align:'left'">Utilization Location</th>
<th data-options="field:'Isonsite',align:'left'">Is Onsite</th>
<th data-options="field:'Projectbillability',align:'left'">Project Billability</th>
<th data-options="field:'CustomerID',align:'left'">Customer Id</th>
<th data-options="field:'Customername',align:'left',sortable:true">Customer Name</th>
<th data-options="field:'HorizontalShortName',align:'left'">HorizontalShortName</th>
<th data-options="field:'ManagerID',align:'right'">ManagerID</th>
<th data-options="field:'ManagerName',align:'right'">ManagerName</th>
<th data-options="field:'AllocationPrecentage',align:'right'">AllocationPrecentage</th>
<th data-options="field:'Status',align:'left'">Status</th>
<th data-options="field:'BU',align:'right'">BU</th>
<th data-options="field:'AllocationStartDate',align:'left'">Allocation Start Date</th>
<th data-options="field:'AllocationEndDate',align:'left'">Allocation End Date</th>
<th data-options="field:'ActualAllocationStartDate',align:'left',editor:{type:'datebox'}">Actual Allocation Start Date</th>
<th data-options="field:'ActualAllocationEndDate',align:'left',editor:{type:'datebox'}">Actual Allocation end Date</th>
<th data-options="field:'Rate',align:'right',editor:{type:'numberbox',options:{precision:1}}">Rate</th>
<th data-options="field:'JanActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Jan hours</th>
<th data-options="field:'JanTotalBilling'">Jan Amount</th>
<th data-options="field:'FebActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Feb hours</th>
<th data-options="field:'FebTotalBilling'">Feb Amount</th>
<th data-options="field:'MarActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Mar hours</th>
<th data-options="field:'MarTotalBilling'">Mar Amount</th>
<th data-options="field:'AprActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Apr hours</th>
<th data-options="field:'AprTotalBilling'">Apr Amount</th>
<th data-options="field:'MayActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">May hours</th>
<th data-options="field:'MayTotalBilling'">May Amount</th>
<th data-options="field:'JunActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Jun hours</th>
<th data-options="field:'JunTotalBilling'">Jun Amount</th>
<th data-options="field:'JulActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Jul hours</th>
<th data-options="field:'JulTotalBilling'">Jul Amount</th>
<th data-options="field:'AugActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Aug hours</th>
<th data-options="field:'AugTotalBilling'">Aug Amount</th>
<th data-options="field:'SepActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Sep hours</th>
<th data-options="field:'SepTotalBilling'">Sep Amount</th>
<th data-options="field:'OctActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Oct hours</th>
<th data-options="field:'OctTotalBilling'">Oct Amount</th>
<th data-options="field:'NovActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Nov hours</th>
<th data-options="field:'NovTotalBilling'">Nov Amount</th>
<th data-options="field:'DecActualHours',align:'right',editor:{type:'numberbox',options:{precision:1}}">Dec hours</th>
<th data-options="field:'DecTotalBilling'">Dec Amount</th>
<th data-options="field:'Comments',align:'right',editor:{type:'textbox',options:{precision:1}}">Comments</th>
</tr>
</thead>
</table>
</table>
<table style="width:100%">
<tr>
<td align="center">
<div style="margin:10px;">
<a href="#" class="easyui-linkbutton" onclick="actionSubmit()">Save</a>
</div>
</td>
</tr>
</table>
</body>
</html>
