AJAX Div Refresh with PHP

Question

AJAX Div Refresh with PHP

23k views Asked by JD Audi At 12 January 2012 at 18:24

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!

Original Q&A

There are 3 answers

Greg Pettit On 12 January 2012 at 18:35

"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.

Ivan Buttinoni On 12 January 2012 at 18:44

As I wrote here you can fill a div with a jQuery ajax call.

 <html>
    <head>
    <script type="text/javascript">
        function refresh_gallery(){
            $.ajax({
                type: "POST",
                    url: "generate_gallery.php",  // your PHP generating ONLY the inner DIV code
                    data:   "showimages=100",
                    success: function(html){
                        $("#output").html(html);
                    }
        });  
    }

    $(function() {
    refresh_gallery(); //first initialize

    setTimeout(refresh_gallery(),10000); // refresh every 10 secs

        });

    </script>
</head>
<body>
    <div id="output"></div>
</body>
</html>

**FURKAN ILGIN** · Accepted Answer · 2012-01-12 18:34:18

FURKAN ILGIN On 12 January 2012 at 18:34 BEST ANSWER

Use setInterval function with ajax call.

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

TechQA.

AJAX Div Refresh with PHP

There are 3 answers

Related Questions in AJAX

Related Questions in JQUERY

Related Questions in PARTIAL-PAGE-REFRESH

Popular Questions

Popular Tags

Trending Questions