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
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:
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:
I hope that i gave enough information to start from somewhere.
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
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();
});
}
});
}
<?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);
?>
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>
I hope that i gave enough information to start from somewhere.
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>
If it's not a wordpress file, then you'll need to manually include your script files in the <head>
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.
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
and it seams that it helps with definition of fabrics. But now problem still persist with:
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).
I can not figure out what must i do to solve the problem.
Is another.php a normal wordpress fileI 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/neto <head> of another.phpt4/js/fabr ic.min.js" ></script> -c
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
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).
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
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
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
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
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
*/
<?php wp_head(); ?>
<?php
function a_scrypt_enqueue (){
wp_enqueue_script......................
wp_enqueue_style..............................
add_action( 'wp_enqueue_scripts', 'a_scrypt_enqueue' );
<?php get_header(); ?>
<?php get_footer(); ?>
<?php wp_footer(); ?>
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
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>
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
Uncaught ReferenceError: $ is not defined
at show_btn (user.php?u=ivan:35)
at HTMLButtonElement.onclick (user.php?u=i:58)
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!
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
<script src="//ajax.googleapis.com
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>
Ok, jQuery library is now included, but what must i do to solve also other error in my last post code snippet?
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.
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.
Thank you also the other error is gone.
And i will use same solution as for
I need to check if it will work fine for me. And i will close the question. Thank you again.
And i will use same solution as for
<script src="/....................case to connect everything together.fabric.min .js"></scr ipt>
I need to check if it will work fine for me. And i will close the question. Thank you again.
Just another thing to fix before we conclude :
If I use document ready block then canvas despairs in very soon after he gets present.
If I use document ready block then canvas despairs in very soon after he gets present.
<?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>
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; }
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; }
Premium Content
You need an Expert Office subscription to comment.Start Free Trial