Ajax call does not show the new data

JavaScript
1

I have an ajax call that should look in the folder for new images after each loop, And display new images in the next cycle, but its not working correctly

here is my html code:

<html>
  <head>
    <title>Slideshow</title>
    <style type="text/css">
      #slideshow {
        position: relative;
      }
      #slideshow,
      #slideshow img {
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 15px;
        border: 1px solid #ccc;
        background-color: #eee;
      }
      #slide {
        width: 370px;
        height: 220px;
        padding: 0;
        margin: 0 auto;
      }
      #myslides {
        width: 370px;
        height: 220px;
        padding: 0;
        margin: 0 auto;
      }

      #myslides img {
        padding: 10px;
        border:  1px solid rgb(100,100,100);
        background-color: rgb(230,230,230);
        width: 350px;
        height: 200px;
        top:  0;
        left: 0
      }

    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

    <script type="text/javascript">
      function loadSlides() {
        $.ajax({
          type: "GET",
          url: "loadajax.php"
        }).done(function(response) {
          var temp_images = eval("(" + response + ")");
          for(ti in temp_images)
          {
            //alert(temp_images[ti]);
            $('#slideshow').append('<img src="images/' + temp_images[ti] + '" alt="">');
          }
          startSlideshow();
        });
      }

      function startSlideshow()
      {
        $('#slideshow').cycle({
          fx: 'fade',
          speed: 700,
          timeout: 800
        });
      }

      $(document).ready(function(){
        loadSlides();
      });
    </script>
  </head>
  <body>
    <div id="slideshow" />
  </body>
</html>

and my php code:

<?php

function returnimages($dirname="./images") {
  $pattern="([^\\s]+(\\.(?i)(jpg|png|gif|bmp))$)";
  $files = array();
  if($handle = opendir($dirname)) {
    while(false !== ($file = readdir($handle))){
      if(preg_match($pattern, $file)){ //if this file is a valid image
        $files[] = $file;
      }
    }
    closedir($handle);
  }
  //sort($files);
  natcasesort($files);

  return($files);
}

$images = returnimages();
echo json_encode($images);

?>

how to fix it?

2

If you use a tool such as Firebug or Google Chrome’s developer tools what is the response you get back? Also on a side note instead of using eval() to parse the JSON array use the following.

$.ajax({
    dataType : 'json',
    type     : 'GET',
    url      : 'loadajax.php'
});

Instead of you manually needing to parse the response jQuery will do that for you so you have an array to work with straight away.

3

thanks for responding. i installed firebug and form the logs it appears that everything is alright but that instead of new data the broswer is reading the data from cache(or at least that’s what im guessing and i might be wrong)
here is a pic, if you need to look any other log please instruct to take a screen shot of that particular page

also about using eval() can you please show me what should be replaced with what?

4

Sorry for the delay, i was waiting for the attachment to be approved.

While the attachment does show the requests been sent I’m more interested in the response your getting back from the request, if at all possible could you please post the JSON response you get back as I would like to ensure the array matches up with your above code.