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?