Loading more ID based scrolling from JSON array
[
{
"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. Now this is the order by ID DESC, but I can set it to ASC without issue.
This is how I am displaying 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'm trying to show only 5 "posts" from a JSON array and then load more by scrolling down based on conf_id
from the JSON response.
I need a tutorial, tutorial or how to do this because I'm new to jQuery and have no idea.
+3
source to share
1 answer
you need:
- keep all conf_id in hidden html input field
- send the last conf_id value (by query string) with each request to the server application so that it will respond based on your conf_id.
see your code has become:
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 helps you
+1
source to share