1

I have a HTML page JavaScript which send a GET request data to PHP file to return all datas saved in the database . PHP replies with a HTML-table - that works fine!

But: When if i click a button (which calls the same JavaScript function) to update my table in order to display the new data, i get the same result (and i have definitely new data on table).

If I call the PHP manually via the browser it'll show me the new results immediately and at this moment it is also working with JavaScript (but only once).

Here is a part of my code.

HTML/JS:

<button onclick="GetData()"></button>
<div id="test"></div>
<script>

    function GetData(){
        var xhttp = new XMLHttpRequest();
        document.getElementById("test").innerHTML = "";
        xhttp.onreadystatechange = function(){
            if (xhttp.readyState == 4 && xhttp.status == 200){
                document.getElementById("test").innerHTML = xhttp.responseText;

            }
        };

        xhttp.open("GET", "../GetData.php", true);

        xhttp.send();
        }

</script>

PHP:

    //DB details
    $dbHost     = 'localhost';
    $dbUsername = 'lalalala';
    $dbPassword = 'lalalalal';
    $dbName     = 'lalalala';

    //Create connection and select DB
    $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName) or die ("UUUUPS");


    $sql = "select name, beschreibung, image, video from data";



    $result = $db->query($sql);


   if ($result->num_rows > 0) {
$return = '<table class ="table table-hover"><thead><tr><th scope="col">Name</th><th scope="col">Beschreibung</th><th scope="col">Bilddatei</th><th scope="col">Video-Url</th></tr></thead><tbody>';
// output data of each row
while($row = $result->fetch_assoc()) {
    $return .= "<tr><td>".$row["name"]."</td><td>".$row["beschreibung"]."</td><td><img src=data:image/png;base64,".base64_encode($row["image"])."/></td><td>".$row["video"]."</tr>";
}
$return .= "</tbody></table>";
 $db->close();
 echo $return;
 } else {
 echo "0 results";
 }

Thank you for your help!

Neji Soltani
  • 1,522
  • 4
  • 22
  • 41
Jeper92
  • 21
  • 2
  • Have you tried setting "no cache" headers in the response? https://stackoverflow.com/questions/49547/how-to-control-web-page-caching-across-all-browsers#answer-2068407 – Dmitry Dec 20 '17 at 08:15

2 Answers2

1

It seems your browser is caching your result, that's why you see data. You can test it like this: 

var random = Math.floor(Math.random() * 100);
xhttp.open("GET", "../GetData.php?"+random, true);

If this helps, look into expire headers in your PHP script. Also, the way you're doing queries in quite outdated. It's a very PHP4 way. Have a look here: http://php.net/manual/en/book.mysqli.php

Robert
  • 1,899
  • 1
  • 17
  • 24
0

I guess you probably know this, but just in case. Have you had a look in your browsers inspector, when testing you html page? especially the network tab within that inspector. There you can see the actual response from the server and you can see if it is served from cache or fetched (you can even disable cache there), maybe this helps.

Kind regard, Mark

mzijdemans
  • 54
  • 5