WEBVTT 00:05.230 --> 00:11.970 In this video we're going to print the trip details using the information we have retrieved so far from 00:11.970 --> 00:13.830 the database. 00:14.130 --> 00:18.960 So we're going to be using Digic where you are the accordion feature which means that we're going to 00:18.960 --> 00:32.190 have two parts the heading parts and the diff parts. 00:32.200 --> 00:33.980 Let's go ahead and do this. 00:33.980 --> 00:37.590 Are you going to have a heading so let's go for H. 00:44.420 --> 00:47.180 And then we're going to have a Dave. 00:47.640 --> 00:50.380 And that's how we're going to build the accordion 00:54.230 --> 00:54.980 OK. 00:55.070 --> 01:03.590 So later on we're going to go back to our jobs Ku's file and write some code to make sure the accordion 01:03.680 --> 01:05.380 works. 01:05.390 --> 01:05.630 All right. 01:05.630 --> 01:14.280 So now of course a heading and a div now inside the heading we're going to print this content. 01:14.360 --> 01:19.410 So first of all we want to use the grid system. 01:19.860 --> 01:20.410 OK. 01:20.690 --> 01:23.290 So we're going to need a rope. 01:23.330 --> 01:30.690 You can give the heading itself a class row but it would work perfectly OK. 01:30.980 --> 01:39.800 Then inside the row we're going to divide our columns for us following so you can have two columns for 01:39.920 --> 01:47.330 the user and the user picture that we're going to have eight columns for the departure designation dating 01:47.340 --> 01:52.870 site and then we're going to have two columns for the price and seats available. 01:52.970 --> 01:55.940 So let's have our first Dave 02:06.170 --> 02:08.990 with a close 02:12.660 --> 02:20.380 call them as to OK because you want to call them something like that for small devices. 02:21.030 --> 02:21.360 Right. 02:21.380 --> 02:29.180 And then we're going to have another Dave with a close call some eight. 02:29.230 --> 02:31.080 We want eight columns for these. 02:31.390 --> 02:38.780 And then the last one is going to be the same as the first one because we want two columns. 02:38.980 --> 02:44.320 All right so now inside the first one I'm going to build a couple of dips and say the first day of I'm 02:44.320 --> 02:46.660 going to place the first name in the second day. 02:46.690 --> 02:47.530 I'm going to put the picture 03:03.190 --> 03:11.920 and then when we move to the next one we get to have one day for the departure another day for the destination. 03:11.950 --> 03:20.870 Another one for time and another one for the frequency. 03:21.330 --> 03:21.990 OK. 03:22.260 --> 03:28.260 Then when we go to the last one we can have three leaves one for the price one for per seat and another 03:28.260 --> 03:39.000 one for the number of seats available. 03:39.260 --> 03:42.700 OK so let's start with the first one so what's the first thing. 03:42.710 --> 03:46.890 So the value we need for the first name is right there. 03:50.890 --> 03:56.880 And let's give this a class that we can use later for styling. 04:01.780 --> 04:03.500 Driver Okay. 04:05.460 --> 04:05.700 And 04:08.610 --> 04:17.970 the next Dave is going to contain our picture so we going to have an image inside the Dave. 04:19.000 --> 04:19.640 OK. 04:19.840 --> 04:26.830 The source of image is going to correspond to the big severable 04:29.470 --> 04:30.410 OK. 04:30.890 --> 04:35.290 So we can give the image a class that we can use later to make it round like that. 04:35.330 --> 04:42.230 So let's call this class something like profile. 04:42.670 --> 04:44.140 OK prova. 04:44.900 --> 04:45.800 All right. 04:45.800 --> 04:49.290 Now let's move to the next spot. 04:49.370 --> 04:52.710 So the first Dave is going to contain the departure. 04:52.940 --> 04:53.910 OK. 04:54.140 --> 04:59.820 So these timing of the departed text the actually part the departure itself is going to be different. 04:59.900 --> 05:10.490 So as we did in the chips page we're going to place the departure inside a span elements where we can 05:10.640 --> 05:16.640 actually look at what we did in the Gets trips while. 05:17.320 --> 05:17.780 OK. 05:17.840 --> 05:26.470 So we can just copy the same code there for the departure destination climate frequency. 05:26.510 --> 05:27.290 It's very similar 05:34.200 --> 05:34.960 OK. 05:38.830 --> 05:41.570 No the volumes are going to be different. 05:41.590 --> 05:43.270 We didn't name this departure. 05:43.420 --> 05:45.310 We named this trip departure 05:57.120 --> 06:07.680 OK so I need to change this trip departure because right at the top we have another variable departure 06:13.750 --> 06:16.150 so we're going to call this trip departure 06:19.140 --> 06:25.970 the same thing applies for the destination trip destination so instead of departure. 06:25.980 --> 06:26.230 Right. 06:26.230 --> 06:38.600 That you're going to have trip departure and then we're going to have trip destination. 06:38.990 --> 06:43.440 OK so you're OK with that. 06:43.520 --> 06:55.420 We leave everything else all the T's and as we did in that file we give this party a class journey that 06:55.420 --> 06:56.450 we can use. 06:56.860 --> 07:06.010 Awesome signing Lisa. 07:06.290 --> 07:10.390 OK so now let's move to the last part. 07:10.640 --> 07:15.620 So we're going to have the price per seat. 07:15.680 --> 07:25.410 And then the seats available you can get actually the code from that. 07:25.660 --> 07:36.420 It's going to be very similar. 07:36.810 --> 07:43.060 So let's just make sure that's the variables correct. 07:45.710 --> 07:45.900 OK. 07:45.970 --> 07:51.220 So the price is price seats available is the same. 07:51.560 --> 07:58.800 OK I'm going to use these classes later to add some styling. 07:58.800 --> 07:59.630 All right. 07:59.740 --> 08:04.090 We can also add another class for this one like Journey 08:06.640 --> 08:10.340 to those we can use later to more signing. 08:10.810 --> 08:13.830 So now we are done with the heading. 08:14.020 --> 08:16.970 Now let's move to this Dave. 08:17.100 --> 08:17.550 OK. 08:17.710 --> 08:21.720 The gender telephone number and the comments. 08:22.870 --> 08:25.150 So let's give this a class 08:28.150 --> 08:32.890 more info for example. 08:32.890 --> 08:36.940 So you're going to have a Dave 08:39.710 --> 08:45.040 let's well show the gender on the telephone number then we're going to have some signing to show that 08:45.130 --> 08:52.480 nice border that we're going to have another day for the comments. 08:53.000 --> 08:58.260 So it's like the first wave of the gender 09:05.940 --> 09:07.770 using the gender variable 09:13.050 --> 09:13.520 OK. 09:13.530 --> 09:17.230 So there is no better than the telephone number in the second one. 09:19.770 --> 09:31.040 So to show this we're going to use an HMO entity so the code for rates is going to be the sound number 09:31.040 --> 09:32.910 sign. 09:32.930 --> 09:38.300 And then for these when it's going to be 9 7 4 2. 09:38.490 --> 09:39.590 OK. 09:40.350 --> 09:45.850 So if you want to find this just look for HMO entities and you will find this code. 09:45.980 --> 09:50.580 So following that we're going to have the phone number 09:54.290 --> 09:55.440 all right. 10:04.870 --> 10:08.630 Now the next one is going to be a Dave 10:13.830 --> 10:18.510 and insight that they were going to write about me. 10:27.740 --> 10:31.200 Followed by the variable containing more information. 10:35.650 --> 10:41.800 OK so I'm just going to add a clause to this date so that I can come back to it later for signing. 10:45.980 --> 10:53.620 OK so now we are actually done with the content more or less as we need to print. 10:53.630 --> 11:03.500 OK so now we are ready to send this data using AJAX and then use it to print the trip details on our 11:03.500 --> 11:04.370 page. 11:04.870 --> 11:15.800 OK so if we look at the G-code code we can see that we're going to have a div of ID search results that 11:15.800 --> 11:19.770 we're going to use to show even error or show trips. 11:20.000 --> 11:28.220 So let's just change the ID of the div that we're trying to print. 11:32.120 --> 11:35.660 OK so instead of search results this call is something like. 11:37.200 --> 11:37.990 Trip results 11:41.920 --> 11:51.400 OK so let's save go back to the AJAX call. 11:51.590 --> 11:57.550 So if the call is successful we're going to use the returned data to fill that Steve. 11:57.800 --> 12:07.720 So we're going to access the div using his ID which is search results. 12:15.350 --> 12:23.290 Then we're going to change email contents to what is returned to us. 12:23.340 --> 12:27.100 OK so there's going to be either the trips or an error message. 12:27.840 --> 12:28.430 OK. 12:30.510 --> 12:36.360 And then we need to use the accordion function. 12:36.360 --> 12:41.490 So we're going to need the accordion method. 12:41.490 --> 12:49.500 So first we're going to need to select a div which is the Dave Id trip results 12:54.960 --> 12:58.800 and then we're going to use the accordion method. 13:02.260 --> 13:07.270 You can play some promises inside the coding method. 13:07.550 --> 13:09.790 We'll come back to options later. 13:09.790 --> 13:10.480 All right. 13:10.480 --> 13:19.370 So now we're going to have a quick look at our code and make sure everything is OK before we test it. 13:19.480 --> 13:27.650 So let's have a look at our search those PSP file. 13:27.880 --> 13:29.080 Quite a few things. 13:29.320 --> 13:29.880 Yeah. 13:33.430 --> 13:42.370 So I've got a semi cool on missing that right now it's grown up. 13:42.370 --> 13:45.910 Somebody is going to check the query and make sure that everything is OK. 13:46.180 --> 13:47.850 So that's the beginning of the query. 13:47.860 --> 13:54.740 We need to make sure there is a space before adding the extra RBI's on rates. 13:54.800 --> 13:58.070 You've got a space there and that's fine. 13:58.480 --> 14:00.340 I know that. 14:00.490 --> 14:08.280 Now if the query is not successful we're going to write unable to execute the query and we're going 14:08.280 --> 14:10.140 to use the function key a. 14:10.200 --> 14:15.690 It's more like a bit of Rose. 14:15.700 --> 14:20.680 OK so it is save and try this and see if we get any errors. 14:21.920 --> 14:29.320 So let's try from Bedford to London. 14:29.330 --> 14:34.540 OK so now Noori Joni's so we can see just the query has been successful. 14:34.700 --> 14:37.590 Okay no areas to show. 14:38.060 --> 14:42.970 If we check the database at the moment we only have one trip so this a trip there. 14:42.980 --> 14:50.060 So it's on this trip from Bedford to London. 14:57.930 --> 14:58.300 OK. 14:58.310 --> 15:05.070 Let's also add another one plus benefits so Kempson is ridiculous. 15:05.080 --> 15:09.450 Bedford to London as well. 15:23.370 --> 15:24.560 Gay and 15:27.410 --> 15:28.330 it's another one 15:31.260 --> 15:34.100 you got a little problem here. 15:34.300 --> 15:40.690 So when I open the form again these fields are not hidden. 15:40.690 --> 15:43.380 So we're going to go back to the doves because while in a bid to fix this. 15:43.820 --> 15:51.690 Well if we refresh the page and open that the model for the first time they are all hidden. 15:51.830 --> 15:52.300 OK. 15:52.460 --> 15:57.920 So when we reopen this we are supposed to have them all hidden. 15:58.010 --> 15:58.470 OK. 15:58.590 --> 16:09.680 So when I got a couple of trips I would just go back to the search page and try again to London and 16:09.720 --> 16:10.610 see what we get. 16:13.340 --> 16:14.770 OK so you can see some of these holes there. 16:14.770 --> 16:15.990 That picture is very big. 16:16.040 --> 16:16.500 OK. 16:16.550 --> 16:19.950 Because we didn't of any signings with that picture. 16:20.020 --> 16:21.530 That's OK. 16:21.530 --> 16:22.080 All right. 16:22.220 --> 16:29.730 So let's just do something here about that picture and see what we're going to get. 16:32.140 --> 16:36.930 If we look at the picture we gave it's a close 16:39.370 --> 16:45.350 profile so it's opened the signing file and signed. 16:45.370 --> 16:51.390 That's close. 16:51.520 --> 16:56.790 Let's set the height to auto. 16:56.790 --> 17:04.040 Also let's says the muxing way to 100 percent 17:06.940 --> 17:07.950 that's going to be the magazine. 17:08.010 --> 17:14.330 It's going to be able to take inside the containing elements and also to make that picture around. 17:14.390 --> 17:14.750 On. 17:14.790 --> 17:16.350 A border radius 17:18.990 --> 17:23.110 of 50 percent. 17:23.110 --> 17:32.530 So now if we try again. 17:32.570 --> 17:33.760 All right so that looks better. 17:33.980 --> 17:37.260 So we still can see the accordion feature. 17:37.510 --> 17:39.040 Ok working. 17:39.460 --> 17:43.510 And that's because we haven't included the deejay where are you on the links here. 17:43.700 --> 17:47.810 So we've done we've done that already inside our chips page 17:50.760 --> 17:56.410 so let's open that page and copy the links from the 18:01.760 --> 18:04.300 Tripps page is right there. 18:05.010 --> 18:18.430 So the links right there so you call the scripts the CSA is a link to his copy that's Blasius inside 18:18.640 --> 18:19.550 index. 18:20.080 --> 18:21.060 Those people 18:26.150 --> 18:29.670 right now they save and try again. 18:37.150 --> 18:38.620 And it doesn't work again. 18:38.660 --> 18:45.910 And the reason why is because we need to place the day dictionary files on top of the G.A.R. you iPhones 18:45.950 --> 18:49.910 because equity why needs equerry to function. 18:49.910 --> 18:56.480 So I'm going to take the scripts from the bottom of the page and going take also the drop jobs because 18:56.490 --> 19:01.680 files I'm going to place them before Jake. 19:08.920 --> 19:13.220 So let's say and try are again. 19:18.690 --> 19:20.490 Now it looks better. 19:20.520 --> 19:21.020 All right. 19:23.150 --> 19:27.920 So in the next video we're going to tidy up these elements and the reason we of signing.