jsFiddle:函数未定义 [英] jsFiddle: function not defined
本文介绍了jsFiddle:函数未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在调用JavaScript部分中定义的函数时遇到了问题.
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/
我尝试过onLoad，Head中没有换行，Body中没有换行.错误仍然存在.
I've tried onLoad, No wrap in Head and No wrap in Body. The error remains.
编辑
我要开始使用的代码不是一个简单的例子".我有 尝试更改代码包装，并在其中定义功能 另一堂课.这些解决方案都不适合我.
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.
最终，我想显示我的jquery网格，并且还可以访问我在JavaScript部分中定义的功能.我该如何解决这个问题?
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';
}
我无法提供第二个示例，因为那将超出Stack Exchange主体限制30000.
I can't include the second example because that would exceed the Stack Exchange body limit of 30000.
推荐答案
我的jsFiddle示例所遇到的问题的解决方案是双重的:
The solution to the issue I was having with my jsFiddle sample was twofold:
1)更改了jsFiddle页面，以使用 No Wrap-in body
1) Changed the jsFiddle page to use No Wrap - in body
2)将所有独立的JavaScript函数更改为包含在名为GridFunctions的JavaScript类中，然后更改所有调用这些方法的实例以使用以下约定:
2) Changed all of my standalone JavaScript functions to be contained within a JavaScript class called GridFunctions, then change all instances where I called those methods to use the following convention:
GridFunctions.manualSaveChanges();
在许多实例中，GridFunctions中的方法在GridFunctions中称为其他方法.例如，manualSaveChanges()称为saveChanges().要解决该问题，我需要将manualSaveChanges()中的代码更改为以下内容:
There were several instances where methods in GridFunctions called other methods in GridFunctions. For instance, manualSaveChanges() called saveChanges(). To resolve that issue, I needed to change my code within manualSaveChanges() to the following:
this.saveChanges();
这是一个有效的jsFiddle示例:
Here is a working jsFiddle example:
http://jsfiddle.net/msobczak/oa8rc27n/61/
我希望这可以帮助某人.
I hope this helps someone out.
这篇关于jsFiddle:函数未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
