how to call jquery function in php file

Question

I'm working on a project and my problem is calling a jQuery function like this placing it in my php file. I've tried searching a lot but I'm always coming out with an error:

Function:

$(function(){
 $(".panorama-view").panorama360();
 });

Php file

<?php

echo '<link rel="stylesheet" href="/css/panorama360.css" rel="stylesheet" >';
echo '<script src="/js/jquery.mousewheel.min.js" ></script>';
echo ' <script src="/js/jquery.panorama360.js" ></script>';
echo '<script>  $(function(){ $(\'.panorama-view\').panorama360(); }); </script>';
echo '</script>';

 if(isset($_POST['upload'])) {

 $image_name= $_FILES['image']['name'];
 $image_type= $_FILES['image']['type'];
 $image_size= $_FILES['image']['size'];
 $image_tmp= $_FILES['image']['tmp_name'];

 if(move_uploaded_file($image_tmp,"uploadedimg/$image_name"))
 {
     echo "<script type='text/javascript'>alert('File Uploaded!');</script>";
 }
$folder= "uploadedimg/";
if(is_dir($folder)) {

    if($handle = opendir($folder)){
        while(($file= readdir($handle)) !=false){
            if($file === '.' || $file === '..') 
                continue;
            echo '<div class="panorama round" style=" width:1200px; height:500px; padding:10px ;background-color:#444; position: relative;">';
            echo '<div class="panorama-view">';
            echo '<div class="panorama-container">';
            echo '<img src="uploadedimg/'.$file.'" data-width="4077" data-height="500" alt="Panorama" />';
            echo '</div>';
            echo '</div>';
            echo '</div>';
        }
         closedir($handle);
    }   
}     
} ?>

Answer 1

You get Uncaught ReferenceError: jQuery is not defined or Uncaught ReferenceError: $ is not defined error (as seen in your shared screenshot in comments under your post) because you have not included the jQuery library in your project.

Both errors are identical and pointing to the same problem as explained above.

Note that you CANNOT use panorama360 without making use of the jQuery library as it (jQuery library) is a required dependency.

To include the jQuery library in your project, you have two (2) main options; either:

You consume it from a content delivery network (CDN) by including it in your project as shown in the snippet below,

<script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>

or,

downloading and referencing it directly from your stored location

<script src="/path/to/jquery-3.1.1.min.js"></script>

There is a last option which has to do with combining the earlier two mentioned above, using one as a graceful failover; here is the illustration:

<script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-3.1.1.min.js"><\/script>')</script>

(With the above, you can make use of the jQuery library in your project by consuming it from the CDN and automatically load the version on your sever should the later fail. More details here)

It's important to note that your jQuery library declaration SHOULD occur before the referencing of your panorama360 JavaScript resources; either:

<script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>
<script src="/js/jquery.mousewheel.min.js"></script>
<script src="/js/jquery.panorama360.js" ></script>

Should you chose to use PHP echo() function to handle your file inclusion, do use a single quote or escape your double quotes. ... more details here.

So, you should be doing something like this:

<?php
echo "<link rel='stylesheet' href='/css/panorama360.css'>";
echo "<script
    src='https://code.jquery.com/jquery-3.1.1.min.js'
    integrity='sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8='
    crossorigin='anonymous'></script>";
echo "<script src='/js/jquery.mousewheel.min.js'></script>";
echo "<script src='/js/jquery.panorama360.js'></script>";
echo "<script>$(function(){ $('.panorama-view').panorama360(); });</script>";

To reference your resources without making use of PHP the raw HTML way as discussed in comment below,

<?php
    // Should you want to run any PHP codes before referencing your resources,
    // you may do so here.
    // Remember: you MUST close this section as below this comments so as to
    // mark the end of your PHP code
?>
<link rel="stylesheet" href="/css/panorama360.css">
<script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>
<script src="/js/jquery.mousewheel.min.js"></script>
<script src="/js/jquery.panorama360.js"></script>
<script>$(function(){ $('.panorama-view').panorama360(); });</script>

<?php
    // Here, other PHP codes
?>