Javascript Only Load More with Ajax

Hi there,

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:

$.get(url, {limit: limit, offset: offset}, function(data) {

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.');
  }
}
}

Can someone help me out? Thanks in advance!

Just add the parameters to the URL.

https://www.google.com/search?client=safari&rls=en&q=how+to+add+parameters+to+a+javascript+get+request&ie=UTF-8&oe=UTF-8

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.

As I said above, you can add the params to the URL, which should be enough for this simple example:

jsonRequest.open("GET", url+"?limit="+limit+"&offset="+offset, true);   

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!

Check if the URLs are corrects, you can probably compare that with your jqeury example.

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:

Either I am going crazy and missing something very obvious or it just doesn’t work :slight_smile:

I just remembered what the problem is:

Thank you, texnixe !!!