Question

I found this code for the infinite scroll pagination but there is one problem. I can pass a variable from this page going to democontent.php

Could anyone help me with this one? What I need to do is to pass an ID from this code to democontent.php I can’t figure out what I have been doing wrong.

<script type="text/javascript">

$(function(){   
    $('#content').scrollPagination({    
        'contentPage': 'democontent.php', // the page where you are searching for results
        'contentData': {}, // you can pass the children().size() to know where is the pagination
        'scrollTarget': $(window), // who gonna scroll? in this example, the full window
        'heightOffset': 10, // how many pixels before reaching end of the page would loading start? positives numbers only please
        'beforeLoad': function(){ // before load, some function, maybe display a preloader div
            $('#loading').fadeIn(); 
        },
        'afterLoad': function(elementsLoaded){ // after loading, some function to animate results and hide a preloader div
             $('#loading').fadeOut();
             var i = 0;
             $(elementsLoaded).fadeInWithDelay();
             if ($('#content').children().size() > 0){ // if more than 100 results loaded stop pagination (only for test)
                $('#nomoreresults').fadeIn();
                $('#content').stopScrollPagination();
             }
        }
    });

    // code for fade in element by element with delay
    $.fn.fadeInWithDelay = function(){
        var delay = 0;
        return this.each(function(){
            $(this).delay(delay).animate({opacity:1}, 200);
            delay += 100;
        });
    };

});
</script>

Answer 1

You’ve got it right there in your question:

'contentData': {}, // you can pass the children().size() to know where is the pagination

For example:

var id = 5;

$('#content').scrollPagination({  
    // other settings
    contentData: { id: id }
});

Then in your PHP:

$id = $_POST['id']; // = 5