infinite scroll with msg when arriving at the end of the results

Question

infinite scroll with msg when arriving at the end of the results

Navigation

#1 by (1 votes)

0

I'm starting now in javascript and ajax so there's a lot that I still have doubts

I created an infinite scroll system but what I am not able to create is:

when you reach the end of the column or (there is nothing else to display)

You want ajax to include a php file where for example there will be a div footer with site data

I can show you a msg at the end but msg keeps repeating every time I try to open the window.

$(document).ready(function() {

var win = $ (window);

// Each time the user scrolls
win.scroll(function() {
    // End of the document reached?
    if ($(document).height() - win.height() == win.scrollTop()) {
        $('#loading').show();

        var id = $(".tm:last").attr("id");
        var cat = $(".tm").attr("cat");


        $.ajax({
            url: 'load2.php?id='+id+'&cat='+cat,
            dataType: 'html',
            success: function(html) {

                if(html){ 
                $('#posts').append(html);
                $('#loading').hide();
                }else{ 

                 ---- aqui que esta a treta !!! ----     
                $('#posts').append("<center><h1 style='color:red'>End of countries !!!!!!!</h1></center>");
                }

            }
        });



    }
});

});

php javascript ajax rolamento

asked by anonymous 11.11.2016 / 00:01

1 answer

Execute function without refresh and return function data Make the button visible in a certain time

score 1 · Accepted Answer

To not repeat the message you just have to check if you have already inserted the message before. Preferably before calling ajax, to save resources.

$(document).ready(function() {
var win = $(window);

// Each time the user scrolls
win.scroll(function() {
    // End of the document reached?
    if ($(document).height() - win.height() == win.scrollTop()) {
        $('#loading').show();

        var id = $(".tm:last").attr("id");
        var cat = $(".tm").attr("cat");

        // Se já temos uma div com a classe "fim", nem chama o ajax de novo
        if ( $('.fim').length > 0 ) {
           $('#loading').hide();
           return false; 
        }

        $.ajax({
            url: 'load2.php?id='+id+'&cat='+cat,
            dataType: 'html',
            success: function(html) {

                if(html){ 
                $('#posts').append(html);
                $('#loading').hide();
                }else{ 

                 // coloque uma classe "fim" na mensagem     
                $('#posts').append("<div class='fim'><h1 style='color:red'>End of countries !!!!!!!</h1></div>");
                }

            }
        });



    }
});