Loading more on scroll based on ID from JSON array

Question

[
    {
        "conf_id": "3",
        "conf_msg": "I like confessing",
        "votesUp": "",
        "votesDown": "",
        "time": "02:31:22"
    },
    {
        "conf_id": "2",
        "conf_msg": "Am I only one jelaous of everyone around me?",
        "votesUp": "",
        "votesDown": "",
        "time": "02:31:12"
    },
    {
        "conf_id": "1",
        "conf_msg": "I confess I want this script to work best!",
        "votesUp": "",
        "votesDown": "",
        "time": "02:30:46"
    }
]

This is my JSON response. It is now order by ID DESC but i can set it to ASC no problem.

This is how I show my 'messages' currently

function jsonloader() {
    var ajax_url = "includes/get_confessions.php";

        $.get(ajax_url, function(data) {
            $.each(data, function(i, single) {
                    var confession = "<div id='confession' class='card confession' style='margin-bottom:10px;'>\n" + "<div class='card-block'>" + "<h6 class='card-subtitle mb-2 text-muted'>#" + single.conf_id + "</h6>\n" + "<p class='card-text'>" + single.conf_msg + "</p>\n" + "<a href='#' class='card-link' id='confession-timestamp'>" + single.time + "</a>\n" + "<div class='conf_votesUp' id='conf_votesUp'>" + single.votesUp + "</div>\n" + "<div class='conf_votesDown' id='conf_votesDown'>" + single.votesDown + "</div>" + "</div>" + "</div>";
                    $("#confessions").append(confession);

            });

        }).always(function() {
            window.loading = false;
        });

};

jsonloader();

I am trying to show only 5 'messages' from JSON array and then load more on scroll down, based on conf_id from JSON response.

I need some manual, guide or whatever how is this done, because I am new in jQuery and have no idea.

Mzhda Saeed · Accepted Answer · 2017-04-13 16:01:45Z

you need to:

save all conf_id in html input hidden field
send last conf_id value (by query string) with each request to the server application so it would reply based on your conf_id.

see your code became:

function jsonloader() {
    var conf_id = $(".conf_id:last").val();
    var ajax_url = "includes/get_confessions.php?conf_id=" + conf_id;

        $.get(ajax_url, function(data) {
            $.each(data, function(i, single) {
                    var confession = "<div id='confession' class='card confession' style='margin-bottom:10px;'>\n" + "<div class='card-block'>" + "<h6 class='card-subtitle mb-2 text-muted'>#" + single.conf_id + "</h6>\n" + "<p class='card-text'>" + single.conf_msg + "</p>\n" + "<a href='#' class='card-link' id='confession-timestamp'>" + single.time + "</a>\n" + "<div class='conf_votesUp' id='conf_votesUp'>" + single.votesUp + "</div>\n" + "<div class='conf_votesDown' id='conf_votesDown'>" + single.votesDown + "</div>" + "</div>" + "<input type='hidden' class='conf_id' value='"+single.time +"' /> </div>";
                    $("#confessions").append(confession);

            });

        }).always(function() {
            window.loading = false;
        });

};

hope this help you

What mysql query exactly should return? where id >=$_GET['conf_id'] or <= Also where is scroll trigger? I am still not quite clear how to do this.
for sql use: where id <=$_GET['conf_id'] for scrol use this documentation: api.jquery.com/scroll

Collectives™ on Stack Overflow

Loading more on scroll based on ID from JSON array

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related