I've a HTML datatable I'm filling data to datatable using knockout js using 'foreach'. Here is my code.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12 /css/jquery.dataTables.min.css" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div id="dvMain">
<table style="width: 300%">
<tr>
<td>
<table id="tblmain">
<tr id="trCategory" data-bind="visible: flagCategory">
<td>
<table>
<tr id="InsertUpdateCategory" data-bind="visible: flagInsertCategory">
<td>
<table>
<tr>
<td>Category Name : </td>
<td>
<input type="text" id="txtCategoryName" maxlength="100" data-bind="value: txtCategoryName" />
</td>
</tr>
<tr>
<td>Is Active : </td>
<td>
<input type="checkbox" id="chkIsActiveCategory" data-bind="checked: chkCategoryActive" />
</td>
</tr>
<tr>
<td></td>
<td>
<button id="btnSaveCategory" data-bind="click: SaveCategory">Save</button>
<input type="hidden" id="hdnCategoryId" />
<button id="btnCancelCategory" data-bind="click: CancelCategory">Cancel</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width: 300%" id="tblCategory">
<thead>
<tr>
<th style="width: 100%">Category Name</th>
<th style="width: 100%">Is Active</th>
<th style="width: 100%">Edit</th>
<th style="visibility: hidden">CategoryId</th>
<th style="visibility: hidden">MgaCode</th>
</tr>
</thead>
<tbody data-bind="foreach: CategoryCollection()">
<tr>
<td data-bind="text: CategoryName"></td>
<td data-bind="text: IsActive"></td>
<td><a id="hrefEditCategory" data-bind="click: function () { ViewModel.EditCategory($data); }">Edit</a></td>
<td data-bind="text: MGACategoryId" style="display: none"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
var SelectedCategory = 0;
var CategoryId = 0;
var row = {
CategoryName: "",
IsActive: false,
MGACategoryId: null,
MGACode: null
};
$(document).ready(function () {
ViewModel = {
CategoryCollection: ko.observableArray(),
flagCategory: ko.observable(true),
flagInsertCategory: ko.observable(false),
EditCategory: ko.observable(),
txtCategoryName: ko.observable(''),
chkCategoryActive: ko.observable(false),
CategoryLink: function () {
this.flagCategory(true);
this.flagApplicationForm(false);
this.flagSubCategory(false);
},
CancelCategory: function () {
this.flagInsertCategory(false);
this.txtCategoryName('');
this.chkCategoryActive(false);
$('#btnSaveCategory').text('Save');
},
EditCategory: function (data) {
debugger;
this.flagInsertCategory(true);
this.txtCategoryName(data.CategoryName);
this.chkCategoryActive(data.IsActive);
CategoryId = data.MGACategoryId;
$('#btnSaveCategory').text('Update');
row = data;
},
SaveCategory: function () {
debugger;
var id = CategoryId;
var name = this.txtCategoryName();
var isactive = this.chkCategoryActive();
if ($('#btnSaveCategory').text() == 'Update') {
row.CategoryName = name;
row.IsActive = isactive;
this.CategoryCollection()
for (var i = 0; i < this.CategoryCollection().length; i++) {
if (this.CategoryCollection()[i].MGACategoryId == row.MGACategoryId) {
this.CategoryCollection()[i].CategoryName=name;
this.CategoryCollection()[i].IsActive=isactive;
}
}
}
else {
row.CategoryName = this.txtCategoryName();
row.IsActive = this.chkCategoryActive();
this.CategoryCollection.push(row);
this.flagInsertCategory(false);
}
},
}
debugger;
$.ajax({
type: "GET",
url: 'Datepicker/GetCategory',
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
debugger;
if (response != null) {
for (var i = 0; i < response.length; i++) {
ViewModel.CategoryCollection().push(response[i]);
}
}
},
error: function (data) {
debugger;
}
});
debugger;
ko.applyBindings(ViewModel);
});
</script>
</html>
I want to update my table using edit link given in table 'tblCategory'. Observable array for tblCategory is CategoryCollection(). Data is binded using JSON data from database. When I clicked on Edit button 'trInsertUpdateCategory' will be shown with filled row data. When I update data in textbox or checkbox and click on update button data is not updated in table. But when I add new data using that textbox and check box data is inserting and showing in table also. But update is not working for me please guide.
Dont know if this is what you are looking for, but there is a problem in your ajax success function.
success: function (response) {
debugger;
if (response != null) {
for (var i = 0; i < response.length; i++) {
ViewModel.CategoryCollection().push(response[i]);
}
}
}
Try changing it to
success: function (response) {
debugger;
if (response != null) {
for (var i = 0; i < response.length; i++) {
ViewModel.CategoryCollection().push(response[i]);
}
ViewModel.CategoryCollection.valueHasMutated();
}
}
Since right now, your observable array wont notify subscribers that its value is changed
Related
I have a html table in with razor and I want to send some data from the table to a controller via Javascript.
I tried several different solutions but the data never seems to reach my controller while alerts are being hit. The breakpoints in the controller are never being hit which indicates to me that the data can't reach the controller.
I want the value of #item.PartId and the value of checked to be send to the controller.
<div class="Table">
{
<table id="table1" class="table table-striped TableData">
#{var id = 0;}
#foreach (var item in Model.PieceViewItems)
{
id++;
<tr id="#id">
<td>#id</td>
<td><label>#item.PartDescription</label> <br /> #item.PartId (#item.StatusCode)</td>
<td>#item.Supplier</td>
<td style="width: 100px !important">
#item.TijdOpO3 #if (item.TijdOpO3 == "1")
{<text>dag</text>}
else
{ <text>dagen</text>}
</td>
<td>#item.KeurCode</td>
<td>#item.PromiseDate</td>
<td>#item.WidthAndPartType</td>
<td>
#item.PieceLengthWithUnit <br /> #item.NrOfPieces #if (item.NrOfPieces == 1)
{<text>rol</text> }
else
{ <text>rollen</text>}
</td>
<td>
#if (item.NumberReceived == "0")
{<text>NIEUW</text> }
else
{ #item.NumberReceived}
</td>
<td>#item.VoorraadQty m</td>
<td style="width: 100px !important">
#item.SalesOrderQty m <br /> #item.NrOfSalesOrders #if (item.NrOfSalesOrders == 1)
{<text>order</text>}
else
{<text>orders</text>}
</td>
<td style="width: 100px !important">
#item.StalenOrdersQty m <br /> #item.NrOfStalenOrders #if (item.NrOfStalenOrders == 1)
{<text>order</text>}
else
{<text>orders</text>}
</td>
<td><input type="checkbox" name="IsChecked" onclick="ClickHandle(this)" style="width:30px;height:30px;margin-left:20px;margin-top:20px"> </td>
</tr>
}
</table>
</div>
Javascript
<script type="text/javascript">
$(function ClickHandle() {
$("input[name='IsChecked']").change(function (element) {
var table = document.getElementById("table1");
for (var i = 1; i < table.rows.length; i++) {
var row = table.rows[i];
var lastorder = row.cells[12].firstChild;
var check = lastorder.checked;
if (check) {
var x = document.getElementById("table1").getElementsByTagName("tr");
x[i].style.backgroundColor = "yellow";
}
else {
var x = document.getElementById("table1").getElementsByTagName("tr");
x[i].style.backgroundColor = null;
}
//post item.partid and value of check to controller here.
}
});
});
</script>
Controller
[HttpPost]
public ActionResult PostIsChecked(string partId, string isChecked)
{
Part part = new Part
{
id = partId,
isChecked = isChecked
};
//Do stuff
receipt.UpdateCheckedStatus(part);
}
You can try to put a hidden input into <tr></tr>,and set its value with #item.PartId.Then use ajax to post data to action.Here is a demo:
<div class="Table">
{
<table id="table1" class="table table-striped TableData">
#{var id = 0;}
#foreach (var item in Model.PieceViewItems)
{
id++;
<tr id="#id">
<td>#id</td>
<td><label>#item.PartDescription</label> <br /><input hidden value=#item.PartId/> #item.PartId (#item.StatusCode)</td>
<td>#item.Supplier</td>
<td style="width: 100px !important">
#item.TijdOpO3 #if (item.TijdOpO3 == "1")
{<text>dag</text>}
else
{ <text>dagen</text>}
</td>
<td>#item.KeurCode</td>
<td>#item.PromiseDate</td>
<td>#item.WidthAndPartType</td>
<td>
#item.PieceLengthWithUnit <br /> #item.NrOfPieces #if (item.NrOfPieces == 1)
{<text>rol</text> }
else
{ <text>rollen</text>}
</td>
<td>
#if (item.NumberReceived == "0")
{<text>NIEUW</text> }
else
{ #item.NumberReceived}
</td>
<td>#item.VoorraadQty m</td>
<td style="width: 100px !important">
#item.SalesOrderQty m <br /> #item.NrOfSalesOrders #if (item.NrOfSalesOrders == 1)
{<text>order</text>}
else
{<text>orders</text>}
</td>
<td style="width: 100px !important">
#item.StalenOrdersQty m <br /> #item.NrOfStalenOrders #if (item.NrOfStalenOrders == 1)
{<text>order</text>}
else
{<text>orders</text>}
</td>
<td><input type="checkbox" name="IsChecked" onclick="ClickHandle(this)" style="width:30px;height:30px;margin-left:20px;margin-top:20px"> </td>
</tr>
}
</table>
</div>
js:
$("input[name='IsChecked']").change(function () {
var checked = this.checked;
var PartId = $(this).parent().parent().find("input")[0].value;
$.ajax({
type: "POST",
url: "PostIsChecked",
data: { "isChecked": checked, "partId": PartId},
success: function (data) {
}
});
});
This code below select only one by one checkbox, how can I transform this code so I can select all checkboxes by one click, but I need my variables to stay defined.
$('.checktip').click(function () {
var iduser = $('.iduser').val();
var idtip = $(this).attr('idtip');
var che = $(this).prop('checked');
$.ajax({
url: UrlSettingsDocument.OrgUnits,
data: { iduser: iduser, idtip: idtip, che: che },
type: "POST",
success: function (result) {
if (result.result == "Redirect") {
window.location = result.url;
}
}
});
});
I using this variables for controller where I save this values in database when I check them or unchecked.
Here is my html code
<input type="hidden" value="#ViewBag.iduser" id="iduser" />
<hr />
<table class="table table-striped grid-table">
<tr>
<th>Samp</th>
<th>Id of Book</th>
<th>
//Checkbox for check all *(NOT IMPLEMENTED)*
<input type="checkbox" id="box" name="checkAll" />
</th>
</tr>
#foreach (var item in (IEnumerable<cit.Models.getCheIdTip_Result>)Model)
{
<tr>
<td>#item.idtip</td>
<td>#item.tipname</td>
<td>
#*#Html.CheckBox(item.id.ToString(), item.iduser == ViewBag.iduser ? true : false, new { idtip = item.idtip, #class = "checktip" })*#
<div class="pure-checkbox">
<input type="checkbox" idtip="#item.idtip" class="checktip" checked="#(item.iduser == ViewBag.iduser ? true : false)" name="#item.id.ToString()" id="#item.id.ToString()" />
<label for="#item.id.ToString()"></label>
</div>
</td>
</tr>
}
</table>
Following code should work with your code
$('#box').click(function(){ $('.checktip').prop('checked', true); }};
This is my html code and I would like to get the data of rows in which checkbox is checked.
HTML
<!DOCTYPE html>
<html>
<body>
<div >
<header>
<h1>
<span>Expand Fed</span>
</h1>
</header>
<h1>
<span>Fed Members </span>
</h1>
<table id="my-table">
<thead>
<tr>
<td>Service Set</td>
<td>Available Devices</td>
<td>Status</td>
<td>Add</td>
</tr>
</thead>
</table>
<footer>
<div>
<input id="so-fedExpand-expand-button" class="button primary" type="submit" value="Expand"/>
Cancel
</div>
</footer>
</div>
</body>
</html>
jQuery
var FedExpandView = (function() {
var EXPAND = '#so-fedExpand-expand-button';
function FedExpandView() {
this.init = function () {
$(EXPAND).on('click', onExpand);
var data = [{ SSet: "Service Set 1", ADevices: '46', Status: "Online"},
{ SSet: "Service Set 2", ADevices: '47', Status: "Online"},
{ SSet: "Service Set 3", ADevices: '48', Status: "Online"}];
$('#my-table').dataTable({
bPaginate : false,
bFilter : false,
bInfo : false,
aaData: data,
aoColumns : [
{mDataProp: 'SSet', id: 'so-fed-ss'},
{mDataProp: 'ADevices', id: 'so-fed-adev'},
{mDataProp: 'Status', id: 'so-fed-status'},
{sDefaultContent: '',
fnRender: function (oObj) {
return '<input type="checkbox" id="so-fed-checkbox" name="select"">';
},
sWidth: '10px', sClass: "icon"}
]
}).rowReordering().
addClass('reorderable');
$('#my-table tbody tr').first().addClass('selected');
this.resume();
}
this.resume = function () {
}
}
return new FedExpandView();
}());
This is how i am getting static data into the table...
can some one help me in getting data of the remaining rows...
Try this example
JS
function checkTable() {
var rowElem;
$('#my-table tr').each(function(idx, elem) {
rowElem = $(elem);
if(rowElem.find('input').is(':checked')) {
console.log('row ' + (idx + 1) + ' is checked');
console.log('data1 is: ' + rowElem.find('.data1').html());
console.log('data2 is: ' + rowElem.find('.data2').html());
}
});
}
HTML
<table id="my-table">
<tr>
<td>
<input type="checkbox">
</td>
<td class="data1">Row1 Data1</td>
<td class="data2">Row1 Data2</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td class="data1">Row2 Data1</td>
<td class="data2">Row2 Data2</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td class="data1">Row3 Data1</td>
<td class="data2">Row3 Data2</td>
</tr>
</table>
<button onclick="checkTable()">Check table</button>
Plunker demo
$("#my-table tbody tr").on('click', function (event) {
serviceSets.length = 0;
var rows = $('table tr td :checkbox:checked').map(function () {
return $(this).val();
}).get();
$( rows ).each(function() {
var that = this;
$( Tabledata ).each(function() {
if(that == this.ssid)
{
serviceSets.push(this);
}
});
});
});
My project having a problem that when table row button clicked it will appear on the html input typ="text" for user updation.Updation running successfully.What i need is,when user clicked update button the updated row must replace with new row + another button for again updation.
html
<h1>Time Management</h1>
<fieldset>
<h3>Update Test!</h3>
<form action="#" th:action="#{/admin/updateTest.html}"
th:object="${test}" id="formTest">
<table>
<tr>
<td>Test Name</td>
<td><input type="text" id="testName" required="required"
th:field="*{name}" disabled="disabled"/></td>
</tr>
<tr>
<td>Max No.of Questions</td>
<td><input type="text" id="questionNo" required="required"
th:field="*{maxNoQuestions}" onKeyUp="numericFilter(this);" /></td>
</tr>
<tr>
<td>Max Time</td>
<td><input data-format="hh:mm:ss" type="text" id="testTime"
required="required" th:field="*{maxTime}" />
</td>
</tr>
<tr>
<td><input type="button" value="Update" id="btnUpdate" /> <input
type="hidden" th:field="*{id}" id="hdnTestId" /></td>
<td><label id="statusMsg"
style="color: red; size: portrait; font-size: small;"></label></td>
</tr>
</table>
</form>
</fieldset>
<table id="tests"
style="cellpadding: 0px; cellspacing: 0px; border: 0px;">
<thead>
<tr>
<th width="5%">#</th>
<th align="left">Test Name</th>
<th align="left">Max No.of Questions</th>
<th align="left">Max Time</th>
<th align="left"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
below is my backbone script for updation.
script
var TimeManagementView = Backbone.View.extend({
sTable:null,
// target item.
el : $("#adminContentOuterPnl"),
render : function() {
var data = {};
// template
var compiledTemplate = _.template(timeManagementTemplate, data);
// append the item to the view's target
this.$el.html(compiledTemplate);
sTable = $('#tests').dataTable({
"aoColumns" : [ null, null, null, null, null ],
"sPaginationType" : "full_numbers"
});
//load data from db to table.
this.loadSavedTests();
},
// Event Handlers
events : {
"click #btnUpdate" : "updateTest"
},
loadSavedTests : function() {
$('#tests tbody tr').remove();
$('#tests tbody').append('<tr><td><h4>...Loading...</h4></td></tr>');
//Load the data in using jQuerys ajax call
$.ajax({
type : 'POST',
url : 'loadAllTests.html',
success: function(responseData) {
sTable.fnClearTable();
if(responseData.length > 0){
$.each(responseData, function(index,item) {
var rowCount = index+1;
sTable.fnAddData( [ rowCount,item['name'], item['maxNoQuestions'], item['maxTime'],'<input type="image" src="../resources/img/icons/edit.png" alt="Edit" onclick="editTest('+item['id']+',this); return false;" />' ]);
});
}
}
});
},
updateTest : function(){
$('#statusMsg').text("");
if($('#testName').val()==''){
$('#statusMsg').text("Test Name Can't Be Null");
return false;
}
if($('#questionNo').val()==''){
$('#statusMsg').text("Question No. Can't Be Null");
return false;
}
if($('#testTime').val()==''){
$('#statusMsg').text("Test Time Can't Be Null");
return false;
}
$('#statusMsg').text("Updating...");
$("#formTest").ajaxForm({
success : function(status) {
if (status == 1) {
// addRowToTests(status.object);
testRow.find("td").eq(0).text($('#testName').val());
testRow.find("td").eq(1).text($('#questionNo').val());
testRow.find("td").eq(2).text($('#testTime').val());
$('#testName').val('');
$('#questionNo').val('');
$('#testTime').val('');
$('#statusMsg').text("Data Updated!");
}
},
dataType : 'json'
}).submit();
}
});
return new TimeManagementView;
});
$("#formTest").ajaxForm({
success : function(status) {
console.log(status.statusCode);
if (status.statusCode == 0) {
testRow.find("td").eq(1).text('');
testRow.find("td").eq(2).text('');
testRow.find("td").eq(3).text('');
testRow.find("td").eq(4).text('');
testRow.find("td").eq(1).text($('#testName').val());
testRow.find("td").eq(2).text($('#questionNo').val());
testRow.find("td").eq(3).text($('#testTime').val());
testRow.find("td").eq(4).html('<input type="image" src="../resources/img/icons/edit.png" alt="Edit" onclick="editTest('+status.object.id+'); return false;" />');
$('#testName').val('');
$('#questionNo').val('');
$('#testTime').val('');
$('#statusMsg').text("Data Updated!");
}else{
$('#statusMsg').text("No Change");
}
},
dataType : 'json'
}).submit();
I have here a javascript code. What I want is that I want to store the data result from this url:
'processjson.php?path=' + encodeURI('display/payTempEarn') + '&json=' + encodeURI(JSON.stringify(dataTempEarn)), to my variable 'tempIncDed', and display that data in my jqgrid.
My question here now is, why is that though when i alert the variable tempIncDed, it shows that it stores the correct data, but it does not display in my jqgrid?
Did I miss something in my code?
Below is my js code:
var tempIncDed = [];
$(document).ready( function() {
$("#tblIncDed").jqGrid({ data: tempIncDed,
datatype: "local",
colNames:['Code','Description', 'Taxable','Amount'],
colModel:[
{name:'ded_code',width: 85},
{name:'ded_desc'},
{name:'taxable',width: 95},
{name:'amount', formatter:'currency', align:'right',width: 85}
],
rowNum:20,
viewrecords: true,
rowList:[20,50,100],
ppager: '#tblIncDedPager',
viewrecords: true,
caption: "Details"
});
$( "#btnEarn" ).click(function() {
var empNo = $("#tblPayroll").jqGrid('getCell',($("#tblPayroll").jqGrid('getGridParam', 'selrow')),'emp_no');
var dataTempEarn = {
"SessionID": $.cookie("SessionID"),
"dataType": "data",
"per_id":$("#payPeriod").val(),
"emp_no":empNo
};
$.ajax({
type: 'GET',
url:'processjson.php?path=' + encodeURI('display/payTempEarn') + '&json=' + encodeURI(JSON.stringify(dataTempEarn)),
dataType: primeSettings.ajaxDataType,
success: function(data) {
if ('error' in data)
{
showMessage('ERROR: ' + data["error"]["msg"]);
}
else{
var resLen = data.result.length;
tempIncDed = JSON.stringify(data.result);
alert('this is the tempDed ' + tempIncDed);
$("#tblIncDed").jqGrid('setGridParam',{
datatype: 'local',
data:tempIncDed}
).trigger("reloadGrid");
}
}
});
$("#dialOtherIncDed").dialog( "open" );
$("#dialOtherIncDed").attr("name","earnings");
});
})
This is the tempDed sample data: [{"ded_id":"10000000845","ded_code":"100","ded_desc":"MEAL ALL","taxable":"N","amount":"10"},{"ded_id":"10000000849","ded_code":"101","ded_desc":"TRANSPORTATION","taxable":"N","amount":"40"},{"ded_id":"10000000851","ded_code":"103","ded_desc":"LAUNDRY","taxable":"N","mOther_amnt":"50.00"}]
Some of my html code:
<!--master grid-->
<div style="width:100%">
<table id="tblPayroll"></table>
<div id="tblPayrollPager"></div>
</div>
<!--dialog that contains the table for other earnings, deductions, loans-->
<div id="dialOtherIncDed" style="width:100%">
<table id="tblIncDed"></table>
<div id="tblIncDedPager"></div><br><br>
Total amount: <b><span id="totalAmnt"></span></b>
</div>
<!--dialog that contains the dialog edit earnings, deductions, loans-->
<div id="editIncDed"">
<table>
<tr>
<span id="incDed_name"></span>
<td>Amount:</td>
<td><input class="numeric" type="text" id="amount" value = ""/></td></tr>
</table>
</div>
<!--edit-->
<div id="dialogPayrollEdit" title="Payroll Entry">
<table>
<tr>
<td>Payroll Period:</td>
<td><b><span id="periodDateL" style="color:blue"></span></b></td>
<td>Type:</td><td><b><span id="rateType" style="color:blue"></span></b></td>
<td>Rate:</td><td><b><span id="payRate" style="color:blue"></span></b></td>
</tr>
<tr>
<td>Employee Name:</td>
<td><b><span id="empName" style="color:blue"></span></b></td>
</tr>
</table>
<hr/>
<fieldset><legend>Payroll Details</legend>
<p><center><b>EARNINGS</b></center></p>
<table>
<tr>
<td>
....
</td>
<td>
<table >
<tr...tr>
<tr>...</tr>
<tr>...</tr>
<tr><td>Other earnings</td><td><input class="numeric" style="width:60px" id="mOther_amnt" value = ""/></td><td><input type='button' value='...' id="btnEarn"></td></tr>
<tr><td><b>GROSS PAY</b></td><td></td><td><b><span style="width:60px;color:blue" id="grossPay"/></b></td></tr>
</table>
</td>
</tr>
</table>
<hr/>
<p><center><b>DEDUCTIONS</b></center></p>
<table width = "100%">
<tr>
<td>
....
</td>
<td>
<table >
<tr>
<td>Other deductions</td>
<td><input class="numeric" style="width:60px;color:black" id="mOther_ded" value = "" disabled/></td>
<td><input type='button' value='...' id="btnDed"/></td>
</tr>
<tr>
<td>Advances/Loans</td>
<td><input class="numeric" style="width:60px;color:black" id="mLoan_ded" value = "" disabled/></td>
<td><input type='button' value='...' id="btnLoan"></td>
</tr>
<tr></tr>
<tr></tr>
<tr><td><b>NET PAY</b></td><td></td><td><b><span class="numeric" style="width:60px;color:blue" id="netPay" value = "" disabled/></b></td><td></td></tr>
</table>
</td>
</tr>
</table>
<br>
</fieldset><br>
Suggest lowest NET PAY >>> <input type="text" id="lowNetPay" value = "" style="width:80px;color: black" value='0.00' disabled/>
</div><br><br>
<br><br>
<button id="btnPayrollEdit">Edit</button>
The btnLoan, btnDed, and btnEarn will be using the same grid. I also used the variable tempIncDed to save the returned data from ajax..
I've finally solved my own problem. Lets say for example I have this data stored in var tempInc,
[{"ded_id":"10000000845","ded_code":"100","ded_desc":"MEAL ALL","taxable":"N","amount":"10"},{"ded_id":"10000000849","ded_code":"101","ded_desc":"TRANSPORTATION","taxable":"N","amount":"40"},{"ded_id":"10000000851","ded_code":"103","ded_desc":"LAUNDRY","taxable":"N","mOther_amnt":"50.00"}]
This data was an output from ajax request, when the button btnEarn is click.
Here's my javascript code of btnEarn.
var tempInc = []; // global variable
$( "#btnEarn" ).click(function() {
$("#tblIncDed").clearGridData();
var empNo = $("#tblPayroll").jqGrid('getCell',($("#tblPayroll").jqGrid('getGridParam', 'selrow')),'emp_no');
var dataTempEarn = {
"SessionID": $.cookie("SessionID"),
"dataType": "data",
"per_id":$("#payPeriod").val(),
"emp_no":empNo
};
$.ajax({
type: 'GET',
url:'processjson.php?path=' + encodeURI('display/payTempEarn') + '&json=' + encodeURI(JSON.stringify(dataTempEarn)),
dataType: primeSettings.ajaxDataType,
success: function(data) {
var tempIncDed = [];
if ('error' in data)
{
showMessage('ERROR: ' + data["error"]["msg"]);
}
else{
$.each(data.result, function(rowIndex, rowDataValue) {
var fldName = rowDataValue;
tempInc[rowIndex] = fldName;
});
var resLen = data.result.length;
$("#totalAmnt").text(data.result[resLen -1].mTot_amnt);
$("#disTemp").text((JSON.stringify(tempInc)));
$("#tblIncDed").jqGrid('setGridParam',{
datatype: 'local',
data:tempInc}
).trigger("reloadGrid");
}
}
});
$("#dialOtherIncDed").dialog( "open" );
$("#dialOtherIncDed").attr("name","earnings");
});
Everytime I click that button, it will send ajax request to the server. The data returned (particularlly the object since i have an array of objects) will be saved in global variable, tempInc. After that, I have this code:
$("#tblIncDed").jqGrid('setGridParam',{
datatype: 'local',
data:tempInc}
).trigger("reloadGrid");
that will display the tempInc in my jqgrid. Hope this will help someone out there.