Updating div inside php file with another php page

Question

I am trying to load mysql data into a div in a php page. But I want this data to stay up-to-date and refreshed every 10 seconds or so.

I looked online and followed several tutorials but I don't know what I am doing wrong.

Below is the php script that gets the data from DB and displays in a table.

<?php
require "conn.php";

$query = "SELECT * FROM turns where attended = 0";
$waiting = $conn->query($query);
    if ($waiting->num_rows > 0) 
    {
            echo "<table width='80%'><tr>";
            echo "<th> Customer Number </th>";
            echo "<th> Waiting Since </th> </tr>";
            // output data of each row
            while($row = $waiting->fetch_assoc()) 
            {
            $client = $row["id"];
            $waitingSince = $row ["created_time"];
            echo "<tr><td align='center'>".$client."</td>";
            echo "<td align='center'>".$waitingSince."</td></tr>";
            }
    }


?>

I have been trying to load that file into another page div, but all I am getting is blank.

here is the other page attend.php:

<html>
<head>
<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function updateDiv()
{
    $("#result").load("fetchLine.php");
}

</script>
</head>
<body>
<div id="result" style="border:solid 2px red; width: 100%;">
</div>
</body>
</html>

I have been trying to load the content first before adding the interval refresh function. Both attend.php and fetchLine.php are in the same directory

Possible duplicate of [AJAX jQuery refresh div every 5 seconds](https://stackoverflow.com/questions/25446628/ajax-jquery-refresh-div-every-5-seconds) also [this](https://stackoverflow.com/questions/1350446/how-to-schedule-ajax-calls-every-n-seconds) and [this](https://stackoverflow.com/questions/3138756/calling-a-function-every-60-seconds) — Patrick Q, Sep 06 '17 at 17:38
Yes @Ice76. I tried adding called by ID, and did not work. I am new to jquery and ajax. — Sam, Sep 06 '17 at 19:49
Please refer to the link @PatrickQ posted. It displays a function to call the Javascript function to refresh the page with data. The PHP stays server side and has to be called. — Ice76, Sep 06 '17 at 21:57

score -1 · Answer 1 · answered Sep 06 '17 at 18:17

Your best bet to achieve this is setup an endpoint that acts like an API bit /getData?blahparam=2 -> on that page out put just JSON.

function getData()
{
//Do ajax call here
}

//Javascript Loop either a set time out or a recursive loop using set time out or an every 10secs get...

I would say use angularjs 1.6 - because its easy and not a heavy bit...but you can simply loop through the json in normal jquery or angularjs and have the data auto update or replace itself.

make endpoint that gives json
write recursive ajax grab of data that uses settimeout or setinterval javascript/jquery
update the div in question with a chunk of html or use angular to update the $scope variable.

Recommending to switch to a Framework and discard current work is not constructive. Or recursive ajax... — Ice76, Sep 06 '17 at 21:56
Thats what i said in the post...alot of ways to peel an onion...I said that in more detail...Except the framework idea...because sounds like they wanted a challenge or not an option. — Joe, Sep 07 '17 at 03:19

Updating div inside php file with another php page

1 Answers1