1
00:00:00,480 --> 00:00:07,740
Hey guys in this video we will be looking at implementing an AJAX form for our application.

2
00:00:07,740 --> 00:00:08,250
No.

3
00:00:08,340 --> 00:00:16,170
The reason we would use an AJAX form which is javascript mechanism is to reduce the number of reloads

4
00:00:16,470 --> 00:00:20,910
for our pages and I'll do recall that when we're creating an enrollment we want to.

5
00:00:21,270 --> 00:00:28,260
Then not Michaeli one search for students which is why we implemented here Jake UI auto completes widgets

6
00:00:28,410 --> 00:00:35,220
in our textbooks and to add to this functionality what we will be doing is implementing what we call

7
00:00:35,250 --> 00:00:43,080
an AJAX form an AJAX form will actually reduce the need for us to refresh in between clicking or submit

8
00:00:43,080 --> 00:00:48,420
button to recall that every time we could create it actually is set up in the controller to navigate

9
00:00:48,450 --> 00:00:54,450
to our list while we want to do is allow the user to continuously enter and enter and enter on this

10
00:00:54,450 --> 00:00:58,350
one page without needing to navigate so we come back.

11
00:00:58,350 --> 00:01:03,730
So that is where the Ajax form will play a huge advantage.

12
00:01:03,740 --> 00:01:09,360
So the first thing that we will want to do is actually include some G query libraries and we will do

13
00:01:09,360 --> 00:01:10,870
this through new get.

14
00:01:10,920 --> 00:01:16,650
So we will go over to our project right click and go to money can get packages because you don't have

15
00:01:16,650 --> 00:01:17,290
them installed.

16
00:01:17,290 --> 00:01:20,850
We will actually go to browse and we will look for J.

17
00:01:20,850 --> 00:01:28,530
Query on obtrusive Ajax so we can just type but I guess you can just type Ajax and just by typing Ajax

18
00:01:28,530 --> 00:01:32,130
the top result is our library that we're looking for.

19
00:01:32,130 --> 00:01:33,340
So Microsoft that J.

20
00:01:33,330 --> 00:01:39,720
Caught on a true on obtrusive data so we can just go ahead and click install and alone you get to do

21
00:01:39,720 --> 00:01:40,140
its thing

22
00:01:44,390 --> 00:01:51,210
part and with the success of that we can just confirm in our scripts folder that we know have declared

23
00:01:51,250 --> 00:01:54,150
dot on obtrusive agents.

24
00:01:54,200 --> 00:02:00,380
So those are the two new files that we expect to see after you get us completed its installation The

25
00:02:00,380 --> 00:02:06,110
next thing we want to modify is our bundle config so we want to create a new bundle for or new script

26
00:02:06,110 --> 00:02:12,410
files now I'm just duplicating this new query Atlanta named the J query dash Ajax and instead of trying

27
00:02:12,410 --> 00:02:19,610
to retype this I just copied the name from the file here in source explorer and just space that it to

28
00:02:19,940 --> 00:02:22,540
expedite that whole typing process.

29
00:02:22,730 --> 00:02:28,760
After saving this nine to our bundle config then we want to let our little page know that there is a

30
00:02:28,760 --> 00:02:34,600
new bundle in tone so I just include it on the Neath or G query line.

31
00:02:34,700 --> 00:02:39,260
So no order matters as long as it's underneath the Jake or a line then you should have no problem.

32
00:02:39,260 --> 00:02:46,190
So J query dash Ajax is our new bundle that needs to be rendered so we can head back to our creed view

33
00:02:46,190 --> 00:02:48,500
and then we'll start our modification.

34
00:02:48,500 --> 00:02:55,490
So the first thing we want to do is change the type of form so we would see that we're using HDMI begin

35
00:02:55,490 --> 00:03:02,750
form meaning we're using our regular HDMI form the new type of form and tone is Ajax so I see Ajax right

36
00:03:02,750 --> 00:03:07,740
here replacing each demo and we're beginning our Ajax form.

37
00:03:07,790 --> 00:03:12,650
All right so we're seeing that Ajax has a little error underneath its end that's chiefly because our

38
00:03:12,650 --> 00:03:18,170
Ajax form actually takes a few parameters so we'll go ahead and fill in these parameters and I'll walk

39
00:03:18,170 --> 00:03:19,850
you through it step by step.

40
00:03:19,850 --> 00:03:28,370
The first into is the post action so the thing is when the Ajax form submits it needs to know what's

41
00:03:28,490 --> 00:03:31,020
in the controller should I be calling.

42
00:03:31,100 --> 00:03:31,420
All right.

43
00:03:31,430 --> 00:03:39,170
So we all know that the form the HMO form by default will call the post option of whatever is in the

44
00:03:39,170 --> 00:03:39,780
controller.

45
00:03:39,800 --> 00:03:46,160
So we have to create here which renders the form initially and then once you could submit it's automatically

46
00:03:46,160 --> 00:03:51,820
going to look for the DP post version of creates over with the Ajax form.

47
00:03:51,830 --> 00:03:55,670
And even with the H M a form but it's required for the H Ajax form.

48
00:03:55,670 --> 00:03:59,640
We need to specify what action should be called.

49
00:03:59,720 --> 00:04:05,540
So I could specify that I want to call create but then I'm going to modify it a bit and I'm going to

50
00:04:05,540 --> 00:04:12,300
create another one and then we'll write that action together someone to call this one add students make

51
00:04:12,300 --> 00:04:20,950
stuff we need to specify which controller is this action in so it's the controller and then we need

52
00:04:20,950 --> 00:04:31,120
to add new Ajax options and just bring the line here so that we can just fill it out within full of

53
00:04:31,120 --> 00:04:38,140
you know the options are more like properties of this new class so you notice that this is getting the

54
00:04:38,140 --> 00:04:42,150
color coding from visual studio that it's a class.

55
00:04:42,160 --> 00:04:47,030
So we're just adding values and certain properties that are called Ajax actions.

56
00:04:47,050 --> 00:04:50,360
So the first one that we're going to add is the HDP method.

57
00:04:50,470 --> 00:04:55,570
And today it's we've been using post so we can just maintain that so we just specify that we want to

58
00:04:55,840 --> 00:05:02,880
post and then we can see on success we wish to do a certain action.

59
00:05:02,920 --> 00:05:04,160
And I'll call it.

60
00:05:04,160 --> 00:05:04,810
I did.

61
00:05:04,840 --> 00:05:05,070
All right.

62
00:05:05,080 --> 00:05:10,480
So upon success of this post call then we want to call this function.

63
00:05:10,480 --> 00:05:13,090
And another one on failure.

64
00:05:13,090 --> 00:05:14,910
We want to do this one

65
00:05:17,700 --> 00:05:24,990
there are quite a few properties that you can actually implement in the Ajax options section and I have

66
00:05:24,990 --> 00:05:31,830
attached the documents to this letter stating each of those options and how you can leverage them.

67
00:05:31,830 --> 00:05:38,550
The next thing we want to do is implement our new function called IDE students a well or new option

68
00:05:38,550 --> 00:05:45,030
called IDE students and we'll just go over into our controller and I will add it below the existing

69
00:05:45,030 --> 00:05:46,400
post create function.

70
00:05:46,890 --> 00:05:53,770
So like we stated this is going to be an issue TTP post and all of it just just knowing.

71
00:05:53,940 --> 00:06:00,210
This is the first you're seeing if that's the word prop and then pressed up twice and that just implements

72
00:06:00,210 --> 00:06:06,690
a property but it's a quicker way to just get public and they can sit in the type you wish.

73
00:06:06,690 --> 00:06:08,510
And this is not a property of course.

74
00:06:08,510 --> 00:06:17,930
This is actually a function and then we are creating the post option students and of course add students

75
00:06:17,930 --> 00:06:24,710
is going to take a parameter or a problem it's a similar to the existing create but then do we recall

76
00:06:24,710 --> 00:06:31,040
that we're expecting only two values really and truly from this form and in previous lectures we would

77
00:06:31,120 --> 00:06:38,150
see in that actually what this does is omit any and that is coming across the field is not listed here

78
00:06:38,150 --> 00:06:41,660
then it won't be included in our model.

79
00:06:41,660 --> 00:06:47,720
So we're going to use that but then we're actually going to specify exactly what fuels we want which

80
00:06:47,720 --> 00:06:53,810
are the course I.D. and the students I.D. those are the two fields that really should be coming from

81
00:06:53,810 --> 00:06:54,410
this form.

82
00:06:54,410 --> 00:07:00,650
So for this Parliament I'm just going to borrow this quote quickly since it's very similar except I'm

83
00:07:00,650 --> 00:07:10,970
actually just going to specify that I want only the course I.T. and the student I.D. since nothing else

84
00:07:10,970 --> 00:07:14,000
is really being added from this form.

85
00:07:14,000 --> 00:07:21,170
No for this action I'm actually going to do a try and catch so I just type try and then double tab and

86
00:07:21,170 --> 00:07:27,860
then it filled out the rest of that cold block for me and then we can start filling out our code.

87
00:07:27,860 --> 00:07:33,230
So I'm going to follow this sputter and cause a lot of the code that was generated for us is still applicable.

88
00:07:33,230 --> 00:07:37,580
The model state is valid is ticking is there any missing data.

89
00:07:37,610 --> 00:07:43,210
So between the two values that we're expecting which our course I.D. and student I.D. is either of them

90
00:07:43,210 --> 00:07:44,800
missing in this scenario.

91
00:07:44,960 --> 00:07:50,250
And then if it is valid then we expect to add the record and return the view.

92
00:07:50,260 --> 00:07:56,180
So I'm just going to copy that and place that in my tribe block and actually I'm going to modify this

93
00:07:56,260 --> 00:08:00,140
just to look like there's someone to make it into an asynchronous method.

94
00:08:00,140 --> 00:08:04,330
So I just put a song and then task and wrap this.

95
00:08:04,430 --> 00:08:09,820
So focusing on the simple I'm lower hanging fruits of this block of code.

96
00:08:09,890 --> 00:08:16,220
What's I'm going to do is say try to do this operation and if it fails then take this action.

97
00:08:16,220 --> 00:08:19,520
So let's first work on the part that does not fail.

98
00:08:19,550 --> 00:08:26,720
So if the model state is valid then we want to add the enrollment seeing the changes but then you notice

99
00:08:26,720 --> 00:08:34,220
that a return type here is wrong because what we need to do is return a Jesus son similar to how we

100
00:08:34,220 --> 00:08:37,280
returned it in whereas that function right.

101
00:08:37,310 --> 00:08:43,910
So we had a decent result function here and we returned Jesus on object so we need to do something similar

102
00:08:44,060 --> 00:08:46,770
for this since this is a Jason results.

103
00:08:46,790 --> 00:08:54,200
We're going to modify this option to be a Jason object that is being returned and then do recall that

104
00:08:54,200 --> 00:09:02,360
with Jason object so you can actually specify the contents of these objects to suit your needs.

105
00:09:02,420 --> 00:09:08,490
So I'm going to specify a custom object that has two parameters.

106
00:09:08,630 --> 00:09:15,800
The first one is going to be is success which I intended to be a boolean someone to say true because

107
00:09:16,190 --> 00:09:23,450
if the model state is valid and all of this works out then it was a success on passing backup boolean

108
00:09:23,450 --> 00:09:31,220
to say is success is true and also I'm adding a message that I intend to display it to my user someone

109
00:09:31,250 --> 00:09:31,880
to see.

110
00:09:31,910 --> 00:09:38,980
I want to say students did successfully and then following the pattern of our previous G son function

111
00:09:38,990 --> 00:09:45,920
I'm just going to pass the GST on request behaviour low get foreign metal so that or Jason object is

112
00:09:45,920 --> 00:09:46,850
complete.

113
00:09:46,850 --> 00:09:48,860
So let me just review this.

114
00:09:48,860 --> 00:09:56,360
We're trying this operation and if the model state is valid then we're going to go ahead and add the

115
00:09:56,360 --> 00:10:03,890
enrolment added to the database and then return a success so that those with a success message so that

116
00:10:03,890 --> 00:10:05,330
will let or form.

117
00:10:05,330 --> 00:10:13,010
No but we just implemented this or formal no based on what is returned that it was either a success

118
00:10:13,100 --> 00:10:14,240
or a failure.

119
00:10:14,270 --> 00:10:19,700
So we have the success scenario we need to put in the failure scenario.

120
00:10:19,700 --> 00:10:25,250
So far our failure line we can actually just copy this because it would be a very similar thing and

121
00:10:25,250 --> 00:10:31,790
this would be outside of this statement because this only gets done if it is valid and then you'll see

122
00:10:31,790 --> 00:10:38,570
people flip this or maybe you flip it around to see if not valid then return to failure but then if

123
00:10:38,570 --> 00:10:40,200
it is valid then do some others.

124
00:10:40,340 --> 00:10:43,460
So it's up to you but I want to leave this as is.

125
00:10:43,460 --> 00:10:51,410
And so if it is valid then it was successful and if it does not return or if this fails then it will

126
00:10:51,500 --> 00:10:57,800
default to this line so if it defaults of this line which means that the model states is not valid then

127
00:10:57,800 --> 00:10:59,670
we return a failure status.

128
00:10:59,690 --> 00:11:08,150
So our success will actually be falls and our message will be read differently maybe students was not

129
00:11:08,240 --> 00:11:15,490
added successfully so it was added successfully than we expect or just an object of a true for this

130
00:11:15,490 --> 00:11:18,630
value and this message otherwise it should return.

131
00:11:18,640 --> 00:11:25,540
This and in the same vein if an exception is thrown or an exception is courts or other then what we

132
00:11:25,540 --> 00:11:31,720
want to do is not throw because throwing actually crashes our application but we want to handle it gracefully.

133
00:11:31,720 --> 00:11:34,930
So if you're not so familiar with a try catch what this does.

134
00:11:34,930 --> 00:11:40,390
Once again it tries this operation and that entire operation feels anywhere.

135
00:11:40,420 --> 00:11:43,060
Then it catches the exception.

136
00:11:43,060 --> 00:11:48,700
So then you can see okay if there is an exception or an overall error that was unaccounted for.

137
00:11:48,700 --> 00:11:50,050
How do I handle it.

138
00:11:50,110 --> 00:11:53,140
The line through makes the program crash.

139
00:11:53,140 --> 00:11:55,360
In this scenario we don't want our program to crash.

140
00:11:55,360 --> 00:12:00,820
We want the user to just have the same kind of experience as they would have had if it was an invalid

141
00:12:00,850 --> 00:12:01,550
entry.

142
00:12:01,600 --> 00:12:05,200
Then we wanted to show them that it field so we can just reuse.

143
00:12:05,200 --> 00:12:12,980
This is success online and see something different and probably so we wanted to them to please contact

144
00:12:12,980 --> 00:12:19,790
your administrator and then we can probably put in details of the arrow.

145
00:12:19,810 --> 00:12:25,570
You probably don't want to show them actual details of the arrow since they're just end users but if

146
00:12:25,570 --> 00:12:30,430
you're more advanced than you can probably put in like an email to fire off to the administrator or

147
00:12:30,430 --> 00:12:31,270
the webmaster.

148
00:12:31,630 --> 00:12:37,610
When an exception is Scott so that you can keep abreast of the happenings of the software.

149
00:12:37,670 --> 00:12:43,190
No there's one more thing I want to add to this validation before it actually goes ahead and adds a

150
00:12:43,210 --> 00:12:50,130
students and that is I check to see if the student is already enrolled in a particular course.

151
00:12:50,140 --> 00:12:56,440
So what we're doing is allowing somebody from our current view where allowing somebody to select a course

152
00:12:56,650 --> 00:13:03,490
and then type a student's name and then click submit and then it will cause this function passing in

153
00:13:03,490 --> 00:13:07,480
the course idea and the students I.D. and then tried to add them.

154
00:13:07,480 --> 00:13:12,630
What we don't want is a situation where the same student is being added to the same course.

155
00:13:12,640 --> 00:13:19,270
More than once that we're going to put in a validation here and I'm going to add that validation to

156
00:13:19,330 --> 00:13:20,370
this if statement.

157
00:13:20,380 --> 00:13:25,480
So I'm just going to write quick bits of code which is going to query our database.

158
00:13:25,490 --> 00:13:33,970
Some would say var is in the rules equal to and then I can say IDB dots enrollments and then ones use

159
00:13:33,970 --> 00:13:41,590
another link function which is called any which really just says Is there any record in the database

160
00:13:41,590 --> 00:13:44,260
that meets a particular condition.

161
00:13:44,620 --> 00:13:49,560
So as it stands any is going to say is there any record inside this table.

162
00:13:49,570 --> 00:13:50,740
Someone to build on this.

163
00:13:50,740 --> 00:13:57,280
Any function with our lambda expression so I'm using 2 which is our universal letter for lambda expressions

164
00:13:57,280 --> 00:14:03,330
and I'm checking if there is any course iodine in our enrollments table that matches the course I'd

165
00:14:03,400 --> 00:14:05,530
coming from our enrollment model.

166
00:14:05,530 --> 00:14:10,600
Here is our enrollment model coming in through our prior model and I'm seeing is there any course I'd

167
00:14:10,600 --> 00:14:11,920
be in this table.

168
00:14:11,980 --> 00:14:16,930
That is the same as this fourth I.D. which I'm sure would be yes.

169
00:14:16,930 --> 00:14:17,860
My note right.

170
00:14:17,890 --> 00:14:22,380
If you have entered your records in there there should be at least one red card.

171
00:14:22,390 --> 00:14:24,750
Maybe maybe not but this would return true.

172
00:14:24,770 --> 00:14:29,860
But this is not all we're interested in because we want to know that there is of course I.D. That much

173
00:14:29,860 --> 00:14:30,510
is this.

174
00:14:30,580 --> 00:14:39,580
And in that same record where we found out much that there is a student I.D. that matches our enrollments.

175
00:14:39,580 --> 00:14:48,040
So this line once again is seeing these tell me if there is any recording my enrollments table where

176
00:14:48,220 --> 00:14:55,930
the course I.D. and the student's I.D. match the horse I.D. and student I.D. coming in through this

177
00:14:56,010 --> 00:15:02,100
Jesus on request or this post the request to this option in this model object.

178
00:15:02,260 --> 00:15:07,640
So then we want to see if is enrolled then we don't want to have them.

179
00:15:07,640 --> 00:15:15,880
So this is he is enrolled so I can just add I mean this this condition on the statement to see if the

180
00:15:15,880 --> 00:15:24,700
state is valid meaning both properties that are required for the form are there and is enrolled is equal

181
00:15:24,700 --> 00:15:25,780
to forms.

182
00:15:25,810 --> 00:15:26,080
All right.

183
00:15:26,080 --> 00:15:31,780
So if it is valid and the student is not enrolled then we can proceed.

184
00:15:32,050 --> 00:15:38,920
So if either one of these evaluates to not being true then it should pause that the student was not

185
00:15:38,980 --> 00:15:43,930
added successfully and we can amend this NC student is already at it.

186
00:15:44,050 --> 00:15:51,130
The student is already enrolled so it's good to have descriptive messages for each step so that they

187
00:15:51,130 --> 00:15:57,790
know exactly what is happening and probably why feels so I can amend the a system failure.

188
00:15:57,790 --> 00:16:03,310
Once again you probably don't want to tell your users that there's a system failure you can find a nice

189
00:16:03,310 --> 00:16:08,440
graceful message to put there but I'm just giving you the scenarios as they come up I'm helping you

190
00:16:08,440 --> 00:16:13,770
to appreciate why we have customized messages for each state.

191
00:16:13,880 --> 00:16:20,030
So once again we're seeing we're checking that enrolment stable to see if there's any record that has

192
00:16:20,030 --> 00:16:20,740
both.

193
00:16:20,740 --> 00:16:26,120
Course I.D. and student I.D. existing before or current option.

194
00:16:26,180 --> 00:16:32,030
And if there is none then we just see OK return that it was successful.

195
00:16:32,030 --> 00:16:38,730
If there is or if one of these values is missing then we return forms with a failure.

196
00:16:38,810 --> 00:16:43,880
And if there is an error in doing any of this up here then we're going to catch the exception and just

197
00:16:43,880 --> 00:16:48,560
return an error miss it seeing that there is a failure without crashing our program.

198
00:16:48,560 --> 00:16:54,140
No I'm just going to I'm in this line a bit and I said it this way to spell it out for incase you're

199
00:16:54,140 --> 00:16:56,610
new to see sharp I you're not fully familiar.

200
00:16:56,810 --> 00:17:01,540
But then we can actually just see if is not enrolled.

201
00:17:01,550 --> 00:17:05,420
So this actually evaluates to the same thing that was there just now.

202
00:17:05,420 --> 00:17:10,490
So if you prefer to write it this way and this way looks a bit shorter but then you know as a beginner

203
00:17:10,490 --> 00:17:16,280
you may not absorb it as quickly as how I had it before but I'm just showing you that it can be written

204
00:17:16,310 --> 00:17:16,850
either way.

205
00:17:17,300 --> 00:17:20,710
So we're just going to build and make sure that we have no errors.

206
00:17:20,750 --> 00:17:28,400
We are on our project and I'm setting a breakpoint here at our student option so that we can see that

207
00:17:28,400 --> 00:17:32,390
when we click submit the data is actually being passed.

208
00:17:32,390 --> 00:17:33,710
So this function.

209
00:17:33,730 --> 00:17:40,200
So I'm just going to do a quick test here and just going to change the drop zone property and I'm not

210
00:17:40,220 --> 00:17:46,070
going to put in a students I will just see how this behaves someone's a click Create and we see that

211
00:17:46,070 --> 00:17:47,560
our breakpoint is active.

212
00:17:47,570 --> 00:17:53,330
If I hover over my enrolment model we'll see that we have the course I.D. coming back and nothing coming

213
00:17:53,330 --> 00:17:55,160
back for our students I.D..

214
00:17:55,520 --> 00:18:03,800
So if I step through the code and I stepped on to I got to the statements that ran the query and this

215
00:18:03,800 --> 00:18:11,720
returned false because there is no enrollment that exists with course I.D. being for student I.D. being

216
00:18:11,770 --> 00:18:17,720
zero and then I will continue to step and then you see that it skipped over this statement altogether

217
00:18:17,750 --> 00:18:23,780
because the model state is not valid because there is no value being provided for student I.D. which

218
00:18:23,780 --> 00:18:26,210
is required based on our design.

219
00:18:26,210 --> 00:18:34,870
So it hits our Jason objects which is returning that there is a failure in the addition of the student

220
00:18:35,180 --> 00:18:39,640
and there is a message that is OK if a student is already enrolled.

221
00:18:39,670 --> 00:18:43,220
And so sometimes this may not tell the whole story.

222
00:18:43,340 --> 00:18:43,640
All right.

223
00:18:43,640 --> 00:18:49,400
So be very careful with their message because in this case it's not a lack of enrollment but or it's

224
00:18:49,400 --> 00:18:53,450
not the presence of an existing enrollment but it's the lack of valid data.

225
00:18:53,480 --> 00:18:56,810
So you want to be very clear when you have that message.

226
00:18:56,810 --> 00:19:02,390
Any hope we can just press F5 on continue and then we look back at our Web page and we see that we didn't

227
00:19:02,390 --> 00:19:03,470
even navigate a week.

228
00:19:03,490 --> 00:19:09,860
And I'm going to put in a student this time someone's a type for of the students or type.

229
00:19:09,860 --> 00:19:11,070
It is still working.

230
00:19:11,240 --> 00:19:16,760
And then I click Create and then we hit the break point once again and if we look in our object we see

231
00:19:16,760 --> 00:19:22,970
that we're getting a student I.D. And of course I.D. and I am just going to set the breakpoint to the

232
00:19:22,970 --> 00:19:28,340
if statement quickly four to five and then we're getting our statement and we see here at this time

233
00:19:28,370 --> 00:19:35,780
the model state is true because it is getting back valid to valid values for of course I.D. and students

234
00:19:36,170 --> 00:19:38,530
and also is enrolled is fours.

235
00:19:38,540 --> 00:19:46,670
So there is no conflict as to where this block of course should go afterwards if I step in and I'll

236
00:19:46,670 --> 00:19:52,480
just skip ahead of this at another break point and just press at five and then you see that's it it

237
00:19:52,490 --> 00:19:58,520
flashed on the screen because it did this then it did that and then because none of this field it went

238
00:19:58,520 --> 00:20:05,600
to this success portion and it's you see in the students as I did successfully that we designed it to

239
00:20:05,600 --> 00:20:11,540
see and once again if any of this operation failed what would have happened is that it would have jumped

240
00:20:11,540 --> 00:20:14,950
to the cat and then returned that Jesus on Falls also.

241
00:20:14,990 --> 00:20:19,250
So I can just press a five on continuum and you see that the page didn't move.

242
00:20:19,250 --> 00:20:23,300
Nothing changed on the page like that's that's at this stage it's good.

243
00:20:23,340 --> 00:20:29,360
But ah but when I go back to the list I see here that the enrollment that I just did was successful

244
00:20:29,480 --> 00:20:34,850
and yes we're going to modify this speech because as it stands as it is it's not very clear.

245
00:20:34,850 --> 00:20:37,700
We have missed marching columns and poor data.

246
00:20:37,700 --> 00:20:43,850
So this is going to be modified soon but I want us to focus on the fact that the enrollment was added

247
00:20:43,900 --> 00:20:51,830
for calculus and the students as read and the page itself did not redirect I had to manually go back

248
00:20:51,830 --> 00:20:53,200
to the list to see it.

249
00:20:53,540 --> 00:20:53,810
All right.

250
00:20:53,810 --> 00:20:58,100
So that means our agents Ajax form is working as we intended.

251
00:20:58,100 --> 00:21:05,330
So if I look for another student I had one name on Ledford and I could create and I'm just going to

252
00:21:05,330 --> 00:21:09,600
take off my break points at this point because I'm sure it's working.

253
00:21:09,740 --> 00:21:15,140
And then I just continue and the page and refresh the page didn't do anything but then I have to go

254
00:21:15,140 --> 00:21:22,650
back to the list and refresh and then it will yield that that was also a successful enrollment.

255
00:21:22,730 --> 00:21:29,780
And then if I click Create again having already enrolled and Ledford in calculus and I click Create

256
00:21:29,960 --> 00:21:31,790
you see nothing nothing is happening.

257
00:21:31,790 --> 00:21:32,130
Right.

258
00:21:32,190 --> 00:21:38,680
Well nothing is happening visibly so with our breakpoints we would have seen that it heats the code

259
00:21:38,680 --> 00:21:44,120
and it would have evaluated the falls because this enrollment already exists and in the same way if

260
00:21:44,120 --> 00:21:50,820
I refresh this list then you'll see that this is not repeating it's of no matter how many times we clicked

261
00:21:50,890 --> 00:21:51,630
create.

262
00:21:51,650 --> 00:21:57,890
So no that we're sure that our code works what we need to do is actually help the user to be sure that

263
00:21:57,890 --> 00:22:04,370
the code is working because like I said at the beginning there are no visual cues here to see oh it

264
00:22:04,370 --> 00:22:06,630
was successful or it was a failure.

265
00:22:06,710 --> 00:22:15,200
No do recall back in our form we had specified certain options for on success and on failure.

266
00:22:15,200 --> 00:22:19,730
And then we only put in text here but that didn't quite explain at the time what the text meant.

267
00:22:19,730 --> 00:22:26,020
So these are actually functions or names of functions that should be called when it's successful and

268
00:22:26,030 --> 00:22:27,920
when there's a failure.

269
00:22:27,920 --> 00:22:31,770
So these functions will actually be implemented in javascript.

270
00:22:31,880 --> 00:22:37,730
So we have here the scripts block I don't tough to create a new one I just use it and declare a new

271
00:22:37,730 --> 00:22:43,580
function in javascript so you just see a function and you give it the name and I said on success I want

272
00:22:43,580 --> 00:22:45,920
the function added to be called.

273
00:22:45,920 --> 00:22:51,660
And then remember that we're actually returning GSR on object here.

274
00:22:51,680 --> 00:22:56,510
So this is a new object that has two properties is success on message.

275
00:22:56,510 --> 00:23:04,610
So I'm going to prepare my function for the prospect of getting some response from the base on call.

276
00:23:04,640 --> 00:23:09,830
So I'm just using the word as our resource response whatever it is you want to call it.

277
00:23:09,860 --> 00:23:11,720
So that's what I'm calling it.

278
00:23:11,720 --> 00:23:18,560
So once this has finished processing I think got the call about where the response then it cause the

279
00:23:18,560 --> 00:23:27,020
function added I am letting I didn't know that I expected to hose an object in which is going to correspond

280
00:23:27,020 --> 00:23:28,400
with whatever it is I'm returning.

281
00:23:28,430 --> 00:23:34,970
So there is here is going to embody the properties is success and message.

282
00:23:35,240 --> 00:23:43,790
So I'm just going to quickly implement this and I'm going to put in an if statement and see if rez dot

283
00:23:44,210 --> 00:23:49,720
is success then we want to use a Jew query function.

284
00:23:49,820 --> 00:23:59,010
So the dollar sign really invokes a g query call and and this function I want it to render some HCM

285
00:23:59,270 --> 00:24:07,320
elements so I'm going to render an element that's I'm going to call it success I'm calling it but I'd

286
00:24:07,700 --> 00:24:08,780
calling it success.

287
00:24:08,930 --> 00:24:11,300
And I'm want to tell it to feed in fast.

288
00:24:11,330 --> 00:24:12,920
So that's one of those do query things.

289
00:24:12,920 --> 00:24:19,820
So the query makes javascript a bit easier and faster to implement if you were to write vanilla javascript

290
00:24:19,820 --> 00:24:26,590
to accomplish something like this then it would probably be a little a few more lines of code.

291
00:24:26,600 --> 00:24:34,640
So do query act actually expedites that whole process of getting some interactivity in our application

292
00:24:34,820 --> 00:24:41,990
and then I'm just going to copy this code and I'm going to implement another function and call it field

293
00:24:42,500 --> 00:24:51,130
and I'm just going to modify this statement and see if not then I want field to feed in fast.

294
00:24:51,140 --> 00:24:58,810
So I want on access an element called sorry on a successful ad then we want an element called success

295
00:24:58,820 --> 00:25:04,160
the feed in and if it feels and wants an element called field to feed in.

296
00:25:04,370 --> 00:25:04,640
All right.

297
00:25:04,640 --> 00:25:10,610
So after adding these guys I just realized that I would have misled you with something and I'm going

298
00:25:10,610 --> 00:25:13,240
to explain what it is.

299
00:25:13,250 --> 00:25:21,500
Off to show you the code so I did the device for success and field and if we screwed on I just created

300
00:25:21,500 --> 00:25:27,970
one div for field and I gave it the I.T. field of course so that we could target it using the hashtag.

301
00:25:28,430 --> 00:25:35,840
And also I gave the class alerts and alert the angel from our bootstraps that red box will come up and

302
00:25:35,840 --> 00:25:37,850
display our hero.

303
00:25:37,850 --> 00:25:45,730
So what I did here was instead of using the message coming from from our Jason response I where the

304
00:25:45,770 --> 00:25:51,470
student was added or not and then trying to find a reason I just gave a wholesale error right here in

305
00:25:51,470 --> 00:25:57,170
static fixed to say there was an error adding the student to this course and he could say please check

306
00:25:57,170 --> 00:26:02,540
your data and try again or contact their administrator take and explain whatever it is you want here

307
00:26:02,750 --> 00:26:09,680
in one big general takes and also for success I put in the message student added successfully.

308
00:26:09,720 --> 00:26:16,380
So what will happen is that on success we call added and then added is going to check if the success

309
00:26:16,380 --> 00:26:23,880
message is actually true and then render this this function if we wanted to add the text coming back

310
00:26:23,880 --> 00:26:27,570
from the Jason we could just append the text here.

311
00:26:27,580 --> 00:26:34,800
In using JavaScript So this element because res would have raised that message just like it does raise

312
00:26:34,800 --> 00:26:39,570
that success so we could have just said we want the elements of this.

313
00:26:39,720 --> 00:26:45,810
We want to append and do what we want to up and is raise that message.

314
00:26:45,900 --> 00:26:51,480
So that is how we would actually go about fitting that actual error message or success message coming

315
00:26:51,480 --> 00:26:56,230
from our Jason response into the contents of the.

316
00:26:56,250 --> 00:27:01,150
So if you don't want to do it this way where you have the static text in the div then you can do it

317
00:27:01,200 --> 00:27:03,720
this way where you just inject it in.

318
00:27:03,720 --> 00:27:05,580
So I'm just showing you both ways.

319
00:27:05,580 --> 00:27:10,720
I usually just put in a static text but I'll leave that there for your future reference.

320
00:27:10,740 --> 00:27:11,190
No.

321
00:27:11,430 --> 00:27:17,640
When I said I would have misled you I got a bit overzealous and would have told you that unfair there

322
00:27:17,730 --> 00:27:23,040
is corresponds with the Jason response and that was in accurate.

323
00:27:23,040 --> 00:27:30,780
So on failure actually means that if the call to the action fails for whatever reason meaning this was

324
00:27:30,780 --> 00:27:37,830
not successful it made the ajax call and it couldn't find this then what error do you want to show so

325
00:27:38,100 --> 00:27:45,570
this function would actually get called if there was a total system failure when trying to call the

326
00:27:45,570 --> 00:27:46,500
post option.

327
00:27:46,530 --> 00:27:53,100
So that's why on field really means so whether or not on the database side the addition of the record

328
00:27:53,100 --> 00:27:59,520
was successful or if in this case the way we wrote our application if there was an exception trying

329
00:27:59,520 --> 00:28:06,180
to do this operation and it caught our response as long as it's returning our response the Ajax form

330
00:28:06,180 --> 00:28:10,940
sees it as a successful call because it sent data and it got back our response.

331
00:28:10,950 --> 00:28:19,280
So really and truly to facilitate this field versus success scenario for the addition of our properties

332
00:28:19,290 --> 00:28:25,500
for the additional four enrollments to our database then we need to do it a bit differently so I'm going

333
00:28:25,500 --> 00:28:28,510
to see failure here right.

334
00:28:28,620 --> 00:28:34,530
And I mean I can implement a function for this but I don't anticipate at least for this scenario that

335
00:28:34,530 --> 00:28:36,870
my I want a total system failure.

336
00:28:37,080 --> 00:28:43,370
But what I'm going to do is actually modify the added function so unsuccessful.

337
00:28:43,470 --> 00:28:44,730
What do we want to do.

338
00:28:44,730 --> 00:28:45,790
And we call it.

339
00:28:45,890 --> 00:28:46,770
No I did.

340
00:28:46,770 --> 00:28:53,100
Is the reason we're checking for success is that success can be either true or false because we've got

341
00:28:53,100 --> 00:28:55,600
bucket response and it's either true or false.

342
00:28:55,620 --> 00:29:03,770
So if it is true then we want to display our div called success and then I can see else.

343
00:29:04,110 --> 00:29:05,310
So else meaning.

344
00:29:05,340 --> 00:29:06,690
Or is is not.

345
00:29:06,750 --> 00:29:09,110
Or is that success is not true.

346
00:29:09,120 --> 00:29:16,000
Then we can call or all the function which I outlined field and it's possible in there is.

347
00:29:16,000 --> 00:29:22,370
So just to see and we could target that for success and put in the text we can target this.

348
00:29:22,380 --> 00:29:24,850
So this need that therefore your future inference.

349
00:29:24,930 --> 00:29:31,190
Once again I put in the static text here so I'm not going to use this but feel free to experiment.

350
00:29:31,350 --> 00:29:33,550
And so for the added.

351
00:29:33,630 --> 00:29:39,060
If this is not successful and really into that I don't have to do two if statements.

352
00:29:39,060 --> 00:29:44,280
So if it's not successful then I want to call it feel there is someone to take over that block of code

353
00:29:44,520 --> 00:29:51,900
and then what I want to do is just us is just call this function from R S S..

354
00:29:52,290 --> 00:30:00,660
So it's either successful and a good idea and it's a success or failed to add that is the database and

355
00:30:00,660 --> 00:30:06,880
so we're going to display hashtag field div which is a div with alert danger.

356
00:30:06,930 --> 00:30:09,380
So if it was successful that was the alert success.

357
00:30:09,390 --> 00:30:14,770
And this is where you start seeing whole bootstrap makes it easy for you to display visual cues steer

358
00:30:14,780 --> 00:30:18,360
users with very little effort.

359
00:30:18,360 --> 00:30:25,440
So once again unfeeling really means that if it attempted to make the post call this action and it couldn't

360
00:30:25,440 --> 00:30:31,170
find the option maybe renamed it or it just really couldn't communicate with the server then that is

361
00:30:31,170 --> 00:30:36,590
when you call a failure so you could implement another function for failure.

362
00:30:36,620 --> 00:30:37,940
All right all right.

363
00:30:37,950 --> 00:30:44,310
So back in debug mode we're going to test the theory that our code works.

364
00:30:44,310 --> 00:30:51,720
So once again on a successful addition of an enrollment then we expect that we're going to see div appear

365
00:30:51,950 --> 00:30:58,260
and feed inside the animation and we can adjust the speed and you can just take J query documentation

366
00:30:58,260 --> 00:31:03,420
to see the different speed options you can see a slow fast and I think you can see a medium I'm not

367
00:31:03,420 --> 00:31:10,260
sure if the strange and in the same way if it fails then we expect to see a relative to display or failure.

368
00:31:10,280 --> 00:31:11,810
So let us just try.

369
00:31:11,840 --> 00:31:12,720
That's one way to try.

370
00:31:12,720 --> 00:31:17,470
The failed scenario first so I'm just going to click Create and obviously this should fail.

371
00:31:17,510 --> 00:31:18,280
There we go.

372
00:31:18,290 --> 00:31:19,160
So it fitted in.

373
00:31:19,160 --> 00:31:19,990
There was an error.

374
00:31:20,030 --> 00:31:27,230
Adding the student to this course because we have of course I.D. and we didn't specify students and

375
00:31:27,230 --> 00:31:31,300
then I'm going to try and live for two.

376
00:31:31,340 --> 00:31:35,880
Let's see speed up that MVC validation and then we could create.

377
00:31:36,050 --> 00:31:36,980
And there we go.

378
00:31:37,010 --> 00:31:40,100
So we see a little chink in our code nowhere.

379
00:31:40,160 --> 00:31:45,260
We have to do is being displayed simultaneously which is not necessarily what we want.

380
00:31:45,290 --> 00:31:48,620
And you know it's not ideal.

381
00:31:48,620 --> 00:31:50,460
So let's modify our code a bit.

382
00:31:50,530 --> 00:31:52,310
So I'm going to see.

383
00:31:52,390 --> 00:31:58,610
So the modification I mean is to say that if something is added successfully then we want to feed 0

384
00:31:58,750 --> 00:32:02,900
field or you could just set its display to force however you want to do it.

385
00:32:02,900 --> 00:32:05,000
I mean there are many ways you could do that.

386
00:32:05,090 --> 00:32:09,180
So we're just seeing field quickly and feed into success.

387
00:32:09,240 --> 00:32:12,470
And if it fails then we want to feed this in quickly.

388
00:32:12,500 --> 00:32:17,690
You just want to know that when it feels you're not seeing the success and vice versa.

389
00:32:17,690 --> 00:32:21,710
So as we can see more changes here and then try again.

390
00:32:21,710 --> 00:32:29,180
So I want to try to create this field all right so I'm going to try and add to data mining.

391
00:32:29,180 --> 00:32:31,130
And there we go.

392
00:32:31,160 --> 00:32:33,430
So it's only displaying one at a time.

393
00:32:33,440 --> 00:32:41,330
So if I remove this and click Create then you'll see that it replaces the arrow with the success and

394
00:32:41,330 --> 00:32:42,420
vice versa.

395
00:32:42,440 --> 00:32:49,430
So we've essentially added Ajax farm and added a nice clean way to allow people to add students and

396
00:32:49,430 --> 00:32:50,830
enroll them to our class.

397
00:32:51,200 --> 00:32:56,840
However as much as we've done quite a bit of work here the work is still not finished because we still

398
00:32:56,840 --> 00:33:04,100
want more interactive way for them to keep track of who is in what course meaning in order to see who

399
00:33:04,100 --> 00:33:05,180
was added.

400
00:33:05,180 --> 00:33:11,600
We have to go back to our enrollments listing over here and we have to look and then we don't we see

401
00:33:11,600 --> 00:33:17,840
the course but then everything is mixed up yes we can do some clearing modifications and make it ordered

402
00:33:17,840 --> 00:33:20,960
by the course title and so on but it's still kind of mixed up.

403
00:33:21,350 --> 00:33:28,550
So in the next video what we will do is modify this so we'll modify our labels of course and we'll also

404
00:33:28,550 --> 00:33:33,180
modify this entire create view of that based on the course that is selected.

405
00:33:33,230 --> 00:33:41,420
We will see table below here with all of the students in that course and when we change this it will

406
00:33:41,510 --> 00:33:48,470
refresh that view or that portion of this view and show only the students relative to which course is

407
00:33:48,470 --> 00:33:50,350
selected from this dropdown.

408
00:33:50,360 --> 00:33:57,290
Also when we add a students successfully we expect to see them reflected in that list immediately.