Getting my ajax to pull the correct page results for lazy loading.

[adandy]

I am trying to implement lazy loading into a project with pagination already set up.

If I was to go to my website and after the .com, type in "api_courselist.php?page=1" I would receive the first 20 results of my query. If I was to change that to page=2, it would retrieve the next 20 and so on.

My issue is I have no idea how to implement that into my java script/ajax file. I have it set up so that when the user scrolls to the bottom of the page, a div will make its self visible with the new page populated inside of it and IT will keep on pulling pages in till There is no more content.

jQuery(function ($) {

jQuery(document).ready(function() {

    var is_loaded = true;

    jQuery(window).scroll(function() {

        if(jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()) {



            jQuery('div#loadMore').show();

            if(is_loaded){

                is_loaded = false;

                jQuery.ajax({

                    url: "api_courselist.php?page=1",

                    success: function(html) {

                        is_loaded = true;

                        if(html){

                            jQuery("#infiscroll").append(html);

                            jQuery('div#loadMore').hide();

                        }else{

                            jQuery('div#loadMore').replaceWith("<center><h1   style='color:red'>End of Content !!!!!!!</h1></center>");

                        }

                    }

                });

            }

        }

    });


});

});

[adandy]

Howe can I increase the page=1 by one every time the use hits the bottom of the page

[Sean_Tublewicz]

Make a variable on page load and set value to 1. Each time a new page is pulled in increment the value by 1 and call the link with the variable... Or are you looking for actual code?