WEBVTT 00:05.450 --> 00:07.990 In this video we're going to build the spinner. 00:08.040 --> 00:11.410 All Luda less you would see once you submit the form. 00:11.430 --> 00:20.220 So if we look for trips going from Washington to Toronto for example once we click on the search button 00:20.400 --> 00:23.020 first you will see a spin appearing there. 00:23.250 --> 00:25.690 And then we can see our results there. 00:26.000 --> 00:26.520 OK. 00:26.670 --> 00:29.140 So the way it works is as following. 00:29.340 --> 00:32.560 We know that's of course an AJAX call. 00:32.720 --> 00:38.070 As we said to the server once we submit the form using javascript. 00:38.070 --> 00:45.070 So while we are waiting for a response from a server the Spillar is going to say right there. 00:45.720 --> 00:48.460 So once we submit the form dispirit we appear. 00:48.850 --> 00:54.350 And then once we get the response the spinner is going to disappear and then we can see our results 00:54.350 --> 00:55.120 then. 00:55.800 --> 01:03.410 So it is something where we record trips in the table. 01:03.510 --> 01:07.280 So if I click on a search I wasn't going to see a spinner. 01:07.570 --> 01:12.330 And then once I get a response from the server then I can see my trips that pig. 01:12.440 --> 01:14.280 You can also see some animation here. 01:14.340 --> 01:17.210 So the chips actually they are fading in. 01:17.790 --> 01:24.120 OK so first of all we're going to build the speed which is that Ishmail elements with a picture inside. 01:24.530 --> 01:31.530 Then we get to some styling so as to place it in the middle of the page and then we can then write some 01:31.620 --> 01:36.870 javascript code which will show the spinner. 01:36.870 --> 01:43.310 Once we submit the form and we'll hide it once we get a response from the server. 01:43.860 --> 01:50.320 So to get these pinna or LoDo you could just go to Google and type Loewy generator. 01:50.610 --> 01:59.590 There's a good web site for this Ajax load those info so you can generate a loader and download it. 01:59.860 --> 02:00.500 OK. 02:00.780 --> 02:08.040 So once you download the one you're like OK I'm going to stop here. 02:08.220 --> 02:14.340 Then you can go to your GP upload the file to them. 02:14.630 --> 02:15.730 Here is my files. 02:15.780 --> 02:18.910 We're going to play is OK. 02:18.990 --> 02:21.860 And now I can use the file 02:25.510 --> 02:35.350 OK so I'm going to go to my index those two BHB file and rise of the end of the body elements and then 02:35.350 --> 02:43.450 it creates a new elements. 02:43.680 --> 02:44.720 I'm going to call it. 02:45.130 --> 02:56.690 It's been all right so let's create a div give it to the spinner Insley. 02:56.710 --> 03:05.060 Dave I'm going to create a picture and image. 03:06.680 --> 03:09.710 So let's give it a source that's a beaut. 03:13.020 --> 03:14.190 So I'm going to use 03:17.140 --> 03:17.900 this file. 03:17.950 --> 03:18.670 He jokes. 03:18.700 --> 03:22.640 Lluvia don't get. 03:23.100 --> 03:25.150 OK. 03:25.250 --> 03:31.770 And let's set some limitations to the image so I'm going to go for a way of 03:34.430 --> 03:39.840 64 a height of 64 as well. 03:45.420 --> 03:46.910 OK. 03:47.660 --> 03:51.130 Now let's add some styling to our image. 03:55.950 --> 03:59.640 Let's go to the styling file. 03:59.980 --> 04:04.710 Let's go from the file. 04:06.720 --> 04:17.910 Ok so I'm going to select the spinner using its ID. 04:18.110 --> 04:24.500 So first of all we want the spin to be hidden by default so we can use the display property and set 04:24.500 --> 04:26.340 it to none. 04:26.390 --> 04:27.090 OK. 04:27.410 --> 04:34.500 Also to make sure that the screen is placed in the middle of the page like that. 04:34.940 --> 04:38.570 OK I'm going to go for a fixed position. 04:38.660 --> 04:44.060 I'm going to set all the attributes top left bottom and right to zero. 04:44.430 --> 04:44.880 OK. 04:45.020 --> 04:54.290 So position fixed that all the attributes top 0 bottom 04:57.660 --> 05:00.560 left zero and right zero 05:04.010 --> 05:04.350 right. 05:04.360 --> 05:08.950 Now this gives a height of 85 pixels variances. 05:09.400 --> 05:10.220 OK. 05:10.340 --> 05:15.830 And two centuries I'm going to use both the Marje improperly and they text align properly. 05:16.120 --> 05:21.250 So just remember that the image is inside the Despina actually styling. 05:21.400 --> 05:31.310 So I'm going to said the merging property to auto and the text align to center OK. 05:31.530 --> 05:38.380 So for now I'm going to Colman's the display properties so that you can see div. 05:39.240 --> 05:44.700 OK so let's save and refresh the page. 05:44.770 --> 05:47.830 OK so now we can see a spinner in the middle of the page. 05:47.860 --> 05:49.460 All right. 05:49.510 --> 05:55.910 All right so now let's go back so I display property. 05:56.040 --> 05:57.220 Now we can see. 05:57.440 --> 05:59.850 Right so now using equerry. 06:00.530 --> 06:08.600 When we submit the form we're going to show this painter and then when we get a response from the server 06:08.930 --> 06:11.440 we're going to hide this pain. 06:12.050 --> 06:14.110 OK. 06:14.300 --> 06:23.130 So before I continue we're going to use the same spinner inside the tips page guys you can see it has 06:23.130 --> 06:27.290 been appeared briefly before these trips showed up. 06:27.400 --> 06:31.180 So we're going to use the same styling. 06:31.180 --> 06:35.010 So they just copy the simple content 06:39.090 --> 06:50.990 foregoing head I am just going to add some text of a line break saying noting like this is Copi this 06:51.070 --> 06:55.220 is shemale elements to the ship's page. 07:02.540 --> 07:06.810 So that's spin. 07:07.610 --> 07:12.360 OK so save let's go back to the index page file. 07:12.360 --> 07:18.900 So now we said we're going to go to the jobs case file and when we submit the form that's the search 07:18.900 --> 07:19.400 form. 07:19.560 --> 07:23.680 So once we submit that we're going to show the spin. 07:24.030 --> 07:24.930 OK. 07:25.140 --> 07:27.910 We're going to show the screen right there. 07:28.590 --> 07:37.460 And then once we get a response from the server using Ajax then we're going to hide the subpoena 07:40.710 --> 07:45.470 that will also hide it. 07:45.620 --> 07:50.470 If you go in error before showing the result the error message 07:54.610 --> 07:59.850 so to show the subpoena we're going to select this using its I.D. 08:02.740 --> 08:11.210 which is subpoena then we're going to use the show method to hide it. 08:11.320 --> 08:20.700 We're going to use the hide method. 08:21.890 --> 08:26.650 OK so it's save Don't try this. 08:26.750 --> 08:31.700 So you just click if I just click without having any elements then we can see the error message. 08:31.870 --> 08:42.450 After the subpoena appears for a while they would try something we'd call records then you'll see the 08:42.450 --> 08:46.920 subpoena appearing before the ships show up. 08:46.920 --> 08:48.100 OK. 08:48.480 --> 08:54.330 Now let's on some animation to our results so you can see those strips. 08:54.370 --> 08:58.510 They are actually fading. 08:58.810 --> 09:03.160 One is have a look inside the final Web sites. 09:09.770 --> 09:11.330 Ok is it actually fitting. 09:11.370 --> 09:15.030 And if you've got them already there then they will disappear. 09:15.190 --> 09:18.100 It would fade out and then they were fading. 09:18.310 --> 09:30.830 OK so to do this once we hide one once we show the subpoena we're going to fade out the trips if. 09:31.090 --> 09:31.450 So 09:35.320 --> 09:47.070 you know hide results and it selects the div containing our trips or error message. 09:48.360 --> 09:50.640 The idea of Steve was 09:53.620 --> 09:54.610 search results 10:03.790 --> 10:08.210 and let's use the fatales method. 10:13.190 --> 10:19.790 And once we get the response from the server we're going to show the results of hiding the subpoena 10:23.070 --> 10:27.320 we're going to use the fade in method. 10:35.540 --> 10:40.680 OK so we will tell you the e-mail content first and then show the results. 10:48.100 --> 10:49.110 Like this. 10:49.220 --> 10:52.100 Sort of save and try OK. 10:56.520 --> 10:57.150 OK. 10:59.880 --> 11:04.070 Well actually we don't need to hide 11:07.290 --> 11:08.150 the results 11:15.410 --> 11:15.930 you get 11:30.110 --> 11:36.910 like I will need to hire them actually because if you use the fade in method 11:39.520 --> 11:41.990 while the element is already there. 11:45.440 --> 11:49.400 Then it's not going to work again. 12:01.870 --> 12:09.210 So it does appear first and then the fading. 12:09.420 --> 12:09.690 All right. 12:09.700 --> 12:11.780 Now let's move to the other Ajax goals. 12:11.800 --> 12:15.210 Let's go to the sign up process. 12:15.700 --> 12:23.890 So if I log out and then try to sign a form like this then it can see a nice animation where this error 12:23.890 --> 12:26.690 message is sliding down. 12:26.710 --> 12:34.200 It's going to be the same process so you can see the spinner appearing the. 12:34.540 --> 12:34.920 OK. 12:35.110 --> 12:38.920 So let's try this. 12:39.120 --> 12:40.440 So we're going to go to the Sign-Up 12:42.940 --> 12:56.100 submission code so right at the top once we submit the form we want to hide the spinner. 12:56.190 --> 12:59.280 I'm going to copy that. 12:59.470 --> 13:03.980 And also we're going to hide the error message 13:09.380 --> 13:15.970 so he's showing the spinner and we hiding the error message so the idea of the message is this. 13:16.100 --> 13:16.860 Instead of down. 13:16.940 --> 13:25.120 We're going to use just a hide method here because we just want to hide it. 13:27.190 --> 13:31.420 And then once we get a response 13:36.950 --> 13:40.130 we need to hide the spinner 13:47.770 --> 13:51.280 and then once we fill the ASML contents of the error message 13:54.300 --> 14:03.480 well the success message then we're going to show the message using a nice slow slide down animation. 14:03.480 --> 14:07.770 So to do that we're going to use the slide down method 14:12.710 --> 14:13.920 OK. 14:15.070 --> 14:24.700 And then it would seem that if you got an error good to hide this spinner that we're going to feel the 14:24.750 --> 14:31.100 simple content and show the elements using the slide down animation save Troy our code 14:35.060 --> 14:39.770 say free choice sign up. 14:39.910 --> 14:42.270 OK so we can see the spinner. 14:42.630 --> 14:43.220 OK. 14:43.390 --> 14:50.410 So the reason why is because the spin that is actually hidden behind the model is a fixed base we can 14:50.590 --> 14:56.170 add a really big Zad index to the spinner so that it shows on top of the model. 14:56.380 --> 14:58.170 So let's go back to the styling file. 14:59.460 --> 15:06.990 And that index go for something really big like one thousand one hundred. 15:08.000 --> 15:16.990 So now if we save the page and try again you can see it's been appearing before the slide down. 15:17.160 --> 15:17.940 OK. 15:18.480 --> 15:23.250 All right so now let's move to the logging process and do exactly the same thing. 15:23.240 --> 15:26.120 So when it could be this bit. 15:26.260 --> 15:33.020 So once we submit the form we show it has been and we hide the error access message. 15:35.640 --> 15:40.770 Change the idea of the message and then once we get the response 15:43.680 --> 15:47.460 in that case before showing the log in message 15:50.560 --> 15:52.280 going to hide this pain the 16:01.630 --> 16:04.020 same thing in place that. 16:04.230 --> 16:10.560 And then once we change the e-mail contents of the message we're going to show the message using a slide 16:10.580 --> 16:11.260 don't you mention 16:27.530 --> 16:27.780 OK 16:31.490 --> 16:33.130 so now. 16:33.690 --> 16:35.120 Well let's try this. 16:35.120 --> 16:36.130 Make sure these works 16:42.500 --> 16:43.620 OK. 16:44.600 --> 16:51.050 All right so now let's move to the Fuegos password process. 16:51.050 --> 16:52.700 So you need to be exactly the same. 16:52.700 --> 16:55.210 So I was going to copy paste the same code for now 17:00.620 --> 17:09.460 change the ID with the message and then if you're a success we're going to hide this pinna 17:12.880 --> 17:17.330 same thing that if you want to show the 17:19.820 --> 17:24.830 message once we take you to simple content we're going to slide the message down. 17:37.480 --> 17:37.910 OK. 17:38.040 --> 17:38.900 So save. 17:39.050 --> 17:41.780 Now we're going to do the same thing in the chips Bache 17:48.610 --> 17:51.970 So let's see 17:54.700 --> 17:56.920 OK so the first thing we're going to do is 18:12.810 --> 18:19.770 when we load the page OK we want to show the spinner and then show the trips just like this 18:24.340 --> 18:29.730 so you can see the speed it appears and then the trip's actually fading. 18:30.230 --> 18:35.070 So we're going to be looking at the get Tripps function. 18:35.730 --> 18:38.810 So it's a function. 18:38.950 --> 18:43.190 So we define It's right there. 18:43.590 --> 18:44.330 OK. 18:45.000 --> 18:48.200 We'll continue changes to this function in the next video.