Problems in content on demand (infinite scroll)

Question

Problems in content on demand (infinite scroll)

Navigation

#1 by (4 votes)
#2 by (0 votes)

2

I'm trying to make the content increase by checking the user scroll down, but my code stopped here ..

<script>
$(document).ready(function() {
var limit = 5;
var offset = 0;
var altura = 1000;
$.post( "artes4.php", { limit: limit, offset: offset }, function( data2 ) {
  $( "#artes4" ).html( data2 );
});
});


$(document).ready(function() {
    $(document).scroll(function() {
      if ($(this).scrollTop() + $(this).height() >= altura) {

var limit = 5;
var offset = 0;
var altura = 1000;
var limit = limit + 15;
var offset = offset + 15;
var altura = altura + 1000;

$.post( "artes4.php", { limit: limit, offset: offset }, function( data ) {
  $( "#artes4" ).append( data );
});

        } // fim do if
    }); // fim scroll
});
</script>

PHP

$limit=$_POST['limit'];
$offset=$_POST['offset'];

$query = mysql_query("SELECT * FROM 'artes4' ORDER BY 'imagem' ASC LIMIT $limit OFFSET $offset") or die(mysql_error());
while ($row = mysql_fetch_array($query))

It shows the first results only when I discover it does not appear any more ...

the problem line is this:

if ($(this).scrollTop() + $(this).height() >= altura) {

PHP AND MYSQL ARE WORKING PERFECTLY ... it lists the first 5 results ...

php mysql jquery

asked by anonymous 06.09.2014 / 01:53

2 answers

0

After the response from @Papa Charlie I had an idea needed to work on my system:

<script>
var i = 0;
var b = 1;
var itens = 10;
$(window).scroll(function() {

    if( $(window).scrollTop() >= $(window).height() - screen.height )
    {
        i++;
        b++;
        if( i <= itens )
        {
        $.post( "artes4.php", { pagina: b, total: total }, function( data ) {
          $( ".artes4" ).append( data );
        });
        }
    }
});
</script>

Only give append when it arrives at the end of the scroll ...

JSFiddle

07.09.2014 / 01:03

Dealing with events in elements added later Make circle with text in center asp.net

score 4 · Accepted Answer

I did an example calculating the distance of the loader from the screen. When loader enters the screen, the content will be loaded. In the example I simulate a page with a height of 2000px to illustrate the input and output of the loader and the calculated values. You can view here at jsfiddle .

This template server for you to use the loader div as a reference. It is also possible to anticipate the space with $('#loader').offset().top - 50 , so the event will be executed 50px before the loader enters the screen. When you load loader, the content will already be loaded, without the user having to reach the end to load more.

I created another jsfiddle with a simple example, but closer to a infinite scroll , but only as an illustration of how to calculate the input of an element that serves to trigger the event. Tailor your need.

content page 1
content page 2 >

...

Loading next page

JSbase

$(window).scroll(function(){varscrollTop=$(window).scrollTop();varelementOffset=$('#loader').offset().top;vardistance=(elementOffset-scrollTop);if(distance<$(window).height()){//elemento'loader'entrounatela,horadecarregarmaisumapágina$.post('artes4.php',{...},function(data2){//adicionaoconteudonadivcontentmantendoaspáginasanteriores$("#content" ).append( data2 );
        });
    }
});

It is not a good idea to keep limit = 5 e offset = 0 as parameters for SQL.

Validating these 2 information

You can change and paginate with more records than defined.

I made an update on the jsfiddle and included page numbering as a class attribute - you can use otherwise, change the attribute, hidden field ... The first listing you assign 1 <div id="loader" class="1"> , which corresponds to page 1 of any listing. Later when doing the loader via ajax you assign +1 and have your loader with the reference to page 2, and so on.

JS Increasing Paging As HTML Attribute

$(window).scroll(function() {
    var scrollTop     = $(window).scrollTop();
    var elementOffset = $('#loader').offset().top;
    var distance      = (elementOffset - scrollTop);
    var i             = Number( $('#loader').attr('class') ) + 1; // atribui +1 ao loader

    if( distance < $(window).height() ){
        $('#content').append('<p>Página' + i + '</p>');
        $('#loader').attr( 'class' , i )

        // elemento 'loader' entrou na tela, hora de carregar mais uma página
        // 'i' é a representação da página requisitada
        $.post( 'artes4.php' , { pagina: i }, function( data2 ){
            // adiciona o conteudo na div content mantendo as páginas anteriores
            $( "#content" ).append( data2 );
        });
    }
});