Code not seeing another code from other folders in project

I am working on a project and i am including code from different resources from the net. Now i have beginning to get problems. With "code not seeing another code ". I will explain on particular example:
My project tree is as next
project_folder
     header.php
     functions.php
     PgetJson.php
     js_folder 
       JSgetJson.js
       fabric.min.js
     sub_folder
       another.php

Open in new window

In functions.php I am using wp_enqueue_script and wp_enqueue_style  to include js and css  files to project (custom Word press theme)
In header.php i have a canvas  <canvas class="objectcanvas" id="c" width="980" height="500" > 
and in JSgetJson.js I am getting Json to display on canvas:
function getJsonF(){ ////////////////////////////////////                              JSgetjson
var whichProjectToSave=document.getElementById("selectProjectID").value;
$.ajax({
  method:"POST",
  url: '/wp-content/themes/net/PgJson.php',
  data:  {
    "getCanvas":1,
    "whichProject":whichProjectToSave,
    },
    datatype: "text",
    success: function(strdate){
   canvas.loadFromJSON(strdate, function() {
    // console .log(strdate);
     canvas.renderAll();     
      });
     }
 }); 
}

Open in new window

from the server with  code from PgetJson.php
<?php //////////////////////////////////////////////////               PgetJson.php  
$db2=mysqli_connect("localhost","ccc","ccc2","222cl_projectObjects")or die ("no connection"); 
                    
       if (isset($_POST["getCanvas"]) ) {  
               $projectName= mysqli_real_escape_string($db2, $_POST['whichProject']);
              $query = "SELECT objectsList FROM projectObjectstable  WHERE projectName='$projectName'";
              $jsonCanvas= mysqli_query($db2,$query);
                    $row = mysqli_fetch_row($jsonCanvas);
                    $myLine=$row['0'];
                    echo $myLine;
       }
        mysqli_close($db2);
?>

Open in new window


Until here everything works fine.

But am getting in troubles when i want to display the same Json in another.php on next canvas:
 <canvas class="objectcanvas" id="c7" width="200" height="200" backgroundColor= "red" > 
I have a problem alreday when i want to display canvas.
This is the error:
Uncaught ReferenceError: fabric is not defined at .....
Uncaught TypeError: Cannot create property 'style' on string 'c7' at i._createCanvasElement (fabric.min.js:2)

I am opening another.php page from the link in header.php.

And another.php is as next:
<?php
...........
>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
....
.........
</style>
<script type="text/javascript">
.......
 var canvas = new fabric.Canvas('c7');
...........
</script>
</head>
<body>
.......
........
 <canvas class="objectcanvas" id="c7" width="100" height="100" backgroundColor= "red" > 
........
............
</body>
</html>

Open in new window


I hope that i gave enough information to start from somewhere.
Ivan GolubarAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
Is another.php a normal wordpress file and are you calling wp_head(). If you're not, then the styles and JS you enqueue in your functions file won't be included, which is why you get fabric is not defined - you haven't included the fabric.min.js file.

If it's not a wordpress file, then you'll need to manually include your script files in the <head>
Ivan GolubarAuthor Commented:
Thank you for your answer.  And i hope You will find a way to help me further.

I can not figure out what must i do to solve the problem.
Is another.php a normal wordpress file
I don't understand what do you mean with this question.
The structure of another.php is illustrated in last code snippet (i see now that i forgot a "?" sign in third line(just here on EE)).
I am calling wp_head() in header.php. and everything works fine except for sub_folder content.


I did add  
<script src="/wp-content/themes/net4/js/fabric.min.js"></script>-c
to <head> of another.php
and it seams that it helps with definition of fabrics. But now problem still persist with:
fabric.min.js:2 Uncaught TypeError: Cannot create property 'style' on string 'c7'
    at i._createCanvasElement (fabric.min.js:2)
    at i._createLowerCanvas (fabric.min.js:2)
    at i._initStatic (fabric.min.js:2)
    at initialize (fabric.min.js:3)
    at new i (fabric.min.js:1)
    at user.php?u=i:262

Open in new window


I will expres me in probably in inpropiate mode bud how to expand
  wp_head()     ? functions.php with "enqueue" influence to sub_folder (pleas check project tree from first code snippet in question).
Chris StanyonWebDevCommented:
A wordpress file is a file that makes up the standard functionality of your wordpress site, such as your templates / header / footer etc, or is added by a plugin or your functions file.

If you've just created a standard php file (which it looks like you have) then it does not enqueue the scripts in the same way or have access to the normal wordpress functions - it's just a standalone page so you would need to manually add all your CSS and JS Files into it.

If you want to post up your full page code of another.php I can take a look, but I don't know Fabric
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Get Your eBook
Ivan GolubarAuthor Commented:
I have attached illustration of my project tree from server.
I have created  my template by youtube videos. I had just google:
how to create your own template in wordpress
If i am not forgetting something i needed just next:
style.css
/*
Theme Name:Net4
Theme URI: //https://3s.com/wp-content/themes/neto4
Author: 
Author URI: https://3s.com/
Description: non
Tags: black, white, responsive, one-column, two-columns, featured-images, custom-menu, custom-header, post-formats
*/

Open in new window

header.php
  
<?php wp_head(); ?>

Open in new window

functions.php
<?php
function  a_scrypt_enqueue (){
wp_enqueue_script......................
wp_enqueue_style..............................
add_action( 'wp_enqueue_scripts', 'a_scrypt_enqueue' );

Open in new window

index.php
<?php get_header(); ?>
<?php get_footer(); ?>

Open in new window

footer.php
<?php wp_footer(); ?>

Open in new window


To go back to the problem. If You check my attached illustration. All phps which are in blue ellipse (project folder) can use csss an jss files from css and js folders (yellow ellipses), but phps wich are in folders in green ellipse can't do that. What must i do to make it work also for them.

I think the solution would be to move them one level upper directly under project folder (i would do that if then i would not have to correct all link paths between files), but isn't there any other solution?

I will add my another.php file after dinner.
myPage.png
Ivan GolubarAuthor Commented:
Here is code from another.php and also errors.
<?php
	$show_btn = '<button onclick="show_btn()">Show running app</button>';
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

 <script src="/wp-content/themes/net4/js/fabric.min.js"></script>
 

<style type="text/css">

#projectWindow > #c7 {
    border: 2px solid #999;
}
</style>

<script type="text/javascript">

function show_btn(){
$.ajax({
  method:"POST",
  url: '/wp-content/themes/net4/PJson.php',
  data:  {
    "getCanvas":1,
    "whichProject":whichProjectToSave,
    },
    datatype: "text",
    success: function(strdate){
   console.log(strdate);

     }
 });
}
var canvas = new fabric.Canvas('c7');
</script>

</head>
<body>
   <div id="projectWindow">
     <a>Actual project running:</a><br>
     <div id="project_pic_box"><?php echo $project_pic; ?></div>
     <h2><?php echo (isset($_SESSION["actualproject"])) ? $_SESSION["actualproject"] : "Not Set" ?></h2>
     <p><span id="showBtn"><?php echo $show_btn; ?></span></p>
    <canvas class="objectcanvas" id="c7" width="100" height="100" >  
   </div>
</body>
</html>

Open in new window


Uncaught TypeError: Cannot create property 'style' on string 'c7'
    at i._createCanvasElement (fabric.min.js:2)
    at i._createLowerCanvas (fabric.min.js:2)
    at i._initStatic (fabric.min.js:2)
    at initialize (fabric.min.js:3)
    at new i (fabric.min.js:1)
    at user.php?u=i:49

Open in new window

Uncaught ReferenceError: $ is not defined
    at show_btn (user.php?u=ivan:35)
    at HTMLButtonElement.onclick (user.php?u=i:58)

Open in new window

Chris StanyonWebDevCommented:
OK. Maybe try and explain what you're trying to achieve. As I've already said, you can't just add any old PHP file to WordPress and expect it to work!
Chris StanyonWebDevCommented:
Your error is because you're not including the jQuery library. You need to make sure that's included in the <head> of you document:

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Chris StanyonWebDevCommented:
You also need to wrap your canvas code in a document ready block to prevent it from being fired too early:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    canvas = new fabric.Canvas('c7');
}); 
</script>

Open in new window

Ivan GolubarAuthor Commented:
Ok,  jQuery library is now included, but what must i do to solve also other error in my last post code snippet?

Maybe try and explain what you're trying to achieve.

In my last post is attached illustration. Pleas check it. The phps in blue ellipse are normal phps files and they are working with  css and js files in yellow ellipses.  I have also phps which are in folders in green elipse, and i want also them to work as php files in blue elipse are working.
Ivan GolubarAuthor Commented:
Thank you also the other error is gone.


And i will use same solution as for  
<script src="/....................fabric.min.js"></script>
case to connect  everything together.
I need to check if it will work fine for me. And i will close the question. Thank you again.
Ivan GolubarAuthor Commented:
Just another thing to fix before we conclude :
If I use document ready block then canvas despairs in very soon after he gets present.
Chris StanyonWebDevCommented:
Show your code so we can take a look.
Ivan GolubarAuthor Commented: 
<?php
	$show_btn = '<button onclick="show_btn()">Show running app</button>';
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

 <script src="/wp-content/themes/net4/js/fabric.min.js"></script>
 <script src="/wp-content/themes/net4/js/jquery-3.2.1.min.js"></script>

<style type="text/css">

#projectWindow > #c7 {
    border: 2px solid #999;
}
</style>

<script type="text/javascript">

function show_btn(){
$.ajax({
  method:"POST",
  url: '/wp-content/themes/net4/PJson.php',
  data:  {
    "getCanvas":1,
    "whichProject":whichProjectToSave,
    },
    datatype: "text",
    success: function(strdate){
   console.log(strdate);

     }
 });
}


$(document).ready(function() {
   canvas = new fabric.Canvas('c7');
}); 

</script>

</head>
<body>
   <div id="projectWindow">
     <a>Actual project running:</a><br>
     <h2><?php echo (isset($_SESSION["actualproject"])) ? $_SESSION["actualproject"] : "Not Set" ?></h2>
     <p><span id="showBtn"><?php echo $show_btn; ?></span></p>
    <canvas class="objectcanvas" id="c7" width="100" height="100"  >  
   </div>
</body>
</html>

Open in new window

Chris StanyonWebDevCommented:
OK. Your canvas doesn't disappear - it just has the border removed from it.

In your CSS you have this:

#projectWindow > #c7 { border: 2px solid #999; }

This will set the border of the c7 element only when it's a DIRECT child of the projectWindow element, which is fine when your page first loads up because it is a direct child:

<div id="projectWindow">
    <canvas class="objectcanvas" id="c7" width="100" height="100"  >  

Once the fabric.Canvas code has fired, your c7 canvas is wrapped in an additional element, so your HTML ends up looking like:

<div id="projectWindow">
   <div class="canvas-container">
       <canvas class="objectcanvas" id="c7" width="100" height="100"  >  
 
You can see that the c7 canvas is not longer a DIRECT child of projectWindow, so the CSS doesn't apply. Just change your CSS so that it selectors ALL children, not just DIRECT children (remove the > symbol):

#projectWindow #c7 { border: 2px solid #999; }
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.