WEBVTT 00:05.450 --> 00:11.440 In this video we go into the spin of effects to get Tripps function in the tips page and then we get 00:11.440 --> 00:15.220 to do the same thing in all the other schools in the state. 00:15.250 --> 00:19.320 So first of all we're going to show this painter. 00:19.560 --> 00:20.150 OK. 00:21.880 --> 00:24.910 So we're going to use the same code we used earlier. 00:25.090 --> 00:29.600 So first of all the show has been going to use last bits. 00:30.070 --> 00:30.960 OK. 00:31.060 --> 00:38.590 When we load the code there is no results to hide because the page is going to load from scratch. 00:38.590 --> 00:46.480 So we're going to use those bits now when we get a response from the server then we're going to hide 00:46.690 --> 00:47.340 the spinner 00:57.640 --> 01:07.000 and once we take the contents of our trips then we're going to show the chips using some animation. 01:07.060 --> 01:09.950 So let's use the fading animation 01:16.550 --> 01:17.140 like this 01:25.000 --> 01:34.690 now and save our code and Shite's so you can see the spinnet appearing there but we don't see the fade 01:34.690 --> 01:36.120 in effect. 01:36.760 --> 01:40.880 So let's hide the elements. 01:44.700 --> 01:46.710 Before using the fade method 01:51.760 --> 01:53.080 I always do the same thing. 01:53.130 --> 01:55.350 Right. 01:55.680 --> 01:57.820 So you save and try again. 01:58.970 --> 02:01.260 OK so worth an experiment right. 02:03.240 --> 02:07.600 OK so we're going to do exactly the same thing to all the other eight schools. 02:07.710 --> 02:21.510 So we've got this form here for adding a chip so let's look for code or creating a new trip. 02:21.580 --> 02:26.690 OK so that's where we submit the form. 02:26.940 --> 02:30.520 Well actually we may see it right there. 02:30.840 --> 02:36.220 OK so when we send me the form we're going to show the spin 02:41.920 --> 02:45.310 also hide the results or the error message. 02:47.850 --> 02:49.080 So the error message 02:52.150 --> 02:57.970 has gotten really de which is trick message. 02:59.860 --> 03:03.880 All right so now we show the spin. 03:03.910 --> 03:07.960 We we've hidden the message. 03:08.570 --> 03:10.760 And once we get the response from the server 03:13.650 --> 03:16.070 OK we're going to hide the spin 03:35.740 --> 03:36.960 OK. 03:37.040 --> 03:38.670 We only need it there. 03:42.290 --> 03:46.300 Because we're going to be showing a message. 03:46.300 --> 03:54.090 We are not going to need that here OK because we're going to hide the model anyway. 03:58.530 --> 04:00.960 All right. 04:01.080 --> 04:02.680 We need that as well. 04:06.380 --> 04:09.310 OK I know we've had in the subpoena. 04:09.440 --> 04:14.690 Now we need to have some animation for the message. 04:15.490 --> 04:19.570 OK we're going to use the slide slide down method again. 04:21.720 --> 04:27.690 So once we said the contents of the message we'll use the slide down method. 04:33.340 --> 04:34.440 And do we that. 04:34.740 --> 04:36.510 And there as well. 04:37.350 --> 04:39.690 So let's say try carried 04:44.680 --> 04:48.000 OK so I can see this piano and I can see the animation. 04:48.250 --> 04:49.630 Perfect. 04:49.870 --> 04:55.430 All right so now let's do this same thing with the edits form. 04:56.570 --> 05:09.560 So it's copy this code for hiding the spina or let's start with showing the spirit and hiding the results 05:09.560 --> 05:12.580 message or the error message. 05:12.620 --> 05:17.260 So let's look for code submitting it is for 05:42.130 --> 05:42.440 OK. 05:42.440 --> 05:43.400 It's right there. 05:43.770 --> 05:46.620 So once you submit the form we are going to 05:49.320 --> 05:53.820 show this paper and then hide the results message. 05:53.820 --> 05:56.930 And this is the idea of the message OK. 05:58.250 --> 06:02.580 So actually we don't need to empty it once we've hidden it's OK. 06:02.580 --> 06:03.990 So I'm just going to take these out. 06:04.010 --> 06:07.220 We're now going to keep you just in case. 06:07.220 --> 06:10.150 OK we're going to test the code and see how it goes. 06:12.340 --> 06:16.240 Now let's see where are we going to get a 06:19.060 --> 06:21.780 response from the server. 06:21.840 --> 06:23.490 So we are actually calling this function 06:26.580 --> 06:34.350 which is defined right there and the response will be received right there. 06:34.380 --> 06:38.380 So now once we get a response we're going to hide the spin 06:43.720 --> 06:44.860 OK. 06:45.110 --> 06:49.880 And with that as well as the success case and that's the case. 06:49.910 --> 06:50.260 OK. 06:50.300 --> 06:56.390 So now if he didn't I was once we change the e-mail contents of the error message we're going to show 06:56.390 --> 07:00.620 the message using some animation slide and animation. 07:00.650 --> 07:05.100 Again and we can do the same thing. 07:05.220 --> 07:06.430 Right. 07:08.710 --> 07:09.340 OK. 07:09.870 --> 07:13.300 So now it's save this try our code 07:18.690 --> 07:21.830 here is spina. 07:21.870 --> 07:24.470 OK so the idiots were successful. 07:24.600 --> 07:25.210 OK. 07:25.320 --> 07:29.040 That's why we can see this page. 07:29.040 --> 07:37.150 Now let's try something and just some something incorrect. 07:37.420 --> 07:42.810 And you can see the error message that you could see the spinner appearing before. 07:42.810 --> 07:46.840 All right so now let's move to the release process and do exactly the same. 07:46.950 --> 07:48.680 Now you must be familiar with this. 07:48.750 --> 07:50.570 I'm going to do it quickly. 07:50.820 --> 07:53.790 So the delete process 08:09.110 --> 08:12.250 is right there. 08:12.580 --> 08:13.120 OK. 08:16.960 --> 08:22.000 So once we click on the button we're going to show this spinner 08:30.170 --> 08:32.360 and hide any error messages. 08:38.140 --> 08:44.150 The error message is edited message. 08:44.380 --> 08:52.620 And once we get a response from the server then we're going to height the spinner 08:57.630 --> 08:59.710 they do. 09:01.170 --> 09:02.190 And there as well. 09:07.450 --> 09:13.960 And also we are going to some animation to show the error message. 09:14.000 --> 09:16.120 Once we change its HMO content 09:19.200 --> 09:21.950 then again I'm going to use the slide down method. 09:26.020 --> 09:26.460 It's 09:34.780 --> 09:36.080 OK so I say this 09:41.460 --> 09:43.130 let's try our code. 09:47.760 --> 09:52.750 So if I click on the release Musson here we go. 09:52.750 --> 10:03.770 So we can see the spin appearing first before showing the Tripps message or the tips page again. 10:04.830 --> 10:05.460 All writes 10:09.070 --> 10:09.320 OK. 10:09.330 --> 10:19.140 So just one comments we're going to place the statements hide in the spinner right after right at the 10:19.140 --> 10:21.000 beginning of the success function. 10:21.000 --> 10:25.840 Just make sure that it's gets hidden straightaway. 10:27.840 --> 10:28.650 OK. 10:29.120 --> 10:32.140 Because that's where we get the response from the server. 10:32.270 --> 10:34.270 So we're going to hide this pain straight away. 10:34.280 --> 10:36.690 And the same thing it plays that. 10:37.190 --> 10:44.450 OK so whenever we have a success function we're going to make sure that we highlight the spinner right 10:44.450 --> 10:45.170 after it. 10:45.240 --> 10:50.320 So let's just make sure as we did the same thing in all the other cases so we're going to tell you that 10:50.330 --> 11:00.050 as well when I do x twice straight after state streets at the beginning of the function OK. 11:12.540 --> 11:13.160 There as well 11:31.180 --> 11:32.530 OK we don't need it. 11:32.620 --> 11:33.890 We don't need to do that. 11:33.970 --> 11:34.620 OK. 11:34.830 --> 11:44.070 Because that's to get the details of the trip as you would like to end is. 11:45.090 --> 11:45.450 OK. 11:45.510 --> 11:47.490 So it all looks good. 11:47.490 --> 11:49.440 All right so notice save. 11:49.840 --> 11:55.860 Well right now we managed to finish all the functionalities of our Web sites including looking for drapes 11:56.790 --> 12:01.520 adding drapes editing drapes deleting them and so on in the next video. 12:01.590 --> 12:04.190 We're just going to add some final touches to our Web site. 12:04.320 --> 12:06.450 And then our projects is going to be complete.