Click here to Skip to main content
15,798,508 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi, I'm trying to auto update the html table that reads a json file
This json updates the information every 5 seconds so instead of refreshing the web, I want it to only update the table data, but I can't, I've been reading and testing for 3 days and I can't.

Can someone help me with this?

Here I leave the code that I am mandejando.


What I have tried:

<pre><html>
<head>
<title>DATOS</title>
<script type="text/javascript" src="inc/js/tablefilter_all_min.js"></script>
<link rel="stylesheet" type="test/css" href="css/filtergrid.css">

<head>
<body>
<table id="table" class=" TF"cellpadding="0" cellspacing="0" border="1">
<thead>
        <tr>
	    <th>ID</th>
            <th>VDN</th>
            <th>VDN</th>
	    <th>INPROGRESS-ATAGENT</th>
            <th>OLDESTCALL</th>
	    <th>AVG_ANSWER_SPEED</th>
	    <th>ABNCALLS</th>
	    <th>AVG_ABANDON_TIME</th>
	    <th>ACDCALLS</th>
	    <th>AVG_ACD_TALK_TIME</th>
	    <th>ACTIVECALLS</th>
        </tr>
    </thead>
<?php
$file = "report/vdn.json";
$json = json_decode(file_get_contents($file), true);

//var_dump($json);

foreach ($json as $row){
echo "<tr>";
//echo $row;
$parts = explode(',', $row);
foreach ($parts as $part){
    $aux = explode(':"', $part);
    $aux2 = $aux[1];
    $aux3 = str_replace('"','',$aux2);
    echo "<td><center>$aux3</center></td>";
}
echo "</tr>";
//var_dump($parts);
}
//echo "</table>";


?>
</table>
</body>
<script>
var table2_Props = {
    col_0: "select",
    col_1: "select",
    col_2: "select",
    col_3: "select",
    col_4: "select",
    col_5: "select",
    col_6: "select",
    col_7: "select",
    col_8: "select",
    col_9: "select",
    col_10: "select",

    display_all_text: " [ Mostrar Todo ] ",
    sort_select: true
};
var tf2 = setFilterGrid("table", table2_Props);
</script>
</html>
Posted
Comments
Member 15627495 12-May-23 2:23am    
to refresh only a part of your web page, you need Ajax resources.

- really make 2 files : 1 with your HTML ground, 1 another with the Php . those 2 web pages will communicate each other.

- to have an active Timer function, JS provide 'setInterval(,)' function.

- before a answer from your php : ensure the datas has changed, then send a bunch of datas. ( to avoid refreshing with same datas, that equal to 'sending nothing new, useless'

JS : setInterval
https://developer.mozilla.org/en-US/docs/Web/API/setInterval


- one code about Ajax and Php : make your own, let see :
https://www.w3schools.com/php/php_ajax_php.asp
Member 15992924 12-May-23 4:35am    
Thanks for answering, the information as it comes through TCP Socket and the parsing to json we do every 5 seconds that we receive the information through the TCP Socket.

I have created a bash with netcat to send data every 5 random seconds to see what changes that is not a problem

The only thing I don't know how to do what you're telling me about, I don't have much experience with Javascript and this part is getting complicated, if you can help me with this and tell me what example ajax code I could use?

thanks
Member 15627495 12-May-23 7:22am    
a tiny upgrade about your Php :
<?php

$json_content = json_decode(file_get_contents("report/vdn.json"), true); // the Path is a constant. no need to allocate a var for it.

$answer_output = "" ; // init one var, as 'empty String'.

foreach ($json_content as $row){
 
 $answer_output .= "<tr>" ; // .= is 'concatenating operator', to join 'Strings' together.
 
 $parts = explode(',', $row);
   
  foreach ($parts as $part){
  
    $aux = explode(':"', $part);
    

    $answer_output .= "<td><center>" . str_replace('"','',$aux[1]) . "</center></td>"; // concatenating again, to get all the "<td> .... </td>"

  }

 $answer_output .= "</tr>";

}

 echo $answer_output ; 
 // all rows are ready to display, and are store in the 'var $answer_output'.
 // using one simple 'echo' as answer for ajax call. echo when Ajax can be mutliple sure. but one single use of echo is more simple.

 unset($json_content) ; // equal to free() , the var is deleted. its content and values too.
 // 'unset()' clean the memory space occupied by the 'in-file values'. your server will thank you with this one. its' a good practice, remenber: unset($the_var);

?>


to add information about the 'echo' in Php : when you 'echo' something, it add the 'Datas' in the 'Php Output Buffer'.
this 'Php buffer' contains 'all datas' for the page to be send to the client.
Member 15992924 16-May-23 3:28am    
Thank you for your answer but I have tried this and it does not update the tables with the data, as I have commented, the .json files are deleted and created every 5 seconds that I receive the data through the TCP socket.

But still thanks for your contribution it helps me.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900