Simple web example showing unresolved "ReferenceError: $ is not defined"

Question

I am trying to call a php from a javascript.

My code is longer, but I'm trying this simple example to see if the call works.

The example consists of three files and when opening in the browser

localhost/myweb/mytest/example01/index.html

the alerts that appear in index.js should be displayed and it calls index.php, which should write a message to a log file.

The files I use in my test example are:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF'8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hello world</title>
    </head>
    
    <body>
        <script src="index.js"></script>
    </body>
</html>

index.js

alert("Hello world from javascript!");

debugger;

var myip = "192.168.1.20";
var myfile = "My_file_name";

$.get( 'index.php',{ paramIp: myip, fileSource: myfile }, 
                        
            function( response ) {
                                                                        
                if ( response.status == 'success' ) {                                           
                    alert("PHP returns OK");                
                }
                else {
                    alert("PHP returns ERROR");             
                }
            }
        )

index.php

<?php
$paramIp = (isset( $_GET['paramIp'] ))? $_GET['paramIp']: false;

$fileSource=  ( isset($_GET['fileSource'] ))?$_GET['fileSource']: "";

$fp = fopen("log_messages.txt", "a");
$date = (new DateTime("NOW"))->format("y-m-d H:i:s");
fwrite($fp, $date."index.php  paramIp = " . $paramIp . ", fileSource = ". $fileSource . PHP_EOL);
fclose($fp);


echo $fileSource;
?>

When I open the page in the browser with the URL

localhost/myweb/mytest/example01/index.html

The javascript alert is displayed, appearing the message

Hello world from javascript!

But when continuing the execution of the script, I see that the php does not get executed and in FireBug the error is shown:

ReferenceError: $ is not defined

After consulting some posts in several forums that talk about this error, I have modified the original files, leaving them like this:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="index.js"></script>
        <meta charset="UTF'8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hello world</title>
    </head>
    
    <body>
        <script src="index.js"></script>
    </body>
</html>

index.js

$(document).ready(function(){
    alert('Hi from jQuery!');
    console.log('Hi from jQuery!');
});

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

alert("Hello world from javascript!");

debugger;

var myip = "192.168.1.20";
var myfile = "My_file_name";

$.get( 'index.php',{ paramIp: myip, fileSource: myfile }, 
                        
            function( response ) {
                if ( response.status == 'success' ) {                                           
                    alert("PHP returns OK");                
                }
                else {
                    alert("PHP returns ERROR");             
                }
            }
        )

index.php

<script type="text/javascript" src="index.js"></script>

<?php
$paramIp = (isset( $_GET['paramIp'] ))? $_GET['paramIp']: false;
$fileSource=  ( isset($_GET['fileSource'] ))?$_GET['fileSource']: "";

$fp = fopen("log_messages.txt", "a");
$date = (new DateTime("NOW"))->format("y-m-d H:i:s");
fwrite($fp, $date."index.php  paramIp = " . $paramIp . ", fileSource = ". $fileSource . PHP_EOL);
fclose($fp);

echo $fileSource;
?>

As before, the javascript alert is displayed, with the message

Hello world from javascript!

But the php does not get executed and in FireBug the error is still shown:

ReferenceError: $ is not defined

Remove the script tag from the index.js you are including it twice — dai007uk, Sep 29 '22 at 12:42
In the first version, `$` is indeed not defined because jQuery is never loaded. In the second version though, you're putting HTML code in a JavaScript file, which would be a syntax error. — David, Sep 29 '22 at 12:42
You should read a book or a tutorial about web development. You can't write code by guessing. You should start with the basics like syntax and not with external libraries. A good starting point is: https://developer.mozilla.org/en-US/docs/Web/Tutorials — jabaa, Sep 29 '22 at 12:43

score -2 · Answer 1 · answered Sep 29 '22 at 12:43

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

$(document).ready(function(){
   


alert("Hello world from javascript!");

debugger;

var myip = "192.168.1.20";
var myfile = "My_file_name";

$.get( 'index.php',{ paramIp: myip, fileSource: myfile }, 
                        
            function( response ) {
                if ( response.status == 'success' ) {                                           
                    alert("PHP returns OK");                
                }
                else {
                    alert("PHP returns ERROR");             
                }
            }
        )   
});

</script>

And if you do that....?

Why two downvotes on my answer...? I'm just proposing a JavaScript code with the lines put back in the correct order to indicate the error. That's not correct...? — Juan, Sep 29 '22 at 15:18

Simple web example showing unresolved "ReferenceError: $ is not defined"

1 Answers1