Refresh table without refreshing page

Asked

Viewed 185 times

-2

Good night. I have the following table in my ORDER panel:

inserir a descrição da imagem aqui

I am trying to put a function to update only the Status every 5 seconds.

I’ve seen several examples on the Internet and I was able to make only two work. One of them is the one I’m wearing:

javascript

<script>
var tempo = window.setInterval(carrega, 5000);
function carrega()
{
$('#tabela-atualizar').load("pedidos/listar.php");
}

</script>


php

<td id="tabela-atualizar"><label class="'.$statuscolor.'">'.$status.'</label></td>

The code works perfectly, the problem is that when I update the page manually, the 5 second arrows are passed, the status is changed but the table is totally disfigured as the image below:

inserir a descrição da imagem aqui

I have no idea what may be going on and I would like your help in trying to solve this problem. Thank you very much.

php javascript ajax

1 answer

1

"Resolution"

You are trying to load the whole page into the #table-refresh

The url requests/list.php is the current page you are accessing, so load it will just print it again.

You’re technically doing this:

<script>
var tempo = window.setInterval(carrega, 5000);

function carrega() {
    location.reload();
}
</script>

The "Correct" would you create a page called requests/listingContent.php

And in it you put almost the same content of requests/list.php, but in it you will remove the tags html, head, body, leaving only the content of the listing

Example Before:

<!DOCTYPE html>
<html>
<head>
<title>Página de Exemplo</title>
</head>
<body>
<div class="recebeConteudo">
O conteúdo da Listar vem aqui
</div>
</body>
</html>

Example How it should look without tags in an html page.:

<div class="recebeConteudo">
O conteúdo da Listar vem aqui
</div>

And, to finish you would make the following modification to your script:

<script>
var tempo = window.setInterval(carrega, 5000);

function carrega() {
    $('.recebeConteudo').remove();
    $('body').load("pedidos/listarContent.php");

}
</script>

$('.receipts'). remove() will cause the order list to be deleted from the page

And $('body'). load("requests/listingContent.php"); will recreate the . receive

THIS IS DEFINITELY NOT THE RIGHT WAY TO DO THIS!

It would be better (for this solution) you feed the status with an Ajax being made to a page with the order id and returning the status in this ajax request and feeding the status of each order.

That’ll give you trouble...

From what I understand, apparently you’re trying to implement a delivery system or something like that.

Using setInterval will cause the page to load every 5 seconds, regardless of whether the order status has changed or not, and this can cause you major problems if this page is being viewed by many people or if in the future you are going to implement the same panel for more people, or even consume an api that displays the order status for the client.

This is because each request will have a machine consumption cost, it will make a SELECT in the database, and, well, it will be a problem if replicated on a large scale.

Recommend that studies what is Websocket, there is even a well completed library of the implementation of Websockets servers in PHP called "Ratchet" recommend that you take a look at it ;)

Link to the Ratchet

Browser other questions tagged php javascript ajax

You are not signed in. Login or sign up in order to post.