asked on

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.

Chris Stanyon

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

ASKER

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 Stanyon

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

ASKER

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

ASKER

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 Stanyon

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!

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Chris Stanyon

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

ASKER

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

ASKER

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

ASKER

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 Stanyon

Show your code so we can take a look.

Ivan Golubar

ASKER

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

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