Question

I am trying to refresh some elements on my page every so often. I know theres a million topics on here about that and I have tried to get mine working, but here is what I need to refresh..

This is the code that gets generated when the page loads:

<div id="galleria">

    <?php
    $a = array();
    $dir = '../public/wp-content/uploads/2012/01';
    if ($handle = opendir($dir)) {
      while (false !== ($file = readdir($handle))) {
        if (preg_match("/\.png$/", $file)) $a[] = $file;
        elseif (preg_match("/\.jpg$/", $file)) $a[] = $file;
        elseif (preg_match("/\.jpeg$/", $file)) $a[] = $file;
      }
      closedir($handle);
    }

    $totalImgs = count($a);
    $imgUsed = array();
    for ($j = 0; $j < 100; $j++)
    {
        do
        {
            $randIndex = mt_rand(0, $totalImgs);
        }
        while ($imgUsed[$randIndex] === TRUE);
        $imgUsed[$randIndex] = TRUE;
        echo "<img src='" . $dir . '/' . $a[$randIndex] . "' />";
    }

    ?>  

</div>

I would like to automatically refresh this every 10 seconds but not reload the page. I have read up on ajax and it seems this is possible but I cannot seem to get it to work.

All this is doing is showing the galleria div, and loading the 100 images inside the div. Then the galleria script takes over and displays it nicely. Will AJAX work better or JQuery?

Thank you for your help!

Answer 1

Use setInterval function with ajax call.

http://jquery-howto.blogspot.com/2009/04/ajax-update-content-every-x-seconds.html