[Resolved] Mixing Javascript with PHP

[geogal]

Hello,

Can someone tell me why this doesn't work? It is a slideshow function written in javascript, using a PHP array. I get the last image of the slideshow in my view box, but when I click "Next," I get the entire array in a string - not just the next image.

PHP

<?
$sql = "SELECT ID,title,image FROM slideshow WHERE sID=$sID";

$result = mysql_query($sql);
$imgarray=array();
$z=0;

while ($myrow = mysql_fetch_row($result)) {
$image = str_replace($bad,"",$myrow[2]);
$imgarray[$z]=$image;
z++;

}
$count = count($imgarray);
?>

---

JAVASCRIPT

<SCRIPT Language="JavaScript">

<!--
var picture = new Array("<?php
while (list($key, $val) = each($imgarray)) {
echo "$val";
}
if ($zz!=$count) {
echo ",";
}

?>")
var picNumber=1
var numberofPics = picture.length
function previousPicture(){
if(picNumber > 1){
picNumber--
}

document.myPicture.src=picture[picNumber-1]
}
function nextPicture(){
if(picNumber < numberofPics){
picNumber++
}
document.myPicture.src=picture[picNumber-1]
}
//-->
</script>

---

BODY

<?

echo "<img src=$image name=myPicture>";
?>
<BR>
<a href="JavaScript:previousPicture()">Previous</a>
<a href="JavaScript:nextPicture()">Next</a>

When I print out my array, it looks correct:

images/image1.jpg,images/image2.jpg,images/image3.jpg...

but this is the string I get as my image source when I click "next".

Any help will REALLY be appreciated. I've been toiling with this for some time, and just keep getting nowhere.

Thanks so much.

Geogal

[dalecosp]

Well, the while...each loop looks like the culprit. I'll test and come back to 'ya in a while.

[dalecosp]

Hmm, I seem to remember that maybe I got you in this mess to begin with.

My quoting needed to be adjusted to get the proper array layout for JS. Also, your JS functions "Prev" and "Next" were both doing subtraction....

I think we've got it this time?

<?php

$sql = "SELECT ID,title,image FROM slideshow WHERE sID=$sID";

$result = mysql_query($sql) ;
$imgarray=array();
$z=0;

while ($myrow = mysql_fetch_row($result)) {
$image = str_replace($bad,"",$myrow[2]);
$imgarray[$z]=$image;
z++;

}
$count=count($imgarray);

?>
<!-- ---------------
JAVASCRIPT
------------- -->
<SCRIPT Language="JavaScript" type="text/javascript">

<!--
var picture = new Array(<?php
while (list($key, $val) = each($imgarray)) {
echo "\"$val\"";
if ($zz<($count-1)) {
echo ", ";
}
$zz++;
}

?>)
var picNumber=1
var numberofPics = picture.length

function previousPicture(){
        if(picNumber > 0){
                picNumber--                                              

        }
        document.myPicture.src=picture[picNumber]
}

function nextPicture(){
        if(picNumber < numberofPics){
                picNumber++
        }
        document.myPicture.src=picture[picNumber]
}
//-->
</script>

<!-- ----------
BODY
---------- -->
<?

echo "<img src=$image name=myPicture>";
?>
<br>
<a href="javascript:previousPicture()">Previous</a>
<a href="javascript:nextPicture()">Next</a>

[geogal]

Thanks so much for picking up on this again! I really appreciate it.

The results seem to be the same. The slideshow box begins with the last item in the array, then when I click "next," I get the image source as "undefined." When I click "previous," I get the entire array, with commas, as the image source.

It seems like it is not beginning with the right image (the first) and isn't iterating through the array on click. I can print out the array properly, but the Javascript isn't dividing the images at all.

Sorry to be such a pain, I'll still hammer away at it. Any suggestions will be very much appreciated!

Geogal

[pablodelapena]

i dont know if this is any help, but what i would do is code the javascript without PHP so ti works, then try and get the PHP to replicate what SHOULD be there?

if i run into problems i get the basics to work first and then work backwards and add the PHP.

Just a suggestion?

[neb010101]

how do PHP and javascript execute together?

specifically, how does PHP "write" into the javascript?

why doesn't this work:

<script language="JavaScript" type="text/javascript">
<!--
var alternateContent = '<?php include something.php ?>';
// -->
</script>

???
I am sure my understanding of the (server/client) execution model is wrong....
???

[dalecosp]

originally posted by geogal
The results seem to be the same

Pablo's got a good idea ... AAMOF, just how good? I'll tell you how I tested the code above. I created two .jpg's called "foo.jpg" and "bar.jpg", then commented out the DB stuff and stuck in

$imgarray=array("foo.jpg", "bar.jpg", "foo.jpg", "bar.jpg", "foo.jpg", "bar.jpg");

I set the $count var by hand as well as the $image var to "foo.jpg" (the first one 😉 ) and from there it worked after I adjusted your JS functions. Sound like his idea?

I'm guessing, based on this, that something's wrong with one or more of the variables that I set by hand, or the DB stuff. But, it's just a guess. What does your code look like now?

[dalecosp]

Originally posted by neb010101
how do PHP and javascript execute together?

Technically speaking, they don't. PHP outputs browser code, which could be HTML, or Javascript, or possibly something else (WML, XML come to mind quickly....). So they "work together" this way: the programmer decides what Javascript to spew out and PHP does it according to his/her directions....

specifically, how does PHP "write" into the javascript?

<?php
echo "<script type=\"text/javascript\" language=Javascript>";
//etc.......

As with any other PHP, you can insert whatever $variables, expressions, etc. into the PHP that's outputting JS, and alter the JS in this way....

why doesn't this work:

<script language="JavaScript" type="text/javascript">
<!--
var alternateContent = '<?php include something.php ?>';
// -->
</script>


???
I am sure my understanding of the (server/client) execution model is wrong....
???

Can't comment on that last part. Why doesn't include() work? It does, but you'd need to be real careful about what you include. JavaScript is all on the client side --- it's given to the browser by the server, and the browser acts on it. Server Side technologies like PHP have already done all their processing before the code gets sent to the client; so you couldn't expect any kind of real "interaction" between JS and PHP... although they can control one another in limited sorts of ways....

[geogal]

Thanks for the responses. Yes, I too tested the code w/o the PHP and it worked fine. I hard coded the images, set the first image in the slideshow box to begin and all worked wonderfully. This is how I initially started the process, trying to figure out how it worked before I input the PHP.

I agree, it must be something with the way the variable(s) are set. I initially thought it was because the program wasn't seeing the images as separate images, but as one long name:

"images/pic1.jpg,images/pic2.jpg,images/pic3.jpg"

But I input apostrophe's around the variable "'$val'" and it still didn't work. Hmmmm...I at least got the function to call the first image by calling it out this way:

<?
echo "$imgarray[$z]" name=myPicture
?>

Here is my array printed out via PHP:

Array ( [0] => images/slideshow/alumni_canoe_adventure_03_001.jpg [1] => images/slideshow/alumni_canoe_adventure_03_002.jpg [2] => images/slideshow/alumni_canoe_adventure_03_003.jpg [3] => images/slideshow/alumni_canoe_adventure_03_004.jpg [4] => images/slideshow/alumni_canoe_adventure_03_005.jpg [5] => images/slideshow/alumni_canoe_adventure_03_006.jpg )

Here is my image source when I view it through the browser upon clicking "next."

http://www.mysite.com/files/undefined

When I click "Previous", this is what I get:

http://www.mysite.com/files/'images/slideshow/alumni_canoe_adventure_03_001.jpg','images/slideshow/alumni_canoe_adventure_03_002.jpg','images/slideshow/alumni_canoe_adventure_03_003.jpg','images/slideshow/alumni_canoe_adventure_03_004.jpg','images/slideshow/alumni_canoe_adventure_03_005.jpg','images/slideshow/alumni_canoe_adventure_03_006.jpg'

Does this help in deciphering the problem?

I will keep plugging away!

Geogal

[geogal]

For anyone who is interested, I've found out how to do this. I took the samples graciously given above and added a bit of code found elsewhere on the web. After tinkering with the script a bit, I finally found something that works.

This is for creating a dynamic slideshow using PHP and Javascript, using a MySql database:

---

$sql = "SELECT * FROM slideshow WHERE slideshow.sID=$sID";
$result = mysql_query($sql);
$imgarray=array(); // set it up here
$z=0;

while ($myrow = mysql_fetch_row($result)) {
$bad = ("../");
$title = $myrow[0];
$comments = $myrow[1];
$image = str_replace($bad,"",$myrow[2]);
$imgarray[$z]=$image;
$z++;

}
?>

<script language="JavaScript">
var picture = new Array("<?php echo join('", "', $imgarray); ?>");

var picNumber=1
var numberofPics = picture.length
function previousPicture(){
if(picNumber > 1){
picNumber--
}
document.myPicture.src=picture[picNumber-1]
}
function nextPicture(){
if(picNumber < numberofPics){
picNumber++
}
document.myPicture.src=picture[picNumber-1]
}
//-->
</script>

---

Call out the images:

<?
echo "<img src=$imgarray[0] name=myPicture>";
?>
<BR>
<a href="JavaScript:previousPicture()">Previous</a><BR>
<a href="JavaScript:nextPicture()">Next</a>

There is most likely an easier way, as I'm certainly no expert in Javascript nor PHP. But I just wanted to post this for others who may be interested.

Thanks all!

Geogal