This lesson is going to be really important because this is where we're going to get the ability to
scroll and make another request and I'm going to call create a variable called Page Lawder more and
set this to true.
So this is going to give us the ability to load additional content.
And we don't want to make additional Ajax's requests that there's no more content to load.
So this is going to keep track of when we're able to load more content.
And as mentioned earlier from the pages value, we know that if there's additional content to load,
so we know that if pages next is null, then we've loaded all of the pages of content and there's nothing
additional to learn to load.
So if I was to load page 15 and if I refresh, I get the object back and I get pages.
So next 16, let's try a larger number and eventually we're going to get to where it says pages.
Next is going to be null.
So that's what we're actually looking for.
So we can actually start on any page that we want.
And I'm guessing there's probably around 20 pages or so.
So when we hit the 20 pages, we don't want any more scrolling action to happen.
And this is why we've set up the page order more to true, because by default, we want to try to load
at least one time.
And if there's nothing to load, then we're going to just stop the loading altogether.
And that means that we've loaded all the available content on the page that we need to use.
So going back into the window on a scroll event object, this is where we can check to see.
And also, this will lockout's additional loads of the content.
So we're going to set it to false and we're going to check to see if it's true.
And that means that we can set our AJAX request and then immediately we're going to set that to false
so that we don't have multiple requests, AJAX requests.
And so this can also be something that can be problematic, because if you load multiple Ajax requests,
you might skip pages and you might be missing some of the content.
So let's create a function, add new posts so this will run whatever.
We're at the bottom of the page whenever the scrolling is ready.
I'm also going to block out the console messages because we don't need those anymore as we've already
gone through those values and what they mean.
Let's set up that function that we're calling to that new post function.
And so this is going to actually control what the value of the page is.
And we are starting with page one.
So that means that we're loading content there in the courses.
And every time we add new posts or whatever we're calling this function, we want to update the value
that's contained within the page so that we can actually move to the following page.
And that was under the object val and page.
So we're going to just increment it by one.
So that will allow us to move to the new page, because whenever we're calling the Eurail, we're updating
the page value.
And that's the way that's API works, is that we can update page values and call the next page and then
we're calling to get courses.
And I'm going to also update this one to be first load as this is just going to be the first request.
So it's going to get the course value and also want to clear out the contents of the container.
You don't have to do this, except I've got the hello world in there, so I'm just going to clear out
whatever is contained within there.
And then, of course, this, of course, is a function.
So let's save that.
And now we should have that content cleared out on the first run.
So let's do a refresh and it should actually be calling the first load function.
So just save that.
And so what it did is it cleared out that hello world or any content that might be sitting within the
content area and allowed us to load.
And then whenever we get to the bottom, we want to be calling the next set of content and loading and
once again at the bottom and call more content.
So make another Ajax request.
So we need to be able to handle that.
And the reason it's not loading anything else is because the page load more is still false.
So that means that we need to set it true.
And this is where we can do the check whenever we're adding the posts within that function.
This is where we can check to see if the page is if there's more pages of content.
So we've got that within the get posts function and I'll move this one up.
So it's closer to here where we're using the value added.
So we'll do a quick check to see if and going into the data.
We've got JSON data pages and the pages object has indexed.
So it's Jason data pages.
Next is not.
Or to null, then we know that we can load more content, and so that means that we'll update the Lord
more to be true.
So that allows us to load more content.
And that means that when we get to the end, then we're not going to load any more additional content
and we'll console log out the page object so clear and let's scroll down.
And whenever we get the bottom, we're going to load more content and the page object is back to true.
So that means that we can load more content once again and there's more content loading, more content
loading.
And it does take a while to load.
So we should have something in there that indicates that the loading is taking place.
I'll update the page value to 17 and we'll try to load some content at this part.
And what's happening now is that we're not loading any more content because the page object is going
to stay at false because there's no more content to load.
So it does one time it stays at false and it doesn't load any additional content.
So that's exactly what we want to happen.
So we can set this back to page one.
And this is also depending on what your API is doing.
So you might have different ways of handling this.
So last thing we need to do to wrap this up, so everything looks like it's loading, it's a little
more content when we get to the bottom.
We need to have something that's indicating to the user that there's more content that's being loaded.
So we'll see right now, the way that it's working is it's loading the content.
So right now we're over here and it loads that content, but there's no indication to the user that
there's more content coming and that's being loaded.
So let's handle that where we're going to add a little indicator there at the bottom that's going to
say that there's more content coming.
And we can add that in over here to scroll down, to add more content and we can add that to the bottom
or we can create a new element and add that in the section and constantly update that.
So there's a number of ways to do that.
So let's take care of that coming up in the next lesson.