1
00:00:02,150 --> 00:00:05,370
Now, what do we wanna update on the screen

2
00:00:05,370 --> 00:00:07,093
once we got back our data?

3
00:00:08,130 --> 00:00:09,640
Well, in the end, it would be great

4
00:00:09,640 --> 00:00:13,400
if we could replace this text and this button here

5
00:00:13,400 --> 00:00:16,163
with the actual comments that we fetched,

6
00:00:17,020 --> 00:00:19,623
I think that is what we would expect to happen.

7
00:00:20,950 --> 00:00:25,340
So therefore, we wanna go to the post detail EJS file

8
00:00:25,340 --> 00:00:27,910
and then to our comments section,

9
00:00:27,910 --> 00:00:30,900
and at the moment I'm using EJS here

10
00:00:30,900 --> 00:00:33,940
for showing comments if I got some.

11
00:00:33,940 --> 00:00:37,250
Now this works fine, as long as the server side

12
00:00:37,250 --> 00:00:40,780
renders this template and provides a comments key,

13
00:00:40,780 --> 00:00:42,950
but that's not what is going to happen

14
00:00:42,950 --> 00:00:47,630
if our client's site JavaScript code fetched some comments.

15
00:00:47,630 --> 00:00:49,440
Keep in mind that you learned

16
00:00:49,440 --> 00:00:53,560
that all the template markup, which we have here,

17
00:00:53,560 --> 00:00:56,550
like this for loop with these EJS text,

18
00:00:56,550 --> 00:01:00,490
is only rendered and evaluated on the server,

19
00:01:00,490 --> 00:01:02,193
when we render a template.

20
00:01:03,350 --> 00:01:08,350
The client's site finished HTML document, if you inspect it,

21
00:01:08,500 --> 00:01:13,070
does not have any EJS text, because the EJS template

22
00:01:13,070 --> 00:01:16,080
isn't parsed or changed in the browser.

23
00:01:16,080 --> 00:01:18,060
This all happens on the server,

24
00:01:18,060 --> 00:01:21,833
the browser receives the finished HTML page.

25
00:01:23,010 --> 00:01:27,870
So therefore, those EJS instructions here don't do anything

26
00:01:27,870 --> 00:01:31,100
with that dynamically fetched comments data,

27
00:01:31,100 --> 00:01:34,523
which we got through our client's site, JavaScript code.

28
00:01:36,050 --> 00:01:39,450
Instead, what we now wanna do, is we wanna manually

29
00:01:39,450 --> 00:01:43,170
replace the content of this comments section,

30
00:01:43,170 --> 00:01:47,490
so this placeholder text, the button and all of that

31
00:01:47,490 --> 00:01:50,820
with the concrete comments we fetched.

32
00:01:50,820 --> 00:01:55,820
And actually we can already get rid of all these EJS text

33
00:01:56,680 --> 00:01:59,130
and just keep the paragraph,

34
00:01:59,130 --> 00:02:02,070
which we show initially, and the button.

35
00:02:02,070 --> 00:02:06,430
And then I wanna replace the entire content of this section.

36
00:02:06,430 --> 00:02:08,690
So I wanna replace both the paragraph

37
00:02:08,690 --> 00:02:13,143
and the button with my comments if I got them.

38
00:02:14,640 --> 00:02:17,280
So therefore here in comments JS,

39
00:02:17,280 --> 00:02:19,580
we now wanna change the DOM,

40
00:02:19,580 --> 00:02:21,860
we wanna change what's visible on the screen

41
00:02:21,860 --> 00:02:23,723
once we got our response.

42
00:02:24,790 --> 00:02:27,350
For this we need to get access to this section

43
00:02:27,350 --> 00:02:30,680
and we can get access through this ID.

44
00:02:30,680 --> 00:02:33,220
So here, we can get our

45
00:02:33,220 --> 00:02:36,130
comments Section Element

46
00:02:36,130 --> 00:02:37,850
by using document.getelementById

47
00:02:38,880 --> 00:02:40,943
and passing in this comments ID.

48
00:02:43,470 --> 00:02:45,520
And then here, once we got a response,

49
00:02:45,520 --> 00:02:46,410
I wanna

50
00:02:47,300 --> 00:02:50,960
actually replace the content of comments Section Element

51
00:02:50,960 --> 00:02:53,840
with the fetched comments.

52
00:02:53,840 --> 00:02:56,510
Now to replace that content we first of all

53
00:02:56,510 --> 00:02:59,343
need to prepare our list of comments though.

54
00:03:00,240 --> 00:03:03,720
For this I'll add a new helper function, which I'll name,

55
00:03:03,720 --> 00:03:06,293
create Comments List.

56
00:03:07,580 --> 00:03:11,120
And in there, I'll create a new HTML element,

57
00:03:11,120 --> 00:03:14,530
in JavaScript, as we learned it earlier in the course,

58
00:03:14,530 --> 00:03:17,270
when we got started with the DOM and so on,

59
00:03:17,270 --> 00:03:20,550
and we can create a comment List Element here

60
00:03:20,550 --> 00:03:23,177
by using document.createElement

61
00:03:24,710 --> 00:03:26,190
in case that's brand new,

62
00:03:26,190 --> 00:03:30,570
definitely revisit those earlier DOM sections in this course

63
00:03:30,570 --> 00:03:34,410
where we got started with JavaScript and DOM.

64
00:03:34,410 --> 00:03:38,140
And we can create an ordered list element here

65
00:03:38,140 --> 00:03:40,223
or unordered, that's up to you.

66
00:03:42,530 --> 00:03:46,920
Then, I expect to get my comments

67
00:03:46,920 --> 00:03:49,560
as a parameter value here,

68
00:03:49,560 --> 00:03:52,260
so that in this utility helper function,

69
00:03:52,260 --> 00:03:55,330
I can loop through all the comments we got,

70
00:03:55,330 --> 00:03:59,000
so did we can create different comment list item elements

71
00:03:59,000 --> 00:04:00,653
for all the comments.

72
00:04:01,910 --> 00:04:06,910
So here we then got a comment Element, which actually is

73
00:04:07,160 --> 00:04:09,070
created with create Element,

74
00:04:09,070 --> 00:04:11,263
where we create a list item element.

75
00:04:12,560 --> 00:04:14,930
And for this comment Element here,

76
00:04:14,930 --> 00:04:18,269
I'll then set the inner HTML content

77
00:04:18,269 --> 00:04:20,970
to the content I have here

78
00:04:20,970 --> 00:04:24,653
in my included comment-item EJS file.

79
00:04:26,270 --> 00:04:28,680
So we can copy this HTML code

80
00:04:30,150 --> 00:04:32,620
and go back to comments JS,

81
00:04:32,620 --> 00:04:36,000
and then use the template feature here

82
00:04:36,000 --> 00:04:38,150
so that we can write a multiline string

83
00:04:38,150 --> 00:04:42,823
for better structuring, and copy in this HTML code here.

84
00:04:43,920 --> 00:04:47,460
And now we can not just use the template string feature here

85
00:04:47,460 --> 00:04:49,520
to be able to write a multiline string,

86
00:04:49,520 --> 00:04:51,730
which is simply easier to read,

87
00:04:51,730 --> 00:04:55,230
but we can now also inject concrete values here,

88
00:04:55,230 --> 00:04:57,050
just as I showed to you before,

89
00:04:57,050 --> 00:04:59,513
with dollar sign curly braces,

90
00:05:01,630 --> 00:05:04,053
this should be comment, this here.

91
00:05:05,410 --> 00:05:10,410
So we can inject the comment.title here,

92
00:05:10,530 --> 00:05:13,083
and here comment.text.

93
00:05:14,040 --> 00:05:15,660
So these two pieces of data,

94
00:05:15,660 --> 00:05:18,253
which we got in all these comment objects.

95
00:05:19,250 --> 00:05:22,040
You can see this in the browser, in the console,

96
00:05:22,040 --> 00:05:23,990
these comment objects which we fetched,

97
00:05:23,990 --> 00:05:25,713
have a text and a title.

98
00:05:27,650 --> 00:05:29,970
So that's what I'm accessing here.

99
00:05:29,970 --> 00:05:32,930
And then I'm creating this inner HTML content

100
00:05:32,930 --> 00:05:37,590
for all the comment Element list items that I created here.

101
00:05:37,590 --> 00:05:40,690
And then once this comment Element was created,

102
00:05:40,690 --> 00:05:45,250
I just go to my comment List Element that I added here,

103
00:05:45,250 --> 00:05:49,820
and I append this newly added comment list item.

104
00:05:49,820 --> 00:05:51,950
So I go to my comment List Element,

105
00:05:51,950 --> 00:05:55,350
and call append Child or append

106
00:05:55,350 --> 00:05:57,453
to append this comment Element.

107
00:05:58,930 --> 00:06:01,400
Again, these are standards DOM operations

108
00:06:01,400 --> 00:06:03,953
about which we learned early in the course already.

109
00:06:05,230 --> 00:06:08,000
So this will now go through a list of comments,

110
00:06:08,000 --> 00:06:09,730
create a comment List Element,

111
00:06:09,730 --> 00:06:11,450
and then the list item elements,

112
00:06:11,450 --> 00:06:13,830
with their own HTML content.

113
00:06:13,830 --> 00:06:17,037
And then we have such a finished populated,

114
00:06:17,037 --> 00:06:19,560
ordered list in the end.

115
00:06:19,560 --> 00:06:22,660
And I'll return that finished ordered list here,

116
00:06:22,660 --> 00:06:26,053
this comment List Element at the end of this function.

117
00:06:27,770 --> 00:06:30,713
So this is then the finished utility function here.

118
00:06:32,060 --> 00:06:34,463
Again, that's all on the browser side.

119
00:06:35,390 --> 00:06:38,170
And then here in fetch comments for post,

120
00:06:38,170 --> 00:06:43,170
I wanna call this, create Comments List function,

121
00:06:43,260 --> 00:06:47,900
and pass my response data as a parameter value to it

122
00:06:47,900 --> 00:06:52,740
because create Comments List did want a list of comments.

123
00:06:52,740 --> 00:06:56,853
And we know that response Data is such a list of comments.

124
00:06:58,360 --> 00:07:02,180
And therefore here we then got the comments List Element

125
00:07:02,180 --> 00:07:04,150
that was created.

126
00:07:04,150 --> 00:07:08,080
And we can now add this list Element

127
00:07:08,080 --> 00:07:11,160
into our comments Section Element

128
00:07:11,160 --> 00:07:13,420
and replace the current content

129
00:07:13,420 --> 00:07:15,763
of this comments Section Element with it.

130
00:07:19,260 --> 00:07:22,030
For it is we can go to the comment section element

131
00:07:22,030 --> 00:07:27,030
and simply set its inner HTML to an empty string

132
00:07:27,310 --> 00:07:30,880
to remove all the content that's currently in it

133
00:07:30,880 --> 00:07:34,440
before we then call append Child on it

134
00:07:34,440 --> 00:07:37,603
and append our prepared comments List Element.

135
00:07:38,550 --> 00:07:41,380
And there would be different ways of preparing

136
00:07:41,380 --> 00:07:44,670
and outputting these comments as a list as well,

137
00:07:44,670 --> 00:07:46,823
but this approach should also work.

138
00:07:48,420 --> 00:07:51,960
So therefore now, if you again, save all your files

139
00:07:51,960 --> 00:07:53,960
and you reload this page,

140
00:07:53,960 --> 00:07:57,443
if you now click load comments, they do appear here.

141
00:07:58,510 --> 00:08:03,020
And please note that unlike before, if I scroll down,

142
00:08:03,020 --> 00:08:05,320
my scrolling position is not lost

143
00:08:05,320 --> 00:08:07,710
because the page didn't reload.

144
00:08:07,710 --> 00:08:10,540
Because we did fetch that data behind the scenes,

145
00:08:10,540 --> 00:08:13,310
and we then update it to that currently loaded page

146
00:08:13,310 --> 00:08:16,331
with that data by manipulating the DOM

147
00:08:16,331 --> 00:08:19,913
after we got the response from this Ajax request.

148
00:08:21,520 --> 00:08:25,060
So that's working, we also got no errors in the console,

149
00:08:25,060 --> 00:08:28,180
so no error there, and hence we now

150
00:08:28,180 --> 00:08:31,350
already made another huge step forward.

151
00:08:31,350 --> 00:08:34,140
Now we're able to use this Ajax feature

152
00:08:34,140 --> 00:08:36,100
to fetch data behind the scenes

153
00:08:36,100 --> 00:08:39,299
and then update parts of the currently loaded page

154
00:08:39,299 --> 00:08:40,913
with that fetched data.