How to solve this "Uncaught ReferenceError: $ is not defined"

Question

I have some code where I need to update a column of a table (MySQL) calling another php file without leaving the page where some tables might allow inline editing.

I have a point in the php echoing of the page, where an icon can be clicked to save input. The code at that point is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<?php
$sql = "SELECT * FROM table WHERE a_column='certain_value'";
if (mysqli_query($conn, $sql)) {
    $result = mysqli_query($conn, $sql);
    if (mysqli_num_rows($result) > 0) {
        while($row = mysqli_fetch_assoc($result)) {
            $note = $row["note"];
            $code = $row["code"];
        }
    }
}
// some tabled elements not relevant for the issue
echo "<input type='text' id='note_1' name='note_1' value=$note readonly>";
echo "<input type='text' id='new_note' name='new_note'>";
echo "<img src='icon_to_click.png' id='icon_to_click' name='icon_to_click' >";
?>

<script type="text/javascript">

$(document).ready(function() {
    $('#icon_to_click').click(function() {
        var note_orig = document.getElementById('note_1').value;
        var code_val = '<?php echo "$code" ?>';
        var note_new = document.getElementById('new_note').value;
        if (note_new != note_orig) {
            $.ajax({
                type: 'POST',
                url: 'update_notes.php',
                data: {'code': code_val, 'note': note_new},
                success: function(response){
                    document.getElementById('note_1').value = note_new;
                }
            });
        }
    });
});

The relevant code of update_notes.php is:

<?php 

// connection

$unsafe_note = $_POST["note"];
$code = $_POST["code"];
require "safetize.php"; // the user input is made safe
$note = $safetized_note; // get the output of safetize.php

$sqlupdate = "UPDATE table SET note='$note' WHERE code='$code'";
if (mysqli_query($conn, $sqlupdate)) {
    echo "Note updated";
} else {
    echo "Problem in updating";
}

// close connection

?>

Now when I run the code and look at the tool, it gives me the error: Uncaught ReferenceError: $ is not defined, linking the error to this line of the previous js code:

$(document).ready(function() {

So, how can I fix that?

It totally looks like your code runs before jquery loaded. Try to change document.ready code on `document.addEventListener('DOMContentLoaded', (event) => { //the event occurred })` — Dmytro Huz, May 12 '19 at 12:18
@ Anis R.: as you can se from the code, the might load jQuery — gab, May 12 '19 at 12:22
@ Dmytro Huz: could you be so kind to put it more procedurally for me? — gab, May 12 '19 at 12:24
I also tried $(window).on('load', function() instead of $(document).ready(function() , but nothing changed — gab, May 12 '19 at 12:30
@ Hien Nguyen : done, it gives "anonymous function" when clicking on the error — gab, May 12 '19 at 12:38
Possible duplicate of [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) — Breakpoint, May 15 '19 at 10:48
@gab check from the console that the jQuery has been correctly loaded. Looks like it fails to load — Lelio Faieta, May 15 '19 at 10:49

score 1 · Accepted Answer · answered May 15 '19 at 11:08

It means that you tried to use Jquery in your Javascript Code without calling Jquery Library or the code is called without the library was fully loaded.

I notice :

That you haven't closed your script tag
You use Jquery so you can use $('#id_name') to select element by Id instead of document.getElementById('note_1')
Get element value by using Element.val() instead of Element.value

Try to edit your code like this

<?php
    $sql = "SELECT * FROM table WHERE a_column='certain_value'";
    if (mysqli_query($conn, $sql)) {
        $result = mysqli_query($conn, $sql);
        if (mysqli_num_rows($result) > 0) {
            while($row = mysqli_fetch_assoc($result)) {
                $note = $row["note"];
                $code = $row["code"];
            }
        }
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Some title</title>
    </head>
    <body>
        <form method="post" accept-charset="UTF-8">
            <input type='text' id='note_1' name='note_1' value=<?= $code ?> readonly>";
            <input type='text' id='new_note' name='new_note'>";
            <img src='icon_to_click.png' id='icon_to_click' name='icon_to_click' >";
        </form>
        <script>
            $(document).ready(function() {
                $('#icon_to_click').click(function() {
                    var note_orig = $('#note_1').val();
                    var code_val = '<?= $code ?>';
                    var note_new = $('#new_note').val();
                    if (note_new != note_orig) {
                        $.ajax({
                            type: 'POST',
                            url: 'update_notes.php',
                            data: {'code': code_val, 'note': note_new},
                            success: function(response){
                                $('#note_1').val() = note_new;
                            }
                        });
                    }
                });
            });
        </script>
    </body>
</html>

Element.value is deprecated in favour of element.val(), or it is just wrong syntax? — gab, May 19 '19 at 11:59

score 0 · Answer 2 · answered May 15 '19 at 10:45

0

Hey I have faced same error a day before,this is because you have missed using a jquery library script that is needed. please try using some Updated Jquery CDN . :) It will definitely help OR include the jquery.js file before any jquery plugin files.

answered May 15 '19 at 10:45

Ricky

454
3
13

I've found a typo in one of the included files before the jquery including call, and that was the responsible of the jquery not running correctly. But nevertheless some minor problems still were there – gab May 19 '19 at 11:56

How to solve this "Uncaught ReferenceError: $ is not defined"

2 Answers2