infinite scroll with msg at the end of the results

Asked

Viewed 201 times

0

I am starting now in javascript and ajax so there is much I still have doubt

I created an infinite scroll system but what I’m not knowing to create is:

when you reach the end of the column or ( there is nothing left to show )

likes that ajax includes a php file where for example, a div footer with the site data

i can even show a msg at the end but msg keeps repeating every time I try to dry out the window more 

$(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 rolling

1 answer

1


To not repeat the message just check if you have entered 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>");
                }

            }
        });



    }
});

  • perfect friend , worked correctly !!!!!!!!!!!!!!!!!!!!!!!!!!

  • I thank you for having help me with this friend doubt , thank you very much

  • Ricardo , I should have lent myself better in the question , the solution you gave me and exactly what I had , but instead of showing the msg , the apende should include a php file with the footer html , I forgot to put this in doubt the above :/

  • @Jonnysj. has no way to insert a php file there, because when javascript runs the server work is already done. What you can do is return the content that would come in this php in the function there load.php which returns the Ajax answer. So instead of checking if html is empty you make a test to know what content it has. And if it is not posts you insert there in append() I could tell?

  • good was exactly what I did but it didn’t work

  • var Arq = '<div class="end"><H1 style="color:red">End of countries !!!!!!!! </H1><br><? php include_once "content/layout/footer.php"; ? ></div>'; $('#fot'). append(Arq); Alert(Arq);

  • i thought it would insert the html dodigo into the page , then when it inserted the code, then it would pull the php file with the footer code

  • will not work. When javascript runs the ajax response it is already too late to use any PHP function. Your options are to put the HTML code written inside the javascript or return this code along with the ajax response.

  • then my only solution would be to create the infinite scroll inside a div and when arriving at the end of the div , load more articles , so the footer will always be there right? and will not need to be loaded script above

  • http://answall.com/questions/165161/scroll-ligado-a-uma-div-no-html-com-javascrip created a new topic about this

Show 5 more comments

Browser other questions tagged php javascript ajax rolling

You are not signed in. Login or sign up in order to post.