Bring data like the facebook wall

Question

I am implementing a feature to bring data like the facebook post wall, apparently it is nothing very difficult, however, I have a question and I would like to know if someone has a solution or suggestion for this my problem.

The code

$(document).scroll(function(){
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    pesquisar("","");
  }
});

In the code above, I have a function that does an ajax execution to return certain data, however, I would like to update the page with new data and not repeating them which is what happens to me at the moment. I tested the find('div') function. remove() to have a supposed "update" of data, however, this is horrible, the user loses the reference of where the scroll is and ends up going back to the beginning. Someone would have a better suggestion to add the information without repeating the already added content?

Answer 1

Try using the Appendto('#element') or isertAfter("#element") function, both will keep the current content and add the new content at the end of the element passed as parameter.

Would look like this:

//insere os dados dentro do container, no final.
$(dadosVindosDoAjax).appendTo("#containerDePosts");

or:

//este insere os dados depois da ultima postagem
$(dadosVindosDoAjax).insertAfter($("#containerDePosts").find("#postagens").last());