Jquery/ Javascript 从 PHP scope 问题获取信息？

Question

I am trying to get some information from our database and then use it in javascript/JQuery and I think I might be doing something wrong with the scope of the coding.

Here is the current segment of code on my phtml page (magento)

<script type="text/javascript">
<?php
echo 'var $image-paths = new Array();';
for ($i = 0; $i < count ($_child_products); $i++)
{
    echo '$image-paths[';
    echo $i;
    echo '] = ';
    echo $this->helper('catalog/image')->init($_child_products[$i], 'image');
    echo ';';
}
?>
document.getElementById('main-image').href = $image-paths[1];
</script>

The bottom getElementById is just for testing to see if it really grabbed that image path. So far the php stuff is working and echo'ing the correct links. However, is simply echo'ing them not enough; does it actually register it into the javascript code?

Here is what my source code looks like on my server:

<script type="text/javascript">
var $image-paths = new Array();
$image-paths[0] = http://staging.greencupboards.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5f  b8d27136e95/feeds/MrsMeyers/MRM-64565-a.jpg;
$image-paths[1] = http://staging.greencupboards.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/feeds/MrsMeyers/MRM-64566-a.jpg;
$image-paths[2] = http://staging.greencupboards.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/feeds/MrsMeyers/MRM-64568-a.jpg;
$image-paths[3] = http://staging.greencupboards.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/feeds/MrsMeyers/MRM-D43114-a.jpg;
document.getElementById('main-image').href = $image-paths[1];
</script>

But the image link does not change to image-path[1]. Any ideas?

Thanks in advance!

Answer 1

$image-paths[0] = http://staging.greencupboards.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5f  b8d27136e95/feeds/MrsMeyers/MRM-64565-a.jpg;
                  ^-- no quote here, or at the end of the string

You're producing invalid javascript. Pop up your javascript console (shift-ctrl-J in chrome/firefox) and you'll see the error.

Producing javascript dynamically is problematic. Anytime you insert something from a PHP variable/function, you should run that through json_encode(), which guarantees you get valid javascript:

echo json_encode($this->helper('catalog/image')->init($_child_products[$i], 'image'));

Or better yet, change the code to:

$links = array();
for ($i = 0; $i < count ($_child_products); $i++)
    $links[] = $this->helper('catalog/image')->init($_child_products[$i], 'image');
}

echo '$image-paths = ', json_encode($links);

Answer 2

<script type="text/javascript">
<?php
echo 'var $image_paths = new Array();';
for ($i = 0; $i < count ($_child_products); $i++)
{
    echo '$image_paths[';
    echo $i;
    echo '] = "'; // Here the starting of quotes.
    echo $this->helper('catalog/image')->init($_child_products[$i], 'image');
    echo '";'; // Here the ending of quotes.
}
?>
document.getElementById('main-image').href = $image_paths[1];
</script>

This should work now. Hope it helps.