HTML table Uncaught ReferenceError: $ is not defined

Question

I am brand new to the JavaScript side of HTML and I have been trying to hack together some other stack overflow posts into something working.

Chrome is failing to load: "file:///C:/lib/jquery.plugin.js" is this an online file, or something I need locally?

I don't know if im missing files, or if it cannot read the files (they are all next to each-other)

I've been trying to use chrome dev tool to figure out what it going on.

I have this project:

site.html

 <head>
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <script src="/lib/jquery.plugin.js"></script>
    <script src="table.js"></script>
</head>
<table class="table table-hover">
    <thead>
        <tr>
            <th>hats</th>
            <th>boots</th>
            <th>dollars</th>
            <th>tea</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

table.js

$(document).ready(function() {

    promise = $.ajax({
        type:"GET",
        dataType:"text",
        url:"table.csv",
        cache:false
    });

    promise.done(function(data){

        //Parse CSV File
        //split on new line
        var dataArr = data.split("\n");

        //for each line in array
        $.each(dataArr,function(){
            if (this != "") {

                //split files and create row
                var row = new String("");
                valArr = this.split(",");
                    row += "<tr>"

                $.each(valArr, function(){
                    row += "<td>" + this +"</td>"
                });     

                    row += "</tr>"

                    //Add row to table
                    $('tbody').append(row);

            }

        });

    });

    // Run script if request fails
    promise.fail(function() {
       console.log('A failure ocurred');
    });

});

table.csv

tophat,hiking,12,green
birthday,snow,400,english

Looks like you're trying to run html/js from your local drive instead of via a webserver. This will work up to a point but you'll soon enough run into CORS and other issues. Try installing a light-weight server, see here for some suggestions: https://stackoverflow.com/questions/5050851/best-lightweight-web-server-only-static-content-for-windows — freedomn-m, Mar 29 '21 at 14:27
Ah nice, yes I did just get a CORS error on my table.csv request, I will check out that post. thanks — lochie57, Mar 29 '21 at 14:36

score 0 · Answer 1 · answered Mar 29 '21 at 14:10

0

You are missing Jquery, add this right before </body> tag to fix

 <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

answered Mar 29 '21 at 14:10

Yen Nguyen

104
4

that got rid of the warning, post updated, but now it wants chrome is failing to load: "file:///C:/lib/jquery.plugin.js" which I guess is a file I need from online, is there a url or do I need it locally? – lochie57 Mar 29 '21 at 14:17

HTML table Uncaught ReferenceError: $ is not defined

1 Answers1