I am trying to implement a simple Load-more Button with Ajax in Javascript only (no jQuery). So far I’m following the old K2 “Load more” Tutorial and everything works great except I am not sure how to implement this line:
Right now the button loads more, but it’s loading the same items again and again because I can’t seem to figure out how to pass the limit and offset variables in the Json request…
Here is how my code looks:
var jsonRequest = new XMLHttpRequest();
var element= document.getElementById("projects");
var url=element.dataset.page+"/.json";
var limit = element.dataset.limit;
var offset = limit;
jsonRequest.open("GET", url, true);
jsonRequest.send();
jsonRequest.onreadystatechange = function() {
if (jsonRequest.readyState === 4) {
if (jsonRequest.status === 200) {
var jsoncontent = JSON.parse(jsonRequest.responseText);
element.innerHTML += jsoncontent.html;
} else {
console.log('There was a problem with the request.');
}
}
}
Well I already tried googling before posting here and obviously couldn’t figure it out. If anyone else can help I would be happy. I wouldn’t be bothering anyone here if there were an up-to date tutorial for this.
The tutorial will still work, I think, if you use jQuery. Since there are different ways to make an Ajax request (XMLHttpRequest, fetch() API, Axios, you name it), you will have to translate the basics to your preferred way of doing it.
Thank you, I thought there should be something else I’m overseeing… For some reason It stills shows repeatedly the first couple of items only. It works with jQuery though, so I suppose I have missed something somewhere else, but I’ll figure it out. Thanks a lot!
Well, I couldn’t get it to work in Javascript only.
With jQuery it works fine and as far as I can see I am making the same call with the same parameters, but in one case only the first couple of items get returned: