AJAX Div Refresh with PHP

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

"Will AJAX work better or jQuery?" -- AJAX is a technique, jQuery is a library. As it turns out, jQuery has an excellent API for AJAX.

Let's call this bit of PHP "galleria.php". On original page load, it is inserted into the parent PHP page using good ol' <?php include('galleria.php')?>. Now the end user is seeing the full initialized page.

To update it, you have a number of AJAX options available, but the easiest is to include jQuery on your page and then you can use .load() in a script:

var updateGallery = setInterval(function() {
  $('#someDiv').load('galleria.php');
}, 10000);

There's room for tweaking... maybe galleria.php doesn't include the <div id="galleria">, which is set on the page. In which case you would load right into #galleria instead of #someDiv and save yourself an unnecessary container. Maybe you cache the $('#someDiv') object by declaring it in a different scope so that it can be re-used. But this is the general gist.