1
00:00:02,040 --> 00:00:04,500
So now we implemented this fetch

2
00:00:04,500 --> 00:00:06,353
comments functionality.

3
00:00:07,290 --> 00:00:11,670
Let's now see how we can continue with sending comments.

4
00:00:11,670 --> 00:00:12,503
By the way,

5
00:00:12,503 --> 00:00:14,750
I will later come back to fetching comments

6
00:00:14,750 --> 00:00:17,980
and also handle the case that we might not have any comments

7
00:00:17,980 --> 00:00:20,550
or that something went wrong on the server.

8
00:00:20,550 --> 00:00:21,383
But for the moment,

9
00:00:21,383 --> 00:00:23,403
let's move on to sending a comment first,

10
00:00:24,550 --> 00:00:27,210
because we can also do this with Ajax.

11
00:00:27,210 --> 00:00:28,043
Of course,

12
00:00:28,043 --> 00:00:31,430
it also works as it currently does with the traditional

13
00:00:31,430 --> 00:00:32,280
approach.

14
00:00:32,280 --> 00:00:37,160
But then whenever we add a new comment like this,

15
00:00:37,160 --> 00:00:39,350
we reload the entire page.

16
00:00:39,350 --> 00:00:43,000
All the loaded comments are gone and this is not really

17
00:00:43,000 --> 00:00:45,193
the way I want this to behave.

18
00:00:46,490 --> 00:00:49,773
So therefore we can also use Ajax for this.

19
00:00:50,700 --> 00:00:51,533
Now for that,

20
00:00:51,533 --> 00:00:54,500
let's go back to the post detail EJS file

21
00:00:54,500 --> 00:00:57,400
and have a look at what we got there.

22
00:00:57,400 --> 00:01:01,060
Here, we got a form with the inputs and then a button

23
00:01:01,060 --> 00:01:02,740
that submits the form,

24
00:01:02,740 --> 00:01:05,360
and then it's just form action and the method

25
00:01:05,360 --> 00:01:06,993
that does its job.

26
00:01:08,660 --> 00:01:10,490
Now here, we can also, again,

27
00:01:10,490 --> 00:01:13,400
add our own event listener and we could, again,

28
00:01:13,400 --> 00:01:16,120
of course also add a click listener to this button,

29
00:01:16,120 --> 00:01:17,300
give it an ID,

30
00:01:17,300 --> 00:01:20,170
and then get access to the text area and the input,

31
00:01:20,170 --> 00:01:22,500
maybe also through their IDs,

32
00:01:22,500 --> 00:01:24,210
and then work with that.

33
00:01:24,210 --> 00:01:25,163
That would work.

34
00:01:26,200 --> 00:01:30,380
But from a semantic perspective, you remember semantics,

35
00:01:30,380 --> 00:01:32,820
HTML, that's all important.

36
00:01:32,820 --> 00:01:35,180
It is actually considered a good practice

37
00:01:35,180 --> 00:01:39,120
to wrap form elements, like the input and the text area,

38
00:01:39,120 --> 00:01:41,133
into a form element.

39
00:01:42,300 --> 00:01:45,830
So I don't really want to get rid of that form here.

40
00:01:45,830 --> 00:01:49,600
Still, I don't want the browser to submit the form.

41
00:01:49,600 --> 00:01:53,030
I would rather handle it with JavaScript myself

42
00:01:53,030 --> 00:01:56,023
so that I can send such a behind the scenes request.

43
00:01:57,010 --> 00:02:00,290
Thankfully, that is also something we can do.

44
00:02:00,290 --> 00:02:03,520
We can remove the action and method here

45
00:02:03,520 --> 00:02:05,980
because that only matters to the browser,

46
00:02:05,980 --> 00:02:08,479
if the browser does submit that form.

47
00:02:08,479 --> 00:02:11,863
And instead we can now handle the form submission ourselves.

48
00:02:12,830 --> 00:02:15,170
For this, we just need to get access to it.

49
00:02:15,170 --> 00:02:18,080
And we could give this form an ID to do that.

50
00:02:18,080 --> 00:02:22,620
Or we use the ID on this section and then select the form

51
00:02:22,620 --> 00:02:24,560
inside of this section.

52
00:02:24,560 --> 00:02:27,870
And I'll do the latter also to practice this form,

53
00:02:27,870 --> 00:02:31,283
or this way of selecting HTML elements again.

54
00:02:32,390 --> 00:02:34,130
So in comments JS,

55
00:02:34,130 --> 00:02:39,130
I will now get access to my comments form element

56
00:02:39,720 --> 00:02:42,330
by using document query selector now.

57
00:02:42,330 --> 00:02:46,210
Not get element by ID and I select the comments form

58
00:02:46,210 --> 00:02:49,103
element here, and then in there, the form element.

59
00:02:50,150 --> 00:02:52,010
Remember for a query selector,

60
00:02:52,010 --> 00:02:55,290
you passed in a CSS selector and that will then

61
00:02:55,290 --> 00:02:58,910
give you access to an HTML element that matches

62
00:02:58,910 --> 00:03:02,480
this selector to the first element that matches

63
00:03:02,480 --> 00:03:04,513
this selector to be precise.

64
00:03:05,850 --> 00:03:06,683
So with that,

65
00:03:06,683 --> 00:03:09,250
we should get access to this form element here,

66
00:03:09,250 --> 00:03:12,430
and then we can add a listener to it.

67
00:03:12,430 --> 00:03:13,600
And that's important.

68
00:03:13,600 --> 00:03:17,470
We will now add a listener to this form element,

69
00:03:17,470 --> 00:03:19,630
to this form element itself,

70
00:03:19,630 --> 00:03:21,423
not to the button in there.

71
00:03:22,720 --> 00:03:26,460
Instead here at the bottom next to the other listener.

72
00:03:26,460 --> 00:03:29,510
to keep our overall code organized.

73
00:03:29,510 --> 00:03:33,970
I'll use this comments form element we just added

74
00:03:33,970 --> 00:03:36,180
and add an event listener.

75
00:03:36,180 --> 00:03:38,240
And now it's not a click listener,

76
00:03:38,240 --> 00:03:43,240
but instead the submit listener, because form elements,

77
00:03:44,150 --> 00:03:48,050
if you have hold of those elements in your JavaScript code,

78
00:03:48,050 --> 00:03:52,300
do also emit a submit event when they are submitted.

79
00:03:52,300 --> 00:03:54,860
So once a button in them is clicked.

80
00:03:54,860 --> 00:03:56,750
So the submit event will fire

81
00:03:56,750 --> 00:03:58,800
whenever this form is submitted,

82
00:03:58,800 --> 00:04:02,020
before the browser tries to handle the submission

83
00:04:02,020 --> 00:04:02,853
on its own.

84
00:04:04,580 --> 00:04:07,500
Then we still need to point at a function here

85
00:04:07,500 --> 00:04:09,610
and I'll add a new function for this,

86
00:04:09,610 --> 00:04:14,610
the save comment function maybe.

87
00:04:16,130 --> 00:04:19,882
And here I will therefore point at save comment.

88
00:04:21,910 --> 00:04:24,150
Now there's one important thing we have to do

89
00:04:24,150 --> 00:04:29,020
in this function before we actually send our HTTP request.

90
00:04:29,020 --> 00:04:34,020
And that is the suppression of the default browser behavior.

91
00:04:35,020 --> 00:04:38,550
The default browser behavior would be to send the request

92
00:04:38,550 --> 00:04:40,310
on its own.

93
00:04:40,310 --> 00:04:43,340
So the browser would automatically send a request.

94
00:04:43,340 --> 00:04:45,540
That's how the browser works.

95
00:04:45,540 --> 00:04:47,350
Here, we don't want that.

96
00:04:47,350 --> 00:04:49,890
We want to prevent that browser default

97
00:04:49,890 --> 00:04:53,913
and instead write our own code for sending our own request.

98
00:04:54,890 --> 00:04:57,600
And we can do this with help of this event object,

99
00:04:57,600 --> 00:04:59,143
which we get automatically.

100
00:05:00,050 --> 00:05:03,770
This event object has a prevent default method

101
00:05:03,770 --> 00:05:04,740
automatically.

102
00:05:04,740 --> 00:05:06,540
It's built into the browser,

103
00:05:06,540 --> 00:05:09,240
which does just what the name implies.

104
00:05:09,240 --> 00:05:11,340
It prevents the browser default,

105
00:05:11,340 --> 00:05:14,710
so it will prevent the browser from sending a request

106
00:05:14,710 --> 00:05:16,543
to some server automatically.

107
00:05:17,810 --> 00:05:20,870
So that's the first thing we have to do.

108
00:05:20,870 --> 00:05:22,810
And then as a next step,

109
00:05:22,810 --> 00:05:26,130
we can actually gather all the value we want to send

110
00:05:26,130 --> 00:05:28,923
to the server and then send our own request.

111
00:05:30,440 --> 00:05:35,040
Now, the data I do want to send is this input value

112
00:05:35,040 --> 00:05:36,923
and this text area value,

113
00:05:37,980 --> 00:05:42,170
and there are different ways of gathering that data.

114
00:05:42,170 --> 00:05:43,003
For example,

115
00:05:43,003 --> 00:05:44,850
we could create a form data object

116
00:05:44,850 --> 00:05:46,950
as we also did it earlier in the course

117
00:05:46,950 --> 00:05:48,810
in the tic tac toe game,

118
00:05:48,810 --> 00:05:52,360
or we get access to these elements with their IDs

119
00:05:52,360 --> 00:05:55,380
and then read the currently entered values.

120
00:05:55,380 --> 00:05:56,950
And I'll do the latter here,

121
00:05:56,950 --> 00:05:58,993
but both approaches would be fine.

122
00:06:00,650 --> 00:06:05,650
So here are all quickly get access to my comment title

123
00:06:05,940 --> 00:06:10,940
element by using document get element by ID title.

124
00:06:11,050 --> 00:06:14,910
Since that input element has this ID title.

125
00:06:14,910 --> 00:06:19,730
And then here I have to comment text element,

126
00:06:19,730 --> 00:06:23,363
and here we get access with get element by ID text,

127
00:06:24,240 --> 00:06:28,763
because text is the ID assigned to this text area here.

128
00:06:31,170 --> 00:06:34,260
So now we've got these two constants that give us access

129
00:06:34,260 --> 00:06:36,730
to these HTML elements.

130
00:06:36,730 --> 00:06:37,870
And then for down there,

131
00:06:37,870 --> 00:06:41,440
we now got the entered title,

132
00:06:41,440 --> 00:06:43,680
or however you want to name it,

133
00:06:43,680 --> 00:06:47,120
which we get by using the comment title element

134
00:06:47,120 --> 00:06:51,960
and accessing the value property, which gives us the value

135
00:06:51,960 --> 00:06:53,150
the user entered.

136
00:06:53,150 --> 00:06:56,100
This exists on all input and text area

137
00:06:56,100 --> 00:06:58,123
and select elements and so on.

138
00:06:59,320 --> 00:07:02,030
And we got the entered text,

139
00:07:02,030 --> 00:07:05,800
which we get by using the comment text element

140
00:07:05,800 --> 00:07:07,993
and there accessing the value.

141
00:07:10,410 --> 00:07:12,370
So now with that, we can, first of all,

142
00:07:12,370 --> 00:07:16,690
console log this to confirm that this data fetching works,

143
00:07:16,690 --> 00:07:19,040
that we get access to the entered data

144
00:07:19,040 --> 00:07:21,363
before we then send it as a request.

145
00:07:22,550 --> 00:07:26,320
So if you save this now and I do reload,

146
00:07:26,320 --> 00:07:29,790
if we open developer tools and the console there,

147
00:07:29,790 --> 00:07:34,790
if I enter test text and test here and I click save comment,

148
00:07:35,670 --> 00:07:37,210
the page does not reload.

149
00:07:37,210 --> 00:07:41,420
So the browser default is prevented. No request was sent.

150
00:07:41,420 --> 00:07:44,160
Otherwise we would have reached a new page

151
00:07:44,160 --> 00:07:46,240
and we see the output here.

152
00:07:46,240 --> 00:07:48,330
So preventing the default works

153
00:07:48,330 --> 00:07:50,620
and fetching the user input works.

154
00:07:50,620 --> 00:07:51,840
And with that, we can now again,

155
00:07:51,840 --> 00:07:55,083
send our HTTP request through JavaScript.