Jump to content

.load() com Scroll


tiko165
 Share

Recommended Posts

Estou a fazer uma função, em que uma div com scroll sempre que chega ao fundo, faz o load de uma página para mostrar mais resultados da base de dados.

Tenho um input hidden, com o ultimo ID que é exibido na tabela, para fazer sempre a devida leitura.

Em file1.php

...
if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight){ //accina no fim do scroll
 var idLast = $("#input_id").val(); //id do input
 $("#show_results_"+idLast).load("file2.php", {id_input:idLast}, function(data) { //Lê o file 2
	   document.getElementById("input_id").setAttribute('value',idInput); //Altera o ID do input
 });
}
...

<div id="show_results_<?=$reh['id'];?>" id="show_results"></div>
<input id="input_id" type="hidden" value="<?=$reh['id'];?>" />

- Em file2.php

Tenho todos os dados necessários que pretendo mostrar, mais isto.

<div id="show_results_<?=$reh['id'];?>"></div>
<script>
var idInput = <?=$reh['id'];?>
</script>

Isto está-me a funcionar, mas esta-me a criar Div's, dentro de Div's, dentro de Div's, até não haver mais resultados na BD.

Eu queria evitar criar resultados dentro das proprias Div's, e como tal, peço aqui ajuda. Obrigado

Edited by tiko165
collectioneuro300px.png
Link to comment
Share on other sites

Boas,

Uma implementação simples baseada em jQuery e CSS...

<div class="container" id="items">
<div>item1</div>
<div>item2</div>
<div id="more"></div>
</div>


var page = 1;

function loadMore(page) {
   $('#items #more').remove();
$.get('products.php', {page: page}, function (html) {
	$('#items').append(html); // Se houver mais páginas, deve devolver a div#more
});
}

// Verifica se a div#more está visivel
function checkMore() {
return $('#more:visible').length;
}

// Se o user fizer scroll
$(window).scroll(function () {
if (checkMore()) {
	loadMore(page++);
}
});

// Se já estiver visivel, carregar página
if (checkMore()) {
loadMore(page++);
}

Edited by taviroquai
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.