jquery load not reading string as variable (php hybrid) - php

Question

I'm writing out a javascript string to be parsed by jquery - it works fine as an alert but not in the jquery load function
PHP:
$imgData = 'http://www.domain.com/_image.php/_MG_4156.jpg' ;
which is a php script to generate a thumbnail on the fly
<script type='text/javascript' language='javascript' charset='utf-8'>
<!--
var chart1img_".$i_gall." = new Image();
var imgData = '".$imgData."';
$(chart1img_".$i_gall.").load(function () {
$(this).hide();
$('#thumb_img_div_".$i_gall."').removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
alert(imgData);
}).attr('src', imgData);
//}).attr('src', 'http://www.domain.com/_image.php/_MG_4156.jpg');
//-->
</script>";
If I hardcore the string it works.
If I use it as the imgData variable it fails, but the alert works using imgData
Tried string combos all ways. Defeated. Any ideas?

Answer 1

you need add php tags in your code
<script type='text/javascript' language='javascript' charset='utf-8'>
<!--
var chart1img_"<?php echo $i_gall;?>" = new Image();
var imgData = '<?php echo $imgData?>';
$("chart1img_<?php echo $i_gall;?>").load(function () {
$(this).hide();
$('#thumb_img_div_<?php echo $i_gall;?>').removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
alert(imgData);
}).attr('src', imgData);
//}).attr('src', 'http://clients.flatearth.co.uk/benhopper/project/_image.php/_MG_4156.jpg');
//-->
</script>";

Answer 2

Using closures will give you a cleaner code.
Also, use json_encode to send values to JavaScript.
For example,
echo "
<script type='text/javascript'>
(function() {
var image = new Image(),
imgData = " . json_encode($imgData) . ",
i_gall = " . json_encode($i_gall) . ";
$(image).load(function () {
$(this).hide();
$('#thumb_img_div_' + i_gall).removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
alert(imgData);
}).attr('src', imgData);
})();
</script>";
This minimizes the number of embedded PHP value be defining them as JavaScript variables.
You can also put them in functions:
<script type='text/javascript'>
function loadAndShowImage(imgData, i_gall) {
var image = new Image()
$(image).load(function () {
$(this).hide();
$('#thumb_img_div_' + i_gall).removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
alert(imgData);
}).attr('src', imgData);
}
</script>
and then output just the dynamic parts:
echo "
<script type='text/javascript'>
loadAndShowImage(" . json_encode($imgData) . ", " . json_encode($i_gall) . ");
</script>";

Answer 3

Not sure what the problem is other than it's one of the characters in the full variable?:
var imgData = 'http://www.domain.com/_image.php/".$r_gall['image']."?width=145&height=205&cropratio=145:205&image=/images_cms/".$r_gall['image']."';
But I kept as much of the string in JS and just replaced the dynamic parts with PHP