Uncaught ReferenceError: $ is not defined when is defined

Background I’m making 4 calendars:

• The Current Calendar
• Next Month’s Calendar
• Last Month’s Calendar
• 2 Month’s From now Calendar //$dateInt = date("U", strtotime("+2 months"));

I had the calendars building just fine, including the dynamic loading of values from my SQL Database Table (I’ll just call it DB henceforth) . I have been doing PHP off and on since the late 90s but for whatever reason, I’d forgot the concept of class, so I switched my “functions.php” page where the calendar loads and added the class and __constructor instead.

The calendars still build just fine, but the dynamic loading and adding of the values from DB has stopped and is now throwing the Uncaught ReferenceError: $ is not defined at calendar.php:466:29 error. I did not move the JQuery portion of the code at all (other than it’s inside a class now instead of a function…

The Code

<?php
$currentCal = new Calendar("Current");
$nextCal = new Calendar("Next");
$priorCal = new Calendar("Prior");
$wipCal = new Calendar("WIP"); //2 Month's from $currentCal

if (isset($_POST['cal'])) {
    new Calendar($_POST['cal']);
    unset($_POST);
}

class Calendar
{
    function __construct($cat)
    {
        include "assets/system/connect.php";
        try {
            //A LOT OF REDACTED SCRIPT FOR BUILDING THE CALENDAR BUT HERE'S THE FORMATTING FOR THE IDs ON THE FIELDS
            echo "  <tr class='content'>
                        <td class='nonFlight' id='" . $regions[$calendars] . $cat . $date - 7 .  "NonFlight'></td>
                        <td class='nonFlight' id='" . $regions[$calendars] . $cat . $date - 6 .  "NonFlight'></td>
                        <td class='nonFlight' id='" . $regions[$calendars] . $cat . $date - 5 .  "NonFlight'></td>
                        <td class='nonFlight' id='" . $regions[$calendars] . $cat . $date - 4 .  "NonFlight'></td>
                        <td class='nonFlight' id='" . $regions[$calendars] . $cat . $date - 3 .  "NonFlight'></td>
                        <td class='nonFlight' id='" . $regions[$calendars] . $cat . $date - 2 .  "NonFlight'></td>
                        <td class='nonFlight' id='" . $regions[$calendars] . $cat . $date - 1 .  "NonFlight'></td>
                    </tr><tr class='content'>
                        <td class='flight' id='" . $regions[$calendars] . $cat . $date - 7 .  "Flight'></td>
                        <td class='flight' id='" . $regions[$calendars] . $cat . $date - 6 .  "Flight'></td>
                        <td class='flight' id='" . $regions[$calendars] . $cat . $date - 5 .  "Flight'></td>
                        <td class='flight' id='" . $regions[$calendars] . $cat . $date - 4 .  "Flight'></td>
                        <td class='flight' id='" . $regions[$calendars] . $cat . $date - 3 .  "Flight'></td>
                        <td class='flight' id='" . $regions[$calendars] . $cat . $date - 2 .  "Flight'></td>
                        <td class='flight' id='" . $regions[$calendars] . $cat . $date - 1 .  "Flight'></td>
                    </tr>";
            //MORE REDACTION
        } catch (RuntimeException $e) {
            echo "<script>console.log('Error: $e')</script>";
        }
        /** POPULATING THE CALENDAR **/ //THE ISSUE APPEARS TO BE IN THIS SECTION
        $startTime = 0; //TEMP VALUE
        $endTime = 999999999999999999; //TEMP VALUE
        try {
            $conn = new PDO("mysql:host=$servername;dbname=bcor", $username, $password);
            $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $stmt = $conn->query("SELECT * FROM resss WHERE `startDate` > '$startTime' AND `endDate` <= '$endTime'")->fetchAll();
            foreach ($stmt as $row) {
                extract($row, EXTR_OVERWRITE);
                $startDay = date('d', $row['startDate']);
                switch ($location) {
                    case (/**REDACTED**/):
                        $region = "Central";
                        $travel = "NonFlight";
                        break;
                    //REDACTED SUPURFLOUS INFO
                }
                $tdID = $region . $cat . $startDay . $travel;
                if ($staff != null && $staff != "") {
                    $display = "<span class=location>$location</span><br/><span class=content>$department: $provider/$staff</span>";
                } else {
                    $display = "<span class=location>$location</span><br/><span class=content>$department: $provider</span>";
                }
                echo "<script>$('#$tdID').html('$display');</script>"; //THIS IS WHERE THE ERROR IS FLAGGED
                //VALUE ON FIRST RUNTHROUGH IS:
                //$('#CentralCurrent11NonFlight').html('<span class=location>Big Timber</span><br/><span class=content>Cardio: Who/Staff</span>');</script>
        //REDACTING REMAINDER

I’m sorry the for the length – I tried to take out everything I didn’t think was absolutely necessary. I can provide the full code if desired, just give me somewhere to send it to – it’s over 100 lines.

I did check the Dev Console and Sources sections in Chrome and did find that CentralCurrent11NonFlight does exist:

<tr class='content'>
    <td class='nonFlight' id='CentralCurrent8NonFlight'></td>
    <td class='nonFlight' id='CentralCurrent9NonFlight'></td>
    <td class='nonFlight' id='CentralCurrent10NonFlight'></td>
    <td class='nonFlight' id='CentralCurrent11NonFlight'></td> //WINNER WINNER
    <td class='nonFlight' id='CentralCurrent12NonFlight'></td>
    <td class='nonFlight' id='CentralCurrent13NonFlight'></td>
    <td class='nonFlight' id='CentralCurrent14NonFlight'></td>
</tr>

Originally I thought the problem was that the first $ was being echo’d as a variable, so I added the character to remove that: echo "<script>$('#$tdID').html('$display');</script>"; It didn’t fix the problem, but I’m going to leave it as it seems more… appropriate… within the echo.

Any thoughts would be helpful.

Thank you!

Answer

It was a DOM issue – on my calendar.php page at the very top, I had:

<?php
include "assets/system/functions.php";
$currentCal = new Calendar("Current");
$nextCal = new Calendar("Next");
$priorCal = new Calendar("Prior");
$wipCal = new Calendar("WIP");
?>

WAY before any of the DOM were created.

I moved it to the bottom of the page and it works just perfect.