Question

I have an index.php file that I would like to run getdata.php every 5 seconds.

getdata.php returns multiple variables that need to be displayed in various places in index.php.

I’ve been trying to use the jQuery .load() function with no luck.
It’s refreshing the 12 <div> elements in various places on the index.php, but it’s not re-running the getdata.php file that should get the newest data.

But If I hit the browser refresh button, the data is refreshed.

getdata.php returns about 15 variables.

Here is some sample code:

<script>
    var refreshId = setInterval(function()
    {
         $('#Hidden_Data').load('GetData.php'); // Shouldn´t this return $variables
         $('#Show_Data_001').fadeOut("slow").fadeIn("slow");
         $('#Show_Data_002').fadeOut("slow").fadeIn("slow");
         $('#Show_Data_003').fadeOut("slow").fadeIn("slow");
         $('#...').fadeOut("slow").fadeIn("slow");
    }, 5000); // Data refreshed every 5 seconds
    */
</script>

Here’s an example of GetData.php:

$query = "SELECT column1, COUNT(column2) AS variable FROM table GROUP BY column";
$result = mysql_query($query) or die(mysql_error());

while($row = mysql_fetch_array($result)){
$column1 = $row['column1 '];
$variable = $row['variable '];

if($column1 == "Text1") { $variable1 = $variable; }
    elseif($column1 == "Text2") { $variable2 = $variable; }
              ... continues to variable 15 ...
}

Then further down the page the HTML elements display the data:

<div id="Hidden_Data"></div>
<div id="Show_Data_001"><?php echo $variable1; ?></div>
<div id="Show_Data_002"><?php echo $variable2; ?></div>
<div id="Show_Data_003"><?php echo $variable3; ?></div>
...

I tried using the data parameter as suggested here:
https://stackoverflow.com/a/8480059/498596

But I couldn’t fully understand how to load all the variables every 5 seconds and call them on the index page.

Today the GetData.php page just returns $variable1 = X; $variable2 = Y and so on.

UPDATE
For some reason the jQuery is not loading the GatData.php file and refreshing the variables.

I tried adding to “Hidden_Data” to the include('GetData.php') and then the variables are readable on the page.

If I remove this part, the page displays “variable not set” warning that suggesting that the jQuery is not loading the GetData.php script into the Hidden_Data <div>.

Answer 1

Try

 <script>
        var refreshId = setInterval(function()
        {
             $('#Hidden_Data').load('GetData.php', function() { // Shouldn´t this return $variables
                 $('#Show_Data_001').fadeOut("slow").fadeIn("slow");
                 $('#Show_Data_002').fadeOut("slow").fadeIn("slow");
                 $('#Show_Data_003').fadeOut("slow").fadeIn("slow");
                 $('#...').fadeOut("slow").fadeIn("slow"); });
        }, 5000); // Data refreshed every 5 seconds
        */
    </script>

Above is assuming, that your code returns snippet of HTML elements (Show_Data_XXX), but now that you’ve clarified your question above wont help you alone…

What you need to do is either in your php send back new value elements or send back your results as data and update existing elements.

Put your elements into a php Array and then send it back
data.php after sql call

$results = Array();
while($row = mysql_fetch_array($result)){
   $column1 = $row['column1 ']; // change Text1 in db to Show_Data_001 in html or vice versa
   $variable = $row['variable '];
   $results[$column1] = $variable;
}

echo json_encode($results);

in your javascript something like this…

$.getJSON('GetData.php',function(data) {
$.each(data, function(key, val) {
    $('#'+key).text(val);
  });
});

I didn’t put the fadeOut and fadeIn into the example, because it complicates it a bit. You could do fadeOut to all those elements before calling getJSON and the fadeIn as the results pouring in. Hope this helps