jquery – Lazy loading of messages from the database

Question:

Hello everyone!

I noticed a problem that interferes with the convenience of the site.

There is a loading of additional messages (10 pieces each) in the div. If you go further (by the link) and then click back (in the browser), then the loaded messages previously disappear and are not displayed. They have to be reloaded. On many sites (with approximately the same system) it works without such a problem. Loading is done by scrolling. Most likely the problem is solved using caching, but these are just guesses.

The code:

javascript:

<script>
var thisPageNum = 1;
var thisWork = 1;

function getNextP() {
    if (thisWork == 1) {
        thisWork = 0;
        $.get("/load?page=" + thisPageNum <?
        if (isset($_GET['sorting'])) echo '&sorting='.$_GET['sorting']; ?> , function (data) {
            $("#LoadNew").html($("#LoadNew").html() + " " + data);
            thisPageNum = thisPageNum + 1;
            thisWork = 1;

            if (data == "") {
                thisWork = 0;
                $('#TheEnd').css('display', 'block');
            }
        });
    }
}
$(document).ready(function () {
    var scrH = $(window).height();
    var scrHP = $("#container").height();
    $(window).scroll(function () {
        var scro = $(this).scrollTop();
        var scrHP = $("#container").height();
        var scrH2 = 0;
        scrH2 = scrH + scro;
        var leftH = scrHP - scrH2;

        if (leftH < 300) {
            getNextP();
        }
    });
});
</script>

HTML. The first 10 messages are printed by foreach. After the php loop, there is a div to load new messages:

<div id="LoadNew"></div>
<div id="TheEnd"> Сообщений больше нет.</div>

Answer:

Use a hash. Those. on the buttons on the page, put, for example, an ID in which there is a page number, and in JS, by clicking, pull out this page number and set a hash. For example, you have paginal buttons with paginal class and ID pn-1, pn-2, etc .:

$('.paginal').click(function(e){
    var arrId = $(this).attr("id").split('-');
    var numPage = parseInt(arrId[1], 10); // Номер страницы, можно использовать для чего-то еще
    location.hash = "pn" + numPage; // Устанавливаем хеш
});