Code not seeing another code from other folders in project

Ivan Golubar used Ask the Experts™

on 2017-10-27

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.

Comment

Watch Question

Do more with

EXPERT OFFICE^® is a registered trademark of EXPERTS EXCHANGE^®

View Solution Only

Chris StanyonWebDev

Trusted Expert

Most Valuable Expert 2018

Distinguished Expert 2018

Commented: 2017-10-28

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 Golubar

Author

Commented: 2017-10-28

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 StanyonWebDev

Trusted Expert

Most Valuable Expert 2018

Distinguished Expert 2018

Commented: 2017-10-28

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

Ivan Golubar

Author

Commented: 2017-10-29

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 Golubar

Author

Commented: 2017-10-29

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 StanyonWebDev

Trusted Expert

Most Valuable Expert 2018

Distinguished Expert 2018

Commented: 2017-10-29

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 StanyonWebDev

Trusted Expert

Most Valuable Expert 2018

Distinguished Expert 2018

Commented: 2017-10-29

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>

Chris StanyonWebDev

Trusted Expert

Most Valuable Expert 2018

Distinguished Expert 2018

Commented: 2017-10-29

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 Golubar

Author

Commented: 2017-10-29

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 Golubar

Author

Commented: 2017-10-29

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 Golubar

Author

Commented: 2017-10-29

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 StanyonWebDev

Trusted Expert

Most Valuable Expert 2018

Distinguished Expert 2018

Commented: 2017-10-30

Show your code so we can take a look.

Ivan Golubar

Author

Commented: 2017-10-30

<?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 StanyonWebDev

Trusted Expert

Most Valuable Expert 2018

Distinguished Expert 2018

Commented: 2017-10-30

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; }

Do more with

Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial

Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial

EXPERT OFFICE^® is a registered trademark of EXPERTS EXCHANGE^®

Facebook
Twitter
LinkedIn
https://www.experts-exchange.com/questions/29065148/Code-not-seeing-another-code-from-other-folders-in-project.html copy

Code not seeing another code from other folders in project

Premium Content

Premium Content