48626

Put data from Postgresql database to table using Ajax and PhP

Question:

The goal of my task is to populate data from postgresql database every 5 seconds using ajax and php. I followed the example <a href="https://stackoverflow.com/questions/25047156/how-to-put-data-from-database-table-to-a-html-table-using-ajax-and-php/52296521?noredirect=1#comment91540919_52296521" rel="nofollow">How to put data from database table to a html table using ajax and php</a>. I am new in PhP so, I don't know why data is not populating. I did testing of the code and got data in console successfully but not in table. <strong>Client side code</strong>

<!DOCTYPE html> <html> <head> <style> <?php include './../css/hardwarestatus.css'; ?> </style> </head> <body> <div class="maindiv"> <div id="tagsDiv"> <h3>Estat Tags</h3> <?php echo '<table id="tags_table">'; echo "<tr>"; echo '<th>' . "TAG" . '</th>'; echo '<th>' . "BATTERY" . '</th>'; echo '<th>' . " Time " . '</th>'; echo '<th>' . "Status" . '</th>'; echo "</tr>"; echo '</table>'; ?> </div> </div> <script src='http://code.jquery.com/jquery-3.1.1.min.js'></script> <script> $(document).ready(function(){ UpdateHTMLTable(); setInterval(function() { UpdateHTMLTable(); }, 5000); // 5000 millisecond(5 second) function UpdateHTMLTable(){ var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); for (i = 0; i < myObj.length; i++) { console.log(myObj[i]); var row = $("<tr />"); $("<td />").text(myObj[i].mac).appendTo(row); $("<td />").text(myObj[i].battery).appendTo(row); $("<td />").text(myObj[i].ts).appendTo(row); $("<td />").text(myObj[i].ts).appendTo(row); row.appendTo('#tags_table'); } } }; xmlhttp.open("GET", "pages/estat_hardware_server.php", true); xmlhttp.send(); } }); </script> </body> </html>

<strong>On server side, my code is</strong>

<?php header("Content-Type: application/json; charset=UTF-8"); $host = ip of the host"; $port ="port no."; $user = "user"; $pass = "123"; $db = "db_name"; $con = pg_connect("host=$host dbname=$db user=$user password=$pass") or die ("Could not connect to server\n"); $query = "Query string"; $result = pg_query($con, $query) or die("Cannot execute query: $query\n"); if(pg_num_rows($result)) { $data=array(); while($row=pg_fetch_array($result)) { $data[] = array( 'mac'=>$row['mac'], 'ts' =>$row['ts'], 'battery'=>$row['battery'] ); } echo json_encode($data); pg_free_result($result); pg_close($con); } ?>

Answer1:

I didn't tested this one but the approach is :

<ol><li>Generate the table from the php with id on each td element representing the identifier in database</li> <li>On line set data attribute to identify which line has changed</li> <li>When you get update data from your webservice you compare it to your jquery data elements</li> </ol>

Something like that

$(document).ready(function(){ const tableEl = $('#tags_table'); UpdateHTMLTable(); setInterval(function() { UpdateHTMLTable(); }, 5000); // 5000 millisecond(5 second) // An object returned by php reprensenting your data const rowHasChanged = function(obj) { const lineObj = $('tr#' + obj.id); if !(lineObj) { return false; } // Do your logic here if (lineObj.data('status') !== obj.status) { return true; } return false; }; function UpdateHTMLTable(){ const xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { const data = JSON.parse(this.responseText); for (i = 0; i < data.length; i++) { const myObj = data[i]; if(rowHasChanged(myObj)) { // Do your stuff to colorize the line, or something to alert } } } }; xmlhttp.open("GET", "pages/estat_hardware_server.php", true); xmlhttp.send(); } });

Don't forget to add all the related data and identifier to be able to compare with your webservice update

echo '<table id="tags_table">'; echo "<tr>"; echo '<th>' . "TAG" . '</th>'; echo '<th>' . "BATTERY" . '</th>'; echo '<th>' . " Time " . '</th>'; echo '<th>' . "Status" . '</th>'; echo "</tr>"; echo '</table>';

Recommend

  • finding maximum depth of chapter
  • C++ how to handle tr1 and non-tr1 namespaces in portable code?
  • Correctly Importing Apache Commons Math Package
  • How to know which Linq statement produced the SQL on hand during runtime?
  • Vuejs: Lifecycle hooks of child routerview components using keep alive
  • IE6 changes DOCTYPE to a bad one
  • What command do i need to pass in SabreCommandLLSRQ to get current price of PNR?
  • JSON encode and decode on PHP
  • NHibernate manually control fetching
  • Git describe fails to return most recent annotated tag
  • Eliminate partial duplicate rows from result set
  • D3 get axis values on zoom event
  • NSScanner Loop Question
  • Button click event not firing in jQuery
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • htaccess add www if not subdomain, if subdomain remove www
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • Custom validator control occupying space even though display set to dynamic
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Ajax Loaded meta Tags
  • Get one-time binding to work for ng-if
  • req.body is undefined - nodejs
  • Volley JsonObjectRequest send headers in GET Request
  • Accessing IRQ description array within a module and displaying action names
  • Modifying destination and filename of gulp-svg-sprite
  • Change an a tag attribute in JavaScript based on screen width
  • Importing jscolor library in angular 2
  • jQuery tmpl and DataLink beta
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • How to disable jQuery.jplayer autoplay?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • apache spark aggregate function using min value
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?