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.

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

Updating html table AJAX PHP

Question

1 answers

solution1
1 ACCPTED 2018-09-23 09:05:43

Updating html table AJAX PHP

Question

1 answers

solution1 1 ACCPTED 2018-09-23 09:05:43

solution1
1 ACCPTED 2018-09-23 09:05:43