Help! ! Html table auto update datas read json

Question

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 11-May-23 11:50am

Member 15992924

Add a Solution

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.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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