autoupdate tabela ajax/json

[celsomtrindade 2]

Opa pessoal, tudo certo?

 

Seguinte, estou com problema para criar uma tabela que tenha atualização automática confome mais dados forem adicionados ao banco de dados. O meu objetivo é o seguinte:

 

Tenho uma tabela que exibe os pedidos na área administrativa. Gostaria que essa tabela atualizasse dinamicamente assim que um novo pedido fosse adicionado, inserindo o novo registro no topo da tabela, sem que o administrador precisasse atualizar a página para ver que um novo pedido foi feito.

 

Estou fazendo o load desta tabela através do jquery/ajax pegando os dados de um arquivo json.

O JSON está sendo escrito com PHP. Nesta parte não tem problema, já verifiquei e o json sempre é atualizado quando um novo pedido entra, sem precisar de nenhuma interação do usuário.

 

Aqui estão os códigos que estou utilizando:

 

Jquery=

$(document).ready(function() {
	var url = "data/results.json";
	$.getJSON(url, function (response){
		var write;
		$.each (response, function (index, table) {
			write += '<tr><td>' + table.name + '</td><td>' + table.data + '</td>';
			if (table.status === true) {
				write += '<td class="ap">Aprovado</td>'; 
			} else {
				write += '<td class="ng">Negado</td>';
			}
			write += '<td>' + table.id + '</td><td><button class="bt_delete">Deletar</button></td></tr>';
		}); //end each
		$('#mytable').html(write);
	}); //end getJSON
});

JQUERY p/ auto refresh (não funciona)=

var $container = $("#mytable");
var refreshId = setInterval(function()
{
	$container;
	console.log("loaded");
}, 10000);

Ps.: o console mostra a função loaded, mas a tabela não atualiza

 

 

Além disso, como complemento, gostaria de criar um sistema de notificação, para caso o administrador não esteja na págna da tabela, uma notificação seria exibida alertando que tem uma nova movimentação. Semelhante ao sistema de notificação do facebook. Alguém tem algum material que eu possa dar uma olhada para executar essa função?

 

Obrigado!

[William Bruno 1501]

Então cara.. ali na linha:

$container;

você teria que chamar novamente o getJSON, entendeu ?

 

Sobre a notificação, dá uma pesquisada por Notification WebAPI

https://developer.mozilla.org/en/docs/Web/API/notification

[celsomtrindade 2]

Sim sim, consegui, porém ele reescreve a tabela toda e eu gostaria de algo mais dinâmico.

Ao invés de reescrever a tabela, apenas adicionar a nova linha com uma animação de slide, por exemplo.

 

Tentei com "append(write);" porém ele reescreve a tabela inteira após o período de atualização. Coloquei um if na função do intervalo para verificar o último registro no JSON e o último registro na página para que rode a função somente se for maior que o já existente na página. Mas mesmo assim ele reescreve a tabela inteira.

 

Esse é o código modificado:

 

 

$(document).ready(function() {
	var url = "data/results.json",
		write,
		lastLoaded,
		updateMyId;
	mywritetable();

	function mywritetable () {
		$.getJSON(url, function (response){
			$.each (response, function (index, table) {
				write += '<tr><td>' + table.name + '</td><td>' + table.data + '</td><td>' + table.id + '</td><td><button class="bt_delete">Deletar</button></td></tr>';
				lastLoaded = table.id;
				updateMyId = table.id;
			}); //end each
			$('#mytable').html(write).slideDown(500);
		}); //end getJSON
	};

	function updateId () {
		$.getJSON(url, function (response){
			$.each (response, function (index, table) {
				updateMyId = table.id;
			}); //end each
		}); //end getJSON
	};

	var refreshId = setInterval(function() {
		if (lastLoaded == updateMyId) {
			updateId();
		} else {
			mywritetable();
		}
	}, 10000);
});

 

 

 

Em breve dou uma olhada nas notificações! =D

[William Bruno 1501]

Para escrever "em cima", no caso seria prepend()

[celsomtrindade 2]

Sim, mas mesmo com essas opções, ele está reescrevendo todos os registros. Gostaria que apenas acrescentasse o novo registro.

[BlackMix 15]

tente usar um limit no select order by desc talvez der certo.

 

tipo voce escolhe as 10 ultimas ids assim não aparecera todos os registros

[William Bruno 1501]

Pq o teu server-side sempre devolve todos os registros, por isso sempre escreve todos.

 

Ou vc controla no front para saber quem já está no html, ou vc precisa de um backend "mais inteligente".

Vou tentar escrever uma forma melhor de fazer isso de noite.

[celsomtrindade 2]

OK. Se por agora você tiver algum material que eu possa dar uma olhada, também seria bom.

Sou novo nessa área e tenho alguns projetos que requerem uma boa área administrativa, então vai ser de grande utilidade.

 

Pretendo aprender mais a respeito.