1
00:00:00,060 --> 00:00:02,640
Hey, let's get our next and previous buttons functioning.

2
00:00:02,670 --> 00:00:07,440
I'm also going to downplay the number of results that are being returned so we're not getting that many

3
00:00:07,440 --> 00:00:08,560
results within the page.

4
00:00:09,150 --> 00:00:15,330
So within our page, we saw that we get return back these tokens for next and previous and we can use

5
00:00:15,330 --> 00:00:18,420
these tokens within the USL, under the.

6
00:00:19,920 --> 00:00:26,190
Paige tokin equals to to set the page that YouTube is going to return back because there are a ton of

7
00:00:26,190 --> 00:00:30,200
different pages that obviously can be returned back for any given term.

8
00:00:30,570 --> 00:00:35,790
And the way that we can add this and where we can add this in so we can add that over here within this

9
00:00:35,790 --> 00:00:41,460
function, whenever before we're returning the data, we can have some conditions with that data and

10
00:00:41,460 --> 00:00:45,150
using data and checking to see if previous.

11
00:00:45,740 --> 00:00:47,070
I'm going to go back to here.

12
00:00:47,070 --> 00:00:50,250
We've got next page token and we don't have previous ones.

13
00:00:50,250 --> 00:00:52,530
So we've got next page token in this case.

14
00:00:52,980 --> 00:00:55,470
So checking to see if previous.

15
00:00:55,470 --> 00:00:59,430
And then there's also previous page token.

16
00:00:59,430 --> 00:01:02,770
I believe it's like that will double check that.

17
00:01:03,930 --> 00:01:08,460
So if there is a previous page token, then we're going to take the button.

18
00:01:09,480 --> 00:01:10,260
Previous.

19
00:01:11,470 --> 00:01:17,470
And we're going to add a value of tokin to that object and the value that's going to be added in is

20
00:01:17,470 --> 00:01:20,910
going to be whatever this previous page token is.

21
00:01:21,430 --> 00:01:28,100
And if it doesn't exist, take previous page token and we're going to just set that to false.

22
00:01:28,180 --> 00:01:29,220
So that doesn't exist.

23
00:01:29,230 --> 00:01:29,940
There's nothing there.

24
00:01:30,190 --> 00:01:31,040
So boolean value.

25
00:01:31,340 --> 00:01:37,990
Another thing, too, that we wanted to add in as well is what's our button previous and update its

26
00:01:37,990 --> 00:01:44,970
settings where we're going to actually set, attribute and attribute that we're going to set is disabled

27
00:01:44,970 --> 00:01:45,270
here.

28
00:01:45,550 --> 00:01:51,070
And in this case, because there is a previous page token, we're going to set that to false because

29
00:01:51,070 --> 00:01:52,320
we don't want it disabled.

30
00:01:52,720 --> 00:01:56,410
So this is actually going to be the opposite of what we set out to initially.

31
00:01:56,410 --> 00:01:59,380
True disables that false doesn't disable it.

32
00:01:59,590 --> 00:02:05,710
And down here, if there's no page token, then we want to set up to try and copy this and we're going

33
00:02:05,710 --> 00:02:08,770
to do the exact same thing for next as well.

34
00:02:09,130 --> 00:02:11,680
So checking to see if next page token exists.

35
00:02:11,950 --> 00:02:18,630
And if it does exist, then we're going to update all of these values or a token under button next.

36
00:02:18,640 --> 00:02:22,000
Otherwise we're sending it to false and we're also disabling it.

37
00:02:22,120 --> 00:02:26,250
So if it's doesn't exist, then it's just going to be set to false.

38
00:02:26,500 --> 00:02:30,250
And if it does exist, then we're going to set that data token there.

39
00:02:30,430 --> 00:02:36,790
And actually we can just take the disabled and set this to true or false.

40
00:02:36,820 --> 00:02:40,270
So this is another way to write this taking button next disabled.

41
00:02:40,570 --> 00:02:44,370
And also we're going to do the same thing here so we can set it to false.

42
00:02:45,340 --> 00:02:47,330
So we've added in that attribute already.

43
00:02:47,350 --> 00:02:49,440
And just do a quick update for this one as well.

44
00:02:49,450 --> 00:02:52,090
So disabled to force, disabled to.

45
00:02:52,220 --> 00:02:52,750
True.

46
00:02:52,750 --> 00:02:54,100
And I think we're ready to try that.

47
00:02:54,110 --> 00:02:57,870
So let's refresh, do a search and go down to our button.

48
00:02:57,880 --> 00:02:59,170
So next is enabled.

49
00:02:59,170 --> 00:03:00,430
So that's that button down there.

50
00:03:00,660 --> 00:03:01,380
Make it bigger.

51
00:03:01,660 --> 00:03:04,810
And I'm also going to change this to only return back for results.

52
00:03:04,810 --> 00:03:06,010
So search next.

53
00:03:06,160 --> 00:03:09,460
And there's our button next and we'll see what happens.

54
00:03:09,460 --> 00:03:14,280
Is that a set of values that's been returned back there and next again.

55
00:03:14,470 --> 00:03:18,730
So we are actually not not moving next because we need to add that in, of course.

56
00:03:19,090 --> 00:03:22,480
But we do get the data token whenever we're processing next.

57
00:03:22,600 --> 00:03:24,590
So you see that token is being presented there.

58
00:03:24,850 --> 00:03:26,180
So next that we need to do so.

59
00:03:26,180 --> 00:03:27,700
That's coming into the console here.

60
00:03:27,850 --> 00:03:32,890
We need to see if there is a token and then we're going to update that to the end of the string, to

61
00:03:32,890 --> 00:03:35,490
the end of the URL, to a number of different ways to do this.

62
00:03:36,010 --> 00:03:42,700
We can update the URL to be let that value possibly, and then check to see if there is a value there.

63
00:03:42,700 --> 00:03:47,830
And if there is, then we're going to take the Eurail and we're going to add to the URL.

64
00:03:47,860 --> 00:03:54,760
And what we want to add to the URL is that token and equal, that page token to be whatever the value

65
00:03:54,760 --> 00:03:57,650
here is of the event target token.

66
00:03:57,670 --> 00:04:03,010
Now when it goes to the URL, the page token is going to be in there if it's available and if it's been

67
00:04:03,010 --> 00:04:04,540
pressed from next or previous.

68
00:04:04,870 --> 00:04:10,780
So we can try that and press search and then now next is going to return back the next set of results.

69
00:04:11,050 --> 00:04:13,180
And we should also see that previous is available.

70
00:04:13,420 --> 00:04:16,420
So that previous brings us back to that first set of results.

71
00:04:16,690 --> 00:04:20,110
And of course, we might want to clear out the results if we want.

72
00:04:20,320 --> 00:04:25,540
So that's another option that we might want to do instead of having them constantly stuck on top of

73
00:04:25,540 --> 00:04:26,020
each other.

74
00:04:26,140 --> 00:04:31,060
Whenever we're outputting the results, we want to clear out that element that's outputting the results.

75
00:04:31,360 --> 00:04:37,420
So instead of having output, have some content, we can take output and we can set its inter HTML,

76
00:04:37,420 --> 00:04:40,090
the service, enter each table and just keep it blank.

77
00:04:40,390 --> 00:04:45,600
So now every time we search or if we hit next, it's going to move to the next and the previous.

78
00:04:45,790 --> 00:04:49,720
So go ahead and set that up and I'll do a quick run through of the code coming up.