1
00:00:00,830 --> 00:00:05,210
This lesson is going to be really important because this is where we're going to get the ability to

2
00:00:05,210 --> 00:00:12,410
scroll and make another request and I'm going to call create a variable called Page Lawder more and

3
00:00:12,410 --> 00:00:13,860
set this to true.

4
00:00:14,120 --> 00:00:17,390
So this is going to give us the ability to load additional content.

5
00:00:17,570 --> 00:00:21,730
And we don't want to make additional Ajax's requests that there's no more content to load.

6
00:00:22,220 --> 00:00:25,760
So this is going to keep track of when we're able to load more content.

7
00:00:25,940 --> 00:00:31,850
And as mentioned earlier from the pages value, we know that if there's additional content to load,

8
00:00:32,060 --> 00:00:38,840
so we know that if pages next is null, then we've loaded all of the pages of content and there's nothing

9
00:00:38,840 --> 00:00:40,650
additional to learn to load.

10
00:00:40,940 --> 00:00:48,220
So if I was to load page 15 and if I refresh, I get the object back and I get pages.

11
00:00:48,710 --> 00:00:55,520
So next 16, let's try a larger number and eventually we're going to get to where it says pages.

12
00:00:55,730 --> 00:00:57,260
Next is going to be null.

13
00:00:57,440 --> 00:00:59,120
So that's what we're actually looking for.

14
00:00:59,130 --> 00:01:01,340
So we can actually start on any page that we want.

15
00:01:01,520 --> 00:01:05,180
And I'm guessing there's probably around 20 pages or so.

16
00:01:05,300 --> 00:01:09,950
So when we hit the 20 pages, we don't want any more scrolling action to happen.

17
00:01:10,100 --> 00:01:15,260
And this is why we've set up the page order more to true, because by default, we want to try to load

18
00:01:15,260 --> 00:01:16,190
at least one time.

19
00:01:16,340 --> 00:01:20,900
And if there's nothing to load, then we're going to just stop the loading altogether.

20
00:01:21,050 --> 00:01:25,700
And that means that we've loaded all the available content on the page that we need to use.

21
00:01:26,030 --> 00:01:32,660
So going back into the window on a scroll event object, this is where we can check to see.

22
00:01:32,810 --> 00:01:38,230
And also, this will lockout's additional loads of the content.

23
00:01:38,450 --> 00:01:43,040
So we're going to set it to false and we're going to check to see if it's true.

24
00:01:43,160 --> 00:01:49,460
And that means that we can set our AJAX request and then immediately we're going to set that to false

25
00:01:49,670 --> 00:01:53,750
so that we don't have multiple requests, AJAX requests.

26
00:01:53,960 --> 00:01:59,390
And so this can also be something that can be problematic, because if you load multiple Ajax requests,

27
00:01:59,570 --> 00:02:02,680
you might skip pages and you might be missing some of the content.

28
00:02:03,110 --> 00:02:09,500
So let's create a function, add new posts so this will run whatever.

29
00:02:09,500 --> 00:02:13,230
We're at the bottom of the page whenever the scrolling is ready.

30
00:02:13,400 --> 00:02:20,360
I'm also going to block out the console messages because we don't need those anymore as we've already

31
00:02:20,540 --> 00:02:22,480
gone through those values and what they mean.

32
00:02:22,880 --> 00:02:28,140
Let's set up that function that we're calling to that new post function.

33
00:02:28,340 --> 00:02:33,050
And so this is going to actually control what the value of the page is.

34
00:02:33,320 --> 00:02:35,870
And we are starting with page one.

35
00:02:36,150 --> 00:02:41,270
So that means that we're loading content there in the courses.

36
00:02:41,510 --> 00:02:47,900
And every time we add new posts or whatever we're calling this function, we want to update the value

37
00:02:48,140 --> 00:02:52,580
that's contained within the page so that we can actually move to the following page.

38
00:02:52,800 --> 00:02:56,320
And that was under the object val and page.

39
00:02:56,600 --> 00:02:58,550
So we're going to just increment it by one.

40
00:02:58,850 --> 00:03:05,150
So that will allow us to move to the new page, because whenever we're calling the Eurail, we're updating

41
00:03:05,150 --> 00:03:05,930
the page value.

42
00:03:05,930 --> 00:03:11,450
And that's the way that's API works, is that we can update page values and call the next page and then

43
00:03:11,450 --> 00:03:13,670
we're calling to get courses.

44
00:03:13,850 --> 00:03:21,310
And I'm going to also update this one to be first load as this is just going to be the first request.

45
00:03:21,620 --> 00:03:27,230
So it's going to get the course value and also want to clear out the contents of the container.

46
00:03:28,110 --> 00:03:33,350
You don't have to do this, except I've got the hello world in there, so I'm just going to clear out

47
00:03:33,350 --> 00:03:34,760
whatever is contained within there.

48
00:03:35,060 --> 00:03:37,140
And then, of course, this, of course, is a function.

49
00:03:37,280 --> 00:03:38,150
So let's save that.

50
00:03:38,420 --> 00:03:43,710
And now we should have that content cleared out on the first run.

51
00:03:43,760 --> 00:03:48,740
So let's do a refresh and it should actually be calling the first load function.

52
00:03:48,920 --> 00:03:49,840
So just save that.

53
00:03:50,120 --> 00:03:55,220
And so what it did is it cleared out that hello world or any content that might be sitting within the

54
00:03:55,220 --> 00:03:58,100
content area and allowed us to load.

55
00:03:58,370 --> 00:04:05,480
And then whenever we get to the bottom, we want to be calling the next set of content and loading and

56
00:04:05,480 --> 00:04:08,570
once again at the bottom and call more content.

57
00:04:08,870 --> 00:04:10,600
So make another Ajax request.

58
00:04:10,880 --> 00:04:12,500
So we need to be able to handle that.

59
00:04:12,510 --> 00:04:17,630
And the reason it's not loading anything else is because the page load more is still false.

60
00:04:17,900 --> 00:04:19,970
So that means that we need to set it true.

61
00:04:20,210 --> 00:04:25,440
And this is where we can do the check whenever we're adding the posts within that function.

62
00:04:25,760 --> 00:04:32,000
This is where we can check to see if the page is if there's more pages of content.

63
00:04:32,450 --> 00:04:36,770
So we've got that within the get posts function and I'll move this one up.

64
00:04:36,770 --> 00:04:41,720
So it's closer to here where we're using the value added.

65
00:04:41,720 --> 00:04:46,220
So we'll do a quick check to see if and going into the data.

66
00:04:46,370 --> 00:04:52,340
We've got JSON data pages and the pages object has indexed.

67
00:04:52,850 --> 00:04:57,440
So it's Jason data pages.

68
00:04:58,550 --> 00:05:00,110
Next is not.

69
00:05:00,360 --> 00:05:07,200
Or to null, then we know that we can load more content, and so that means that we'll update the Lord

70
00:05:07,200 --> 00:05:08,400
more to be true.

71
00:05:08,760 --> 00:05:10,740
So that allows us to load more content.

72
00:05:10,920 --> 00:05:15,810
And that means that when we get to the end, then we're not going to load any more additional content

73
00:05:16,320 --> 00:05:23,790
and we'll console log out the page object so clear and let's scroll down.

74
00:05:24,210 --> 00:05:30,340
And whenever we get the bottom, we're going to load more content and the page object is back to true.

75
00:05:30,690 --> 00:05:35,820
So that means that we can load more content once again and there's more content loading, more content

76
00:05:35,820 --> 00:05:36,270
loading.

77
00:05:36,480 --> 00:05:37,980
And it does take a while to load.

78
00:05:37,990 --> 00:05:42,330
So we should have something in there that indicates that the loading is taking place.

79
00:05:42,570 --> 00:05:48,770
I'll update the page value to 17 and we'll try to load some content at this part.

80
00:05:49,890 --> 00:05:57,810
And what's happening now is that we're not loading any more content because the page object is going

81
00:05:57,810 --> 00:06:00,410
to stay at false because there's no more content to load.

82
00:06:01,200 --> 00:06:05,490
So it does one time it stays at false and it doesn't load any additional content.

83
00:06:05,740 --> 00:06:07,410
So that's exactly what we want to happen.

84
00:06:07,590 --> 00:06:09,600
So we can set this back to page one.

85
00:06:09,810 --> 00:06:13,200
And this is also depending on what your API is doing.

86
00:06:13,200 --> 00:06:15,510
So you might have different ways of handling this.

87
00:06:16,440 --> 00:06:22,010
So last thing we need to do to wrap this up, so everything looks like it's loading, it's a little

88
00:06:22,020 --> 00:06:23,730
more content when we get to the bottom.

89
00:06:23,940 --> 00:06:28,170
We need to have something that's indicating to the user that there's more content that's being loaded.

90
00:06:28,740 --> 00:06:32,640
So we'll see right now, the way that it's working is it's loading the content.

91
00:06:32,820 --> 00:06:37,170
So right now we're over here and it loads that content, but there's no indication to the user that

92
00:06:37,170 --> 00:06:39,390
there's more content coming and that's being loaded.

93
00:06:39,690 --> 00:06:44,520
So let's handle that where we're going to add a little indicator there at the bottom that's going to

94
00:06:44,520 --> 00:06:46,980
say that there's more content coming.

95
00:06:47,130 --> 00:06:54,360
And we can add that in over here to scroll down, to add more content and we can add that to the bottom

96
00:06:54,570 --> 00:07:01,820
or we can create a new element and add that in the section and constantly update that.

97
00:07:01,830 --> 00:07:03,330
So there's a number of ways to do that.

98
00:07:03,870 --> 00:07:06,420
So let's take care of that coming up in the next lesson.