Updating html table AJAX PHP

Question

I have an HTML table which I want to update every 1 second on page. It have few div and classes within. So I tried AJAX to update it every 1 second. HTML is this:-

  <div class="abcd">
<div style='float: left;'>
<br><br>
<p style="padding-left:16px; font-size: 20px;">Amount(<?php echo $market; ?>) | Price(<?php echo $bm; ?>) &nbsp | Total(<?php echo $bm; ?>)</p>
<div class="panel-hello scrollbar" id="style-11">
    <div class="data-table">
        <table class="table table-hello table-bordered table-hover force-overflow" id="btcaddresses">
            <tbody style="border: 1px solid green; height: 300px; overflow-y: scroll;">

            </tbody>
        </table>
    </div>
</div>
</div>

And AJAX script:-

  function loadXMLDoc()
  {
   var xmlhttp;
  if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
  else
    {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
  document.getElementsById("btcaddresses").innerHTML=xmlhttp.responseText; // your div
   }
   }
xmlhttp.open("GET","getdatabase.php",true); //your php file
xmlhttp.send();
 }
 window.setInterval(function(){
   loadXMLDoc();
 }, 1000);

And getdabase.php contains:-

 <?php
 require('../setup.php');
 $seql = "select price, sum(total), sum(aleft) from trade where status = 'active' and bm = 'USD' and m = 'BTC' and type = 'sell' group by price";
     $query100 = mysqli_query($conn, $seql);

while ($row = mysqli_fetch_array($query100))
    {
        echo '<tr style="cursor: pointer; font-size: 15px;">
                <td>'.number_format($row['sum(aleft)'], 8).'</td>
                <td>'.number_format($row['price'], 8).'</td>
                <td>'.number_format($row['sum(total)'], 8).'</td>
            </tr>';
    }
 mysqli_close($conn);
 ?>

Problem is , it is not working and even if does it's not having any table classes specified in class.

Instead of echoing your table, try to pass the data back to your html page as json format, then using the Jquery .append(), and the JSON.parse(), to display the data on your page. — user9741470
– user9741470, Commented Sep 23, 2018 at 8:55
table classes specified in class - what is this? And not working how? — u_mulder
– u_mulder, Commented Sep 23, 2018 at 8:56
@u_mulder The table is specified in divs, divs have classes from outside source of css, they do not work... — JeffB
– JeffB, Commented Sep 23, 2018 at 9:04

Bernard Pagoaga · Accepted Answer · 2018-09-23 09:51:20Z

1

<?php
 require('../setup.php');
 $seql = "select price, sum(total), sum(aleft) from trade where status = 'active' and bm = 'USD' and m = 'BTC' and type = 'sell' group by price";
     $query100 = mysqli_query($conn, $seql);

$result = '';

while ($row = mysqli_fetch_array($query100))
    {
        $result .= '<tr style="cursor: pointer; font-size: 15px;">
                <td>'.number_format($row['sum(aleft)'], 8).'</td>
                <td>'.number_format($row['price'], 8).'</td>
                <td>'.number_format($row['sum(total)'], 8).'</td>
            </tr>';
    }
 mysqli_close($conn);

echo $result;
 ?>

This should work, but indeed you should return a json.

Edit : full html code working fine for me : (I had to remove some php parts)

<!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>

    <div class="abcd">
        <div style='float: left;'>
            <br>
            <br>
            <!-- <p style="padding-left:16px; font-size: 20px;">Amount(<?php echo $market; ?>) | Price(<?php echo $bm; ?>) &nbsp | Total(<?php echo $bm; ?>)</p> -->
            <div class="panel-hello scrollbar" id="style-11">
                <div class="data-table">
                    <table class="table table-hello table-bordered table-hover force-overflow" id="btcaddresses">
                        <tbody style="border: 1px solid green; height: 300px; overflow-y: scroll;">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            function loadXMLDoc() {
                var xmlhttp;
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("btcaddresses").innerHTML = xmlhttp.responseText; // your div
                    }
                }
                xmlhttp.open("GET", "getdatabase.php", true); //your php file
                xmlhttp.send();
            }
            window.setInterval(function () {
                loadXMLDoc();
            }, 1000);
        </script>
</body>

</html>

edited Sep 23, 2018 at 9:51

answered Sep 23, 2018 at 9:05

Bernard Pagoaga

1,4361 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

JeffB Over a year ago

Can you give the js part?

Bernard Pagoaga Over a year ago

I thought yours would be ok :D Can you paste the response from the ajax request ? (devtools -> network -> XHR)

Bernard Pagoaga Over a year ago

Ok first you have a problem in your JS: the function is getElementById (without "s"). Then you need to echo the result and not return it, I'll edit my answer. You can use the console in the devTools and the network panel for additional debugging informations.

JeffB Over a year ago

Failed to load resource: the server responded with a status of 404 () 2usdbtc.php:490 Uncaught TypeError: document.getElementsById is not a function at XMLHttpRequest.xmlhttp.onreadystatechange (usdbtc.php:490)

Bernard Pagoaga Over a year ago

use document.getElementById instead of documentgetElementsById. An Id is unique, therefore you can only get one element.

|

Collectives™ on Stack Overflow

Updating html table AJAX PHP

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related