Botão "carregar mais" com AJAX/JSON não funciona

celsomtrindade · Março 13, 2015

Boa tarde pessoas,

estou com uma dificuldade em um parte do meu site que estou fazendo, onde pretendo colocar uma opção de "carregar mais" para fazer o load de mais objetos na página, porém não está funcionando.

Eu até consegui um código quase 100% funcional (mais abaixo) porém com erros de duplicações. Neste que estou utilizando atualmente, eu estou fazendo a contagem total das arrays direto no JSON.

Este é o código que estou utilizando atualmente:

$(document).ready(function() {
	function loopTable(test, index, table){
		var write;
		if(test){
			write += '<tr class="count">';
			write += '<td>' + table.name + '</td>';
			write += '<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>';
			write += '<td><button class="bt_delete">Deletar</button></td>';
			write += '</tr>';
				$('#mytable').append(write);
		}
	}; //end function

	var url = "data/results.json";
	var galleryLength;
	var jsonLength;

	$.ajax(url, {
		success: function(data){
			if(data){
				var jsonLength = data.length; 
			}
		}
	}); //end ajax
		
	$.getJSON(url, function (response){
		$.each (response, function (index, table) {
			loopTable(index <= 0, index, table);
		}); //end each
	}); //end getJSON

	var galleryLength = $('.count').length;

	$('.more').on('click', function(event){
		event.preventDefault();
		$.ajax(url, {
			success: function(data){
				$.each(data, function(index, table){
					loopTable(jsonLength >= galleryLength && jsonLength > galleryLength + 1, index, table);
				});
			},
			error:  function(){
				$('.more').append('<h3>Desculpe, houve um problema.</h3>');
			},
			beforeSend: function(){
				$('.more').hide();
				$('.spinner').fadeIn();
			},
			complete: function(){
				$('.spinner').hide();
				$('.more').fadeIn();
			}
		}); //end ajax
	}); //end click
}); //end ready

Teve um outro código que utilizei que estava funcionando, porém, ele duplicava alguns dos itens na hora de exibir na página, o que ficou inviável. Neste caso, eu estava usando uma propriedade ID, que é o código único do DB, para ordenar os objetos. Porém me dava uma contagem não sequencial, pois se eu apagar um objeto no meio dessa lista, a contagem ficaria vazada. Ex: 1, 2, 3, 5, 6, 9, ...

Esse é o código que funciona, porém com repetição:

$(document).ready(function() {

	function loopTable(test, index, table){
		var write;
		if(test){

			write += '<tr class="count">';
			write += '<td>' + table.name + '</td>';
			write += '<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>';
			write += '<td><button class="bt_delete">Deletar</button></td>';
			write += '</tr>';

			$('#mytable').append(write);
		}
	}; //end function

	var url = "data/results.json";
	var galleryLength;
		
	$.getJSON(url, function (response){
		$.each (response, function (index, table) {
			loopTable(index <= 0, index, table);
		}); //end each
	}); //end getJSON

	var galleryLength = $('.count').length;

	$('.more').on('click', function(event){
		event.preventDefault();
		$.ajax(url, {
			success: function(data){
				$.each(data, function(index, table){
					loopTable(table.id >= galleryLength && table.id < galleryLength + 1, index, table);
				});
			},
			error:  function(){
				$('.more').append('<h3>Desculpe, houve um problema.</h3>');
			},
			beforeSend: function(){
				$('.more').hide();
				$('.spinner').fadeIn();
			},
			complete: function(){
				$('.spinner').hide();
				$('.more').fadeIn();
			}
		}); //end ajax
	}); //end click
}); //end ready

Aqui está meu HTML:

<button class="more">Carregar mais</button>

<table>
	<thead>
		<tr>
			<th>Nome</th>
			<th>Data</th>
			<th>Status</th>
			<th>ID</th>
			<th>Ação</th>
		</tr>
	</thead>
	<tbody id="mytable"></tbody>
</table>

E um modelo do meu JSON:

[
{"name":"Nome 01","data":"2015-01-01","id":"1"},
{"name":"Nome 02","data":"2015-01-01","id":"2"},
{"name":"Nome 04","data":"2015-01-01","id":"4"},
{"name":"Nome 05","data":"2015-03-11","id":"5"},
{"name":"teste 1","data":"2015-03-11","id":"6"},
{"name":"teste 2","data":"2015-03-12","id":"7"},
{"name":"teste cadastro","data":"2015-03-13","id":"8"},
{"name":"Teste cad","data":"2015-03-18","id":"10"},
]

Rafael Sirotheau · Março 16, 2015

Algumas dúvidas:

1- data/results.json sempre retorna a mesma coisa?

2- Se sim, porque requisitar o mesmo arquivo várias vezes? Eu não vejo nenhum parametro sendo passado que possa alterar o json, sendo assim, suponho que sempre retorna a mesma coisa.

Sendo este o caso (sempre retornar a mesma coisa), porque não requisita-lo apenas uma vez, e ir dando pop()/shift() conforme for sendo inserido?

Se não, acredito que uma solução simples é varrer o array novo removendo resultados que já estejam no array antigo. Um for mesmo resolve (ou $.each() já que estas utilizando jQuery)

Se esse results.json é atualizado constantemente (por isso varios requests a ele), não seria melhor então alterar seu backend para retorna um json de acordo com os parametros necessarios?

algo como

json.php?page=1&perPage=10

celsomtrindade · Março 16, 2015

Algumas dúvidas:

1- data/results.json sempre retorna a mesma coisa?

2- Se sim, porque requisitar o mesmo arquivo várias vezes? Eu não vejo nenhum parametro sendo passado que possa alterar o json, sendo assim, suponho que sempre retorna a mesma coisa.

Sendo este o caso (sempre retornar a mesma coisa), porque não requisita-lo apenas uma vez, e ir dando pop()/shift() conforme for sendo inserido?

Se não, acredito que uma solução simples é varrer o array novo removendo resultados que já estejam no array antigo. Um for mesmo resolve (ou $.each() já que estas utilizando jQuery)

Se esse results.json é atualizado constantemente (por isso varios requests a ele), não seria melhor então alterar seu backend para retorna um json de acordo com os parametros necessarios?

algo como
json.php?page=1&perPage=10

Eu consegui resolver o problema, no stackoverflow um rapaz me ajudou.

O JSON, por enquanto eu deixei para apenas reescrever sempre apenas para testar, mas vou utilizar as opções para atualizar ou reescrever dependendo da necessidade.

Na verdade fiz algumas outras modificações direto no código jquery e outro problema no JSON estava interferindo.

No json, ao invés de vir assim: "id" : 1 estava vindo assim: "id" : "1" o que estava dando alguns bugs de duplicar.

No jquery eu modifiquei algumas coisas, vou psotar abaixo as modificações:

$(document).ready(function() {
	var url = "data/results.json";
	var lastId = -1;

	$.getJSON(url, function (response){
		var carregados = 0;
		$.each (response, function (index, table) {
			loopTable(index, table);
			carregados ++;
			if (carregados == 2) return false;
		}); //end each
	}); //end getJSON

	function loopTable( index, table){
		var write;

		write += '<tr class="count">';
		write += '<td>' + table.name + '</td>';
		write += '<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>';
		write += '<td><button class="bt_delete">Deletar</button></td>';
		write += '</tr>';

		$('#mytable').append(write);
		lastId = table.id;
	}; //end function	

	$('.more').on('click', function(event){
		event.preventDefault();
		var lastLoaded = lastId;
		var carregados = 0;
		$.ajax(url, {
			success: function(data){
				var lastLoaded = lastId;
				$.each(data, function(index, table){
					if (table.id <= lastLoaded) return true;
					loopTable (index, table);
					carregados ++;
					if (carregados == 2) return false;
				});
			},
			error:  function(){
				$('#myerro').append('<h3>Desculpe, houve um problema.</h3>');
			},
			beforeSend: function(){
				$('.more').hide();
				$('.spinner').fadeIn();
			},
			complete: function(){
				$('.spinner').hide();
				$('.more').fadeIn();
			}
		}); //end ajax
	}); //end click
}); //end ready

Por fim, consegui resolver. Obrigado! =D

Aproveitando a oportunidade, tenho outra dúvida (não sei se é melhor que eu crie outro tópico, se algum adm achar necessário, me avise) mas eu gostaria de fazer com que essa tabela atualize dinamicamente assim que um novo registro for adicionado.

O JSON eu consigo atualizar, através do php, assim que um novo registro for cadastrado. Mas como eu faço para inserir o novo registro na tabela?

Entrar

Arquivado

Botão "carregar mais" com AJAX/JSON não funciona

Recommended Posts

celsomtrindade 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael Sirotheau 43

Compartilhar este post

Link para o post

Compartilhar em outros sites

celsomtrindade 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante