1. 技术文章
  2. jsFiddle: function not defined

jsFiddle: function not defined

由 回眸只為那壹抹淺笑 提交于 2019-12-12 03:28:23

问题


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.


回答1:


The solution to the issue I was having with my jsFiddle sample was twofold:

1) Changed the jsFiddle page to use No Wrap - in body

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();

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();

Here is a working jsFiddle example:

http://jsfiddle.net/msobczak/oa8rc27n/61/

I hope this helps someone out.



来源：https://stackoverflow.com/questions/33089611/jsfiddle-function-not-defined

标签
jquery
jsfiddle
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!