Question

I’m making a query that pulls a lot of data from a sql table. I’d like to implement an infinite scroll feature so that only 25 records or so are pulled at a time.

I’m having some trouble though.

This query gets called when a user scrolls down. jquery posts to php the last id of the last record that was put on the page;

//ie, this js pulls the id 
var last_order_number = $('.order_number_divs:last').attr('id');

//from this div
<div id="2476" class="order_number_divs">   1121310  </div>

I thought that if I selected two more results where the id was greater than the previous id on the page, I would definitely get the following two results. However, I get the same two results every time.

SELECT 
    id,
    order_number
    FROM sales_orders
    WHERE id > '$last_id'
    ORDER BY id ASC
    LIMIT 2

This is the jquery that runs the data through the template to populate the div. Since vkTemplate does not support appending, once it is done populating the div with the content, I remove the id of the just-populated div, and give the id to the div below it, so the next time there is a scroll, the content will go in that div.

$(window).scroll(function () {

    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {



        var last_order_number = $('.order_number_divs:last').attr('id');

        console.log(last_order_number);
        $.ajax({
            type: "POST",
            async: false,
            url: "queries/privileged_search_more_content.php",
            data: "user=" + "<?=$_COOKIE['username']?>" + "&last_order_number=" + last_order_number,
            dataType: "json",
            success: function (data) {
                console.log(data);

                $('#INT-order_information_container').vkTemplate("templates/get_orders_initial_template.tmpl?" + <?=time()?> , data, function () {

                $('#INT-order_information_container').removeAttr('id');
                $('#template_div_next').removeAttr('id')
                                       .attr('id', 'INT-order_information_container');

                });
                console.log($.active);
            }
        });

    }
    });

Have you any ideas why the same two records are being pulled over and over?

Thanks much!

Also this scroll function I found seems to get invoked on up and down. But that’s a different question. Just saying so you know that I’m aware of at least that much.

Answer 1

vkTemplate does support appending. Take a look at the vkTemplate home page

http://www.eslinstructor.net/vktemplate/

There is menu item “Append Technique“.

Another way to implement appending with vkTemplate is to customize this plugin. It’s simple: open code and find lines #94,102,117 https://github.com/vkiryukhin/vkTemplate/blob/master/vktemplate.js

$(elm).empty().append(. . .)

and remove empty() from this expression.

Hope this helps,

-Vadim