up vote 1 down vote favorite

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!

share|improve this question
80% accept rate
feedback

2 Answers

up vote 3 down vote accepted 
$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);
share|improve this answer
Thanks for the answer! However, I tried both methods for json_encode and utilized quotes, but the json_encode method is giving me blank URL's, it isn't actually grabbing anything through the PHP. Ideas? – thepristinedesign Jul 6 '11 at 16:50
Does that helper function return its value, or directly output it? If it's direct output, then none of this'll work as it bypasses the json_encode/array building completely. – Marc B Jul 6 '11 at 16:51
I'm not quite sure what your asking, I get something like this...$image-paths[0] = "{}";$image-paths[1] = "{}";$image-paths[2] = "{}"; Maybe I am going about this problem incorrectly. – thepristinedesign Jul 6 '11 at 16:53
if that init() function does its own echo $linktext instead of return $linktext, then it's doing direct output, and the json-encode function never sees the link text. You'd need to mod the function to return, or use output buffering (ob_start() and company) to capture the output. – Marc B Jul 6 '11 at 16:56
ohh I see what you mean. Yes, the helper echo's the output, so it looks like this is way beyond the scope of what i'm able to do. But I really appreciate your help. – thepristinedesign Jul 6 '11 at 17:00
show 1 more comment
feedback
up vote 0 down vote 
<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.

share|improve this answer
I'm not sure what you changed? – thepristinedesign Jul 6 '11 at 16:43
Check my updated answer please. – Knowledge Craving Jul 6 '11 at 16:52
Javascript has no problem with variables having a $ in the name... if it did, there'd be a LOT of jquery code that would never have worked in the first place. – Marc B Jul 6 '11 at 16:56
@Marc - Many thanks for letting me know, I'm changing the answer also. – Knowledge Craving Jul 6 '11 at 18:31
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.