Question

I have a single image embedded on a page that is drawn from a mysql database that holds the filename. What’s I’d like to do is use javascript to call let’s say pump.php to bring in the absolute next image in the database – sort of like a slide show and then dynamiclly write that to the img src. i’m close but stumped. Any help is mega appreciated and I searched and searched! Here is the div/embedded image:

<div id="image_holder"><img id=target src=./watch/<? echo $frame; ?> /></div>

Then i have this javascript, that after 1000 ticks of the clock calls function kitty. Kitty is supposed to refresh pump.php which contains php along with the ID number (let’s assume it starts with 1, the first record and then write to the HTML above the new image name dynamically:

 setInterval("kitty()",1000);

 function kitty(){

 $.get('pump.php?id=<? echo $id; ?>', 
  { lastupdate: 1 }, 
  processUpdate, 'html');
  }, 1000 ) };

 var target_image = document.getElementById("target");
  target_image.src = <? echo $image ?>; 
}

Here is the pump.php (minus the database connection info) it supposed to pull the image where the ID = the current ID of the script and also increment ID by one so that way we can start at 2 next time!

$result = mysql_query( "SELECT * FROM frame_database where id=$id " );
$data = mysql_fetch_array($result); 
$image = $data["image"]; 
$id++;

What do you guys think? am I faaaaaaaaaaaar from the tree?

Answer 1

First off pump.php needs to return data to the script so that the script can get the imagename.

$result = mysql_query( "SELECT * FROM frame_database where id=$id " );
$data = mysql_fetch_array($result); 
$image = $data["image"]; 
$id++;
echo json_encode(array('image'=>$image, 'id'=>id));

Then in kitty() you can do:

$.get('pump.php?id=<? echo $id; ?>', 
      { lastupdate: 1 }, 
      function(data){
            var res = JSON.parse(data);
            var target_image = document.getElementById("target");
            target_image.src = res.image; 
      }, 'html');

Note that you will probably want to change the <? echo $id; ?> part to be a javascript variable that the get call in kitty() can update.

Hope this helps.