I created a jqxWindow which has HTML code, thus:
<div id="jqxWindow">
<div>Confirm</div>
<div style="overflow: hidden;">
<input type="hidden" id="itemUID" />
<center><table>
<tr>
<td colspan=2 align="right">Confirm the following changes for this transaction </td>
</tr>
</table>
<table>
<tr>
<td align="right"><strong>Foo1</strong></td>
<td align="left"><input type="text" id="foo1" /></td>
</tr>
<tr>
<td align="right"><strong>Foo2</strong></td>
<td align="left"><input type="text" id="foo2" /></td>
</tr>
</table>
</div>
This was called on by the following:
$("#submitChanges").on('click', function (event) {
var rows = $('#jqxgrid').jqxGrid('getrows');
var gridCount = rows.length;
if (gridCount > 0) {
// Confirm before making any changes
$("#jqxWindow").jqxWindow('open');
var detailData = observableArray.pop();
$('#itemUID').val(detailData.ID);
$('#foo1').val(detailData.foo1);
$('#foo2').val(detailData.foo2);
}
.
.
.
I won’t go into too much details. In the program, the code pops off an array element and the user must select “Confirm” or “Cancel”. It was the “Cancel” button that had me stumped for a while. The idea was to recover the item in detailData
and push it back into observableArray
. So I had to construct a JSON array dealing with escaping single and double quotes. Something like this:
var objCurrent = "{'ID':'"+$('#itemUID').val()+"','Foo1':'"+$('#foo1').val()+"','Foo2':'"+$('#foo2').val()+"'}"
This was becoming needlessly complicated. There is a better way to construct a JSON array to push into observableArray
.
var saveCurrent = new Object();
saveCurrent.ID = $('#itemUID').val();
saveCurrent.Foo1 = $('#foo1').val();
saveCurrent.Foo2 = $('#foo2').val();
observableArray.push(saveCurrent);