External Javascript file fails to receive variables from previous javascript block
Posted
by
Franc
on Stack Overflow
See other posts from Stack Overflow
or by Franc
Published on 2012-11-22T21:42:54Z
Indexed on
2012/11/22
22:59 UTC
Read the original article
Hit count: 166
I've been searching the net for several hours and can't find an answer in the whole "external js file"-jungle. I hope you guys can help!
In short: My external javascript file doesn't seem to get the variables which I defined in the main.php file..
On main.php I define php variables and "transform" them into javascript variables
<head>... <script type="text/javascript"> var phpmain_img = <?php echo json_encode($main_img); ?>; var phpvar1_large = <?php echo json_encode($var1_large); ?>; var phpvar2_large = <?php echo json_encode($var2_large); ?>; var phpvar3_large = <?php echo json_encode($var3_large); ?>; var phpvar4_large = <?php echo json_encode($var4_large); ?>; </script> ... <script language="javascript" type="text/javascript" src="/wshop/ext.js"></script> </head>In my ext.js file I want to process those variables. In the ext.js file I defined a the function swapImage() that will be used back in the main PHP:
var imgArray = new Array( phpmain_img, phpvar1_large, phpvar2_large, phpvar3_large ); function swapImage(imgID) { var theImage = document.getElementById('theImage'); var newImg; newImg = imgArray[imgID]; theImage.src = newImg; } function preloadImages() { for(var i = 0; i < imgArray.length; i++) { var tmpImg = new Image; tmpImg.src = imgArray[i]; } }Result: The swapImage() in the main.php... doesnt work
<div id="image"> <img id="theImage" src="<?=$main_img; ?>" alt="" /> </div> <div id="thumbs"> <?php echo "<img src=\"<$main_img_small\" alt=\"\" onmouseover=\"swapImage(0);\">"; echo "<img src=\"$var1_small\" alt=\"\" onmouseover=\"swapImage(1);\">"; echo "<img src=\"$var2_small\" alt=\"\" onmouseover=\"swapImage(2);\">"; echo "<img src=\"$var3_small\" alt=\"\" onmouseover=\"swapImage(3);\">"; ?> <br /> </div>
Any help is greatly appreciated!
UPDATE:
I don't get a specific error, the swapImage functions doesn't work at mouseover. However, I tried to output the variables with e.g. document.write(phpimg_main) but nothing appears which makes me believe that there's something wrong with the handing over of the variables...
here's the source code browser output
`<html>
<head>
<link href="../demo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
....
</style>
<script type="text/javascript">
var phpmain_img = {"0":"http:\/\/path\/to\/main\/image.jpg"};
var phpvar1_large = {"0":"http:\/\/path\/to\/image1.jpg"};
var phpvar2_large = {"0":"http:\/\/path\/to\/image2.jpg"};
var phpvar3_large = null;
var phpvar4_large = null;
</script>
<script language="javascript" type="text/javascript" src="/wshop/ext.js"></script>
</head>
<body onload="preloadImages()">
<div id="image">
<img id="theImage" src="http://path-to-main-image.jpg" alt="" />
</div>
<div id="thumbs">
<img src="http://path-to-main-image.jpg" alt="" onmouseover="swapImage(0);"><img src="http://path-to-image1.jpg" alt="" onmouseover="swapImage(1);"><img src="http://path-to-image2.jpg" alt="" onmouseover="swapImage(2);">
<br />
</div>
</body>
`
© Stack Overflow or respective owner
