Does Depreciated version of JQuery Compat Edge mean this code will not run?

Question

I am having trouble getting JQuery to initialize my code when the document is ready. The developer mode in Chrome runs the code without any flags, but nothing loads either. The original author used JQuery Compat Edge, which officially was never released. Does this matter?

The code I am using came from http://jsfiddle.net/Tfs2M/2/. I researched here and here and found many people have problems with their code loading. JQuery does a great job with that so I made what i thought were appropriate modifications. I noticed though the author used Compact Edge. This was a cutting edge version of JQuery about 3 years ago no longer in use. I figured JQuery 3.2.1 would suffice, this is what I came up with.

   function starter(GRASP) { //removed $ reference and added a func name.
    var GRID_ROWS,
    GRID_COLS,
    GRID_ELEMENT;

    GRASP.config = {
        gridContainer: "grid",
        matrixContainer: "matrix",
        matrixHeader: "matrixHeader"
    };

    GRASP.start = function () {
        GRID_ROWS = $("#rows").val();
        GRID_COLS = $("#cols").val();
        createGrid();
    };

    function createGrid() {
//Love to know what the # is doing      
        GRID_ELEMENT = $("#" + GRASP.config.gridContainer);
        var cell; // Contains the 1 or 0 based upon the cell selection
        var newGrid = $('<div id="grid" class="gridContainer" ></div>');

//add cells to grid top to bottom with class 'cell and hover attribute
        for (var i = 1; i <= GRID_ROWS; i++) {
            for (var j = 1; j <= GRID_COLS; j++) {
                $("<div class='cell' data-hover-text='"+i+","+j+"'>0</div>")
                    .appendTo(newGrid);
                    newGrid.on('click', '.cell', cellClick);
            }
        }

        newGrid.height(38 * GRID_ROWS);
        newGrid.width(38 * GRID_COLS);
//add all the new cells to GRID_ELEMENT       
        GRID_ELEMENT.replaceWith(newGrid);
    }
//Changes contents of a cell from 0 to 1, fancy if else statement
    function cellClick() {
        $(this).text($(this).text() == "0" ? "1" : "0");
    }
} // removed the null, false, undefined code since I was using JQuery

I also added the following JQuery too.

$(document).ready(function () {
    starter();
});

Here is the HTML if this is of any use.

<html>
<head>
<link rel="stylesheet" type="text/css" href="Coordinate Plane.css">
<script type="text/javascript" src="Coordinate Plane.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="Coordinate PlaneJQ.js">
</head>
<body>
<div id="gridLayout" class="gridLayout">
    <div id="gridHeader">
            <h2>Aperture Configuration:</h2>
Grid Size:
    <input id="rows" type="number" min="1" max="50" value="10" width="40" 
size="3" onChange="GRASP.start();"/>x
            <input id="cols" type="number" min="1" max="50" value="10" 
width="40" size="3" onChange="GRASP.start();"/>
    </div>
    <div id="grid" class="gridContainer"></div>
</div>
</body>
</html>

Posts like this get voted down, I have made about 3 programs in Javascript so far. If there is a more appropriate site for beginners, please leave a note in the comments.

Thank you!

If you built a snippet or jsFiddle, that would help you not get voted down. — random_user_name, Aug 01 '17 at 23:00
Are all the resources loading correctly or you get 404s? I also noticed `src="Coordinate Plane.js"`, generally speaking I'd never use whitespaces for a js file name. — Totò, Aug 01 '17 at 23:05
@cale_b good point, I'll remember that for the future. This is the jsFiddle the code came from (http://jsfiddle.net/Tfs2M/2/), I just can't get the code to load in Notepad ++. — mister, Aug 01 '17 at 23:31
@Totò everything is loading correctly, but it is a blank white screen. No 404s. — mister, Aug 01 '17 at 23:32

score 1 · Accepted Answer · answered Aug 02 '17 at 12:31

Your script does not run as-is without throwing console errors. The reason is that you've "half-converted" the code from the Fiddle you references (incompletely, with various problems) from an Immediately-Invoked Function "Class" to, well, what you've got here.

Problem #1 is that GRASP is not defined, because of the way you've modified the last portion of the IIFE.

Adding this somewhere before you call starter() solves that problem.

window.GRASP = {};

Problem #2 is that you set up function starter(GRASP) to accept the variable GRASP to be passed in, but you don't pass it in, so it's still undefined inside the function. I have removed that, and made it simply function starter().

Here is a working Fiddle with your code, updated to work properly.

@ cale_b Thank you for writing back. When I first looked at the original code, the browser kept throwing errors about GRASP undefined. Just because you call something as a parameter doesn't define it. This morning about 2am I pulled the code apart and added an event listener and a self executing function and got it working. Here's the Fiddle, it works in Notepad ++ : https://jsfiddle.net/Math8Gr/j5jmjzw8/ Thank you again, there is only so much the free coding sites can teach you without some professional insight. — mister, Aug 02 '17 at 13:29

Does Depreciated version of JQuery Compat Edge mean this code will not run?

1 Answers1