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=".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?

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./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?

• javascript
• jquery
• ajax

Share Improve this question Follow edited May 12, 2019 at 12:10 John Conde 220k9999 gold badges462462 silver badges501501 bronze badges asked May 12, 2019 at 12:10 gabgab 7711 gold badge11 silver badge99 bronze badges 9

• try to Ctrl + F5 and see error in console tab – Hien Nguyen Commented May 12, 2019 at 12:14
• 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 Commented May 12, 2019 at 12:18
• Are you sure you included jQuery in your HTML? – Anis R. Commented May 12, 2019 at 12:21
• @ Anis R.: as you can se from the code, the <script src="ajax.googleapis./ajax/libs/jquery/3.2.1/…> might load jQuery – gab Commented May 12, 2019 at 12:22
• @ Dmytro Huz: could you be so kind to put it more procedurally for me? – gab Commented May 12, 2019 at 12:24

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 1

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>

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.