PHP echo Outputting JavaScript - script does not have same scope

Question

I am currently designing an HTML5 Canvas application and am using an Image Uploader so that users can upload local images to the server and then modify the image on canvas (as a number of manipulations to external sources will give you a security exception).

I have some JS included that goes something like this:

<script type="text/javscript">
    var editImage = new Image; // Global scope; not in a function
    function setupCanvas() {}
</script>

Once the image has been successfully loaded I echo something like this:

echo '
<script type="text/javascript">
    alert("'.$upload_image.'"); 
    window.editImage=new Image(); 
    window.editImage.src=\''.$upload_image.'\'; 
    alert(window.editImage.src);
    setupCanvas();
</script>'

Now the output I get from the alert() statements are $upload_image. But when I check FireBug, it'll say that the editImage var that I have declared GLOBALLY in a separate script is still the ORIGINAL image source, NOT $upload_image. Furthermore, it'll say the setupCanvas() method that I have called will be UNDEFINED, although it is in the GLOBAL scope.

I am assuming when I do this with PHP there must be some scope issues - is there a way around this?

This might very well be the case; how do I ensure it is AFTER the JS includes? I checked the HTML post-PHP action and the added script from PHP appears after the previous JS includes; would this be enough? — J Kao
– J Kao, Commented Dec 18, 2010 at 5:44
I tried including a test.php: echo '<script type="text/javascript">alert(editImage.src);</script>'; and this seems to produce an undefined variable error - even if I place the include AFTER the other includes... although this might be due to image loading, but I still find this surprising. — J Kao
– J Kao, Commented Dec 18, 2010 at 5:54
Nope, PHP has completely nothing to do here. PHP stays thousand miles away from your scope. So, do all things without PHP first, with predefined images, etc. Debug it until it runs well, and only then make your JS generated by PHP. Got it? — Your Common Sense
– Your Common Sense, Commented Dec 18, 2010 at 6:42
Okay, I got it partially working thanks to your help! I copied the JS that I output with PHP into the area where I echo. This gave the SAME error; so it was NOT a PHP issue. This was due to the document probably not loading; so I modified it to this: $(document).ready(function() { editImage=new Image(); editImage.src='graffpic/uploads/fracture_1292689775.jpg'; console.log(editImage.src); setupCanvas(); }); — J Kao
– J Kao, Commented Dec 18, 2010 at 16:39

J Kao · Accepted Answer · 2010-12-18 16:44:49Z

1

Sorry code block in comments was unreadable, this is how I got it working with JUST javascript:

$(document).ready(function() {
   editImage=new Image(); 
   editImage.src='http://graffpic/uploads/fracture_1292689775.jpg'; 
   console.log(editImage.src); 
   setupCanvas();           
});

Only problem is when I output it with PHP it will say $ is UNDEFINED - so this is most likely a loading issue - can anyone give me a bit more detail on this and what to do? I COULD import the jQuery library AGAIN, but that seems clunky; either that or I could import the code fragment that is needed for $(document).ready() which is again quite clunky. Any help?

answered Dec 18, 2010 at 16:44

J Kao

2,1332 gold badges16 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J Kao Over a year ago

The issue ended up being that the output was being captured in an iFrame that I was using.. redirected the output elsewhere and it works... sorry about the confusion

Jon Adams · Accepted Answer · 2012-03-01 22:24:07Z

0

Ah! I hope it's actually your problem too. Not just a typo in your post, cause I've been scratching my head for ages with some code based on your example. It's not simply that your first code block reads,

<script type="text/javscript">

Not

<script type="text/javascript">

is it? (Note the missing 'a' in 'javascript' from the first line.)

edited Mar 1, 2012 at 22:24

Jon Adams

25.3k18 gold badges85 silver badges122 bronze badges

answered Dec 18, 2010 at 6:48

tjm

7,5502 gold badges34 silver badges55 bronze badges

2 Comments

J Kao Over a year ago

Sorry about the example; I didn't copy and paste it directly. But I have spelt it correctly; will debug with pure JS for now- will edit now.

tjm Over a year ago

That's ok, no worries. It serves me right for not fully reading what I was looking at and just starting with a copy and paste myself. Let us know how it goes. I was thinking that since you're dealing with images you might need to be waiting for window.onload but then you shouldn't see setupCanvas as undefined anyway, so I'm not sure.

Collectives™ on Stack Overflow

PHP echo Outputting JavaScript - script does not have same scope

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related