CODEWITHSUNDEEP
javascriptphpmysqlajax
Prateek Pandey
Prateek Pandey

Reputation: 1087

Reload PHP page with data from mysql after interval

I have a php page which finds the active events from mysql and loops through the result and then print the details. It find the event name, event start time and total joined users, but the page's data only refreshes when the user reopen the page, what i want is only for the joined users column to update after some interval.

$result=fetchEventList();
if ($result->num_rows > 0) {

  while($row = $result->fetch_assoc()) {
  echo "<div class=\"row\">                                                                                                                                               
        <div class=\"td td1\">".$row["EventName"]."</div>                                                                                 
        <div class=\"td td2\">".$row["StartTime"]."</div>                                                                                                                                                                                                                                             
        <div class=\"td td3\">".$row["JoinedUsers"]."</div>";
}
}

I searched and found many answers using javascript and loading only a div, but its not working for me, i tried

<script type = \"text/javascript\">                                                                                                                                         
setInterval(\"my_function();\", 5000);                                                                                                                                      
function my_function(){                                                                                                                                                     
$('.td3').load(location.href + ' #time');                                                                                                                               
}

But its not working, can anyone nudge me in the direction to follow, also i dont' want to refresh the whole page again, just the joined users div for all the events

Upvotes: 0

Views: 1222

Answers (2)

Jason
Jason

Reputation: 556

You can't "reload" only a div. This is an example that would refresh the page for the user after 5 seconds:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    setTimeout(function() {
      location.reload();
    }, 5000);
  </script>
</body>
</html>

To update the contents on only the div (without a page refresh), you would need an AJAX call.

In JQuery, you would use the $.get() method and set the content with $(divElem).html(result).

Something like:

// Set interval will repeat at a specified time interval
// in this case, every 5 seconds
setInterval(function () {
  // Our AJAX call to get the updated PHP results
  $.get('yourPage.php', function(result) {
    // Put the results in the div
    $(yourDiv).html(result);
  });
}, 5000);

Upvotes: 1

semplon
semplon

Reputation: 156

this had to do with ajax and setInterval. first you load the data and display it at the div. execute javascript to call the ajax request to get the data based on iterval time.

and then display it into your div.

Upvotes: 0

Related Questions