I'm having an issue with calling functions defined in my JavaScript section.
This version generates an error in my console:
ReferenceError: manualSaveChanges is not defined
http://jsfiddle.net/msobczak/oa8rc27n/50/
I tried namespacing all of my functions in a class, but now the console reports this error:
ReferenceError: GridFunctions is not defined
http://jsfiddle.net/msobczak/oa8rc27n/53/
I've tried onLoad, No wrap in Head and No wrap in Body. The error remains.
EDIT
The code I'm trying to get to work is not a "simple example". I've tried changing the code wrapping, and defining the functions in another class. Neither of those solutions worked for me.
Ultimately, I'd like to get my jquery grid to display and also have access to the functions I define within the JavaScript section. How can I resolve this issue?
OK, if I'm being downvoted because I didn't include all of my code for both examples, here's the first example:
var mainGrid = {
"total": 1,
"page": 1,
"pageSize": 20,
"records": 1,
"rows": [{
"siteId": 11748974,
"siteName": "Frederik Meijer Gardens",
"siteAddress": "1000 E Beltline Ave NE",
"siteCitySt": "Grand Rapids, MI",
"siteZip": "49525-5804",
"productCd": "INS_SHARED",
"productName": "Insert - Shared Mail",
"finishedSize": "NSW Half Sheet",
"estimatedPieceWeight": null,
"vdpTypeCode": null,
"taHouseholds": 291333,
"taDistribution": 241745,
"distribution": 241745,
"avgCpm": 33.7,
"investment": 8146.81,
"coverage": 82.98
}]
};
var subGrid = {
"total": 1,
"page": 1,
"pageSize": 20,
"records": 2,
"rows": [{
"mediaPlanId": "5152",
"mbuHdrId": 5481267,
"mbuDtlId": 18085594,
"commonMbuId": 122113,
"ggId": 3569183,
"fkGeoProfileId": 15032667,
"fkSite": 11748974,
"productCd": "INS_SHARED",
"productName": "Insert - Shared Mail",
"geocode": "49505F1",
"cityName": "GRAND RAPIDS, MI",
"households": 2361,
"taHouseholds": 2361,
"distribution": 2354,
"cpm": 33.7,
"investment": 79.3298,
"taCoverage": 0,
"isSelected": false
}, {
"mediaPlanId": "5152",
"mbuHdrId": 5481266,
"mbuDtlId": 18085593,
"commonMbuId": 122093,
"ggId": 3569184,
"fkGeoProfileId": 15032666,
"fkSite": 11748974,
"productCd": "INS_SHARED",
"productName": "Insert - Shared Mail",
"geocode": "49505D1",
"cityName": "GRAND RAPIDS, MI",
"households": 4557,
"taHouseholds": 4557,
"distribution": 4537,
"cpm": 33.7,
"investment": 152.8969,
"taCoverage": 99.56111476848804037744129910028527540048,
"isSelected": true
}]
};
var savedRows = [];
function updateRows(id, checkedValue) {
var found = false;
/*
Check the array for the presence of the row.
If it is found, add the saved value.
*/
for (var index = 0; index < savedRows.length; index++) {
if (savedRows[index].id == id) {
savedRows[index].savedIsSelected = checkedValue;
if (checkedValue == '1') savedRows[index].value = true;
else savedRows[index].value = false;
found = true;
}
}
/*
If row not found, it must be new.
*/
if (!found) {
var i = savedRows.length;
savedRows[i] = {};
savedRows[i].id = id;
savedRows[i].origIsSelected = checkedValue === '1' ? '0' : '1';
savedRows[i].savedIsSelected = checkedValue;
if (checkedValue == '1') savedRows[i].value = true;
else savedRows[i].value = false;
}
}
function updateGridRow (gid, rowId, checkboxnameid) {
var checkedValue = $('#' + checkboxnameid).is(':checked') ? '1' : '0';
var grid = $('#' + gid);
var rowids = grid.getDataIDs();
//Loop through rows
for (var i = 0; i < rowids.length; i++) {
//Check the row Id's match
if (rowId == rowids[i]) {
var rowData = $('#' + gid).jqGrid('getRowData', rowId);
$('#' + gid).jqGrid('setSelection', rowId);
$('#' + gid).editRow(rowId);
$('#' + gid).jqGrid('editCell', i + 1, true);
$('#' + gid).jqGrid('setCell', i + 1, 'isSelected', checkedValue);
$('#' + gid).jqGrid('saveCell', i + 1, true);
$('#' + gid).saveRow(rowId);
$('#' + gid).jqGrid("resetSelection");
updateParentGridRow(checkedValue, gid, rowId, rowData.parentGridId, rowData.parentRowId);
}
}
return true;
}
function updateParentGridRow (checkedValue, gid, rowid, parentGridId, parentRowId) {
var grid = $("#" + gid);
var $mainGrid = $("#" + parentGridId);
// Total Distribution (showbn in grid as Distr Qty)
var mainGridDist = parseFloat($mainGrid.jqGrid('getCell', parentRowId, 'distribution'));
var subgridDist = parseFloat(grid.jqGrid('getCell', rowid, 'distribution'));
mainGridDist += checkedValue === '1' ? subgridDist : -subgridDist;
$mainGrid.jqGrid('setCell', parentRowId, 'distribution', mainGridDist);
// Trade Area Distribution
var mainGridTaDist = parseFloat($mainGrid.jqGrid('getCell', parentRowId, 'taDistribution'));
var subgridTaDist = parseFloat(grid.jqGrid('getCell', rowid, 'taDistribution'));
mainGridTaDist += checkedValue === '1' ? subgridTaDist : -subgridTaDist;
$mainGrid.jqGrid('setCell', parentRowId, 'taDistribution', mainGridTaDist);
// Investment
var mainGridInv = parseFloat($mainGrid.jqGrid('getCell', parentRowId, 'investment'));
var subgridInv = parseFloat(grid.jqGrid('getCell', rowid, 'investment'));
mainGridInv += checkedValue === '1' ? subgridInv : -subgridInv;
$mainGrid.jqGrid('setCell', parentRowId, 'investment', mainGridInv);
// Coverage
//var mainGridDist = parseFloat($mainGrid.jqGrid('getCell', parentRowId, 'distribution'));
var mainGridHH = parseFloat($mainGrid.jqGrid("getCell", parentRowId, 'taHouseholds'));
var coverage = (mainGridDist / mainGridHH) * 100;
$mainGrid.jqGrid('setCell', parentRowId, 'coverage', coverage);
// Save changes to local array
var commonMbuId = grid.jqGrid('getCell', rowid, 'commonMbuId');
updateRows(commonMbuId, checkedValue);
}
function manualSaveChanges() {
saveChanges();
alert('Your changes have been saved');
}
function saveChanges() {
var changesToSend = [];
if (savedRows.length > 0) {
for (var i = 0; i < savedRows.length; i++) {
if (savedRows[i].origIsSelected != savedRows[i].savedIsSelected) {
var x = changesToSend.length;
changesToSend[x] = {};
changesToSend[x].id = Number(savedRows[i].id);
changesToSend[x].value = savedRows[i].value;
}
}
}
if (changesToSend.length > 0) {
var jsonPayload = JSON.stringify(changesToSend);
$.ajax({
async: false,
url: "/echo/json/",
type: 'POST',
dataType: 'json',
data: jsonPayload,
contentType: 'application/json',
error: function (jqXHR, textStatus, errorThrown) {
var msg = 'textStatus = ' + textStatus +
'errorThrown = ' + errorThrown;
alert(msg);
},
success: function (data, textStatus, jqXHR) {
var msg = 'textStatus = ' + textStatus;
alert(msg);
savedRows = [];
}
});
}
}
$(document).ready(function () {
$("#jqGrid").jqGrid({
datatype: function(postdata) {
$('#' + 'load_' + 'jqGrid').show();
saveChanges();
var json = mainGrid;
for (var i = 0; i < json.rows.length; i++) {
json.rows[i].id = $.jgrid.randId();
json.rows[i].siteNameDisp = json.rows[i].siteName + ' - ' +
json.rows[i].siteAddress + ', ' +
json.rows[i].siteCitySt + ', ' +
json.rows[i].siteZip;
}
var thegrid = $('#jqGrid')[0];
thegrid.addJSONData(json);
$('#' + 'load_' + 'jqGrid').hide();
},
page: 1,
colModel: [
{
label: 'ID',
name: 'id',
width: 50,
hidden: true,
key: true,
editable: true,
sortable: false,
editrules: {
edithidden: true
}
},
{
label: 'Site Id',
name: 'siteId',
width: 100,
sortable: false,
editable: true,
hidden: true,
editrules: {
edithidden: true
}
},
{
label: 'Site',
name: 'siteNameDisp',
width: 250,
sortable: false
},
{
label: 'Trade Area Households',
name: 'taHouseholds',
width: 100,
sortable: false,
formatter: 'number',
formatoptions: {
thousandsSeparator: ",",
decimalPlaces: 0
},
align: 'right'
},
{
label: 'Trade Area Distribution',
name: 'taDistribution',
width: 85,
sortable: false,
formatter: 'number',
formatoptions: {
thousandsSeparator: ",",
decimalPlaces: 0
},
align: 'right'
},
{
label: 'Total Distribution',
name: 'distribution',
width: 85,
sortable: false,
formatter: 'number',
formatoptions: {
thousandsSeparator: ",",
decimalPlaces: 0
},
align: 'right'
},
{
label: 'CPM',
name: 'avgCpm',
width: 50,
sortable: false,
formatter: 'currency',
formatoptions: {
decimalSeparator: ".",
thousandsSeparator: ",",
decimalPlaces: 2,
prefix: "$ "
},
align: 'right'
},
{
label: 'Investment',
name: 'investment',
width: 75,
sortable: false,
formatter: 'currency',
formatoptions: {
decimalSeparator: ".",
thousandsSeparator: ",",
decimalPlaces: 2,
prefix: "$ "
},
align: 'right'
},
{
label: 'Coverage %',
name: 'coverage',
width: 70,
sortable: false,
formatter: 'currency',
formatoptions: {
decimalSeparator: ".",
thousandsSeparator: ",",
decimalPlaces: 2,
suffix: " %"
},
align: 'right'
},
{
label: 'Product',
name: 'productCd',
width: 150,
sortable: false,
editable: true,
hidden: true,
editrules: {
edithidden: true
}
}
],
viewrecords: true,
width: 800,
shrinkToFit: false,
height: '100%',
rowNum: 20,
pager: "#jqGridPager",
subGrid: true,
subGridRowExpanded: function (subgrid_id, parentRowId) {
var grid = $("#jqGrid");
var row = grid.getRowData(parentRowId);
showDetail(subgrid_id, parentRowId);
}
});
});
function showDetail(subgrid_id, parentRowId) {
var lastSelection;
var parentGridId = 'jqGrid';
var grid = $('#' + parentGridId);
var row = grid.getRowData(parentRowId);
var siteId = row.siteId;
var productCode = row.productCd;
var subgrid_table_id = subgrid_id + "_table";
var subgrid_pager_id = subgrid_id + "_pager";
$("#" + subgrid_id).html("<table id=\'" + subgrid_table_id + "' class='scroll'></table>" +
"<div id=\'" + subgrid_pager_id + "\'></div>");
$("#" + subgrid_table_id).jqGrid({
datatype: function(postdata) {
$('#' + 'load_' + subgrid_table_id).show();
saveChanges();
var json = subGrid;
for (var i = 0; i < json.rows.length; i++) {
json.rows[i].taDistribution = json.rows[i].distribution;
json.rows[i].parentGridId = parentGridId;
json.rows[i].parentRowId = parentRowId;
}
var thegrid = $("#" + subgrid_table_id)[0];
thegrid.addJSONData(json);
$('#' + 'load_' + subgrid_table_id).hide();
},
editurl: 'clientArray',
page: 1,
colModel: [{
label: 'Site ID',
name: 'siteId',
width: 75,
sortable: false,
editable: true,
hidden: true,
editrules: {
edithidden: true
}
},
{
label: 'Common MBU ID',
name: 'commonMbuId',
width: 75,
sortable: false,
editable: true,
hidden: true,
editrules: {
edithidden: true
}
},
{
label: 'Include',
name: 'isSelected',
width: 60,
sortable: false,
editable: false,
edittype: "checkbox",
formatter: checkboxFormatter2,
unformat: unformatCheckbox,
//formatoptions : { disabled: false },
editOptions: {
value: "1:0"
},
align: 'center'
},
{
label: 'Parent Grid ID',
name: 'parentGridId',
width: 75,
hidden: true
},
{
label: 'Parent Row ID',
name: 'parentRowId',
width: 75,
hidden: true
},
{
label: 'Geography',
name: 'geocode',
width: 70,
sortable: false,
key: true
},
{
label: 'City, State',
name: 'cityName',
width: 100,
sortable: false
},
{
label: 'TA HHs',
name: 'taHouseholds',
width: 35,
sortable: false,
formatter: 'number',
formatoptions: {
thousandsSeparator: ",",
decimalPlaces: 0
},
align: 'right'
},
{
label: 'Distr Qty',
name: 'distribution',
width: 35,
sortable: false,
formatter: 'number',
formatoptions: {
thousandsSeparator: ",",
decimalPlaces: 0
},
align: 'right'
},
{
label: 'TA Distr',
name: 'taDistribution',
width: 35,
sortable: false,
hidden: true,
formatter: 'number',
formatoptions: {
thousandsSeparator: ",",
decimalPlaces: 0
},
align: 'right'
},
{
label: 'CPM',
name: 'cpm',
width: 35,
sortable: false,
formatter: 'currency',
formatoptions: {
decimalSeparator: ".",
thousandsSeparator: ",",
decimalPlaces: 2,
prefix: ""
},
align: 'right'
},
{
label: 'Investment',
name: 'investment',
width: 75,
sortable: false,
formatter: 'currency',
formatoptions: {
decimalSeparator: ".",
thousandsSeparator: ",",
decimalPlaces: 2,
prefix: "$ "
},
align: 'right'
},
{
label: 'Coverage %',
name: 'taCoverage',
width: 70,
sortable: false,
formatter: 'currency',
formatoptions: {
decimalSeparator: ".",
thousandsSeparator: ",",
decimalPlaces: 2,
suffix: " %"
},
align: 'right'
}
],
viewrecords: true,
height: '100%',
shrinkToFit: false,
rowNum: 20,
pager: "#" + subgrid_pager_id
});
}
function checkboxFormatter2(cellvalue, options, rowObject) {
var html = '';
var checkboxnameid = options.colModel.name + options.rowId;
var onclick = 'onclick="updateGridRow(\'' + options.gid + '\', \'' + options.rowId + '\', \'' + checkboxnameid + '\'' +
');" ';
if (cellvalue || cellvalue == "1") {
html = '<input type="checkbox" id="' + checkboxnameid + '"checked="checked" ' + onclick + ' />';
} else {
html = '<input type="checkbox" id="' + checkboxnameid + '" ' + onclick + ' />';
}
return html;
}
function unformatCheckbox(cellvalue, options) {
if (cellvalue.indexOf('checked') > -1) return '1';
else return '0';
}
I can't include the second example because that would exceed the Stack Exchange body limit of 30000.
