WEBVTT 00:05.700 --> 00:10.490 In this video we're going to write code to edit a specific trip. 00:10.860 --> 00:17.420 OK so Eddie's a trip we need to click on the Edie's button which is located inside that tree. 00:17.820 --> 00:18.720 OK. 00:19.350 --> 00:24.030 And then once we click that button we can see all the details related to that tree. 00:24.400 --> 00:30.180 Then after that we can amend any of these those details and then click on the Edit button or we can 00:30.180 --> 00:33.180 click on the list wasn't the least the. 00:33.270 --> 00:34.040 All right. 00:34.270 --> 00:43.000 So first of all we're going to need to find a way to get the trip details once we click on that. 00:44.500 --> 00:45.350 OK. 00:45.660 --> 00:55.070 So the way we're going to do that is following when we click on that doesn't open the model we need 00:55.070 --> 01:01.430 to know what's opened this model. 01:01.460 --> 01:12.450 In other words we need to know the button that the user clicks on in order to open the model. 01:12.470 --> 01:15.620 OK so we're going to select the module and then find that button. 01:15.710 --> 01:22.770 There is something quite practical we can use here it's called relator target. 01:22.780 --> 01:30.490 It's a property of the event objects and it will tell us was a button we clicked on to open the model. 01:30.490 --> 01:36.730 So once we find that it wasn't then we going have access to the trip I.D. which is located inside the 01:36.730 --> 01:37.570 button. 01:37.570 --> 01:41.990 If you remember we place the inside a data attributes data trip ID. 01:42.490 --> 01:44.540 OK so now we've got the idea of the trip. 01:44.710 --> 01:51.010 So to get the details of the trip we could have sent a call to APHC file and then run a query and then 01:51.100 --> 01:54.740 we get the details of that trip. 01:54.780 --> 02:04.760 Now on the PSP site will we be able to retrieve all the details of that specific trip but it's not going 02:04.760 --> 02:12.590 to communicates with the javascript side because we need to find a way to pass the data from BHB to 02:12.590 --> 02:13.670 javascript's. 02:14.000 --> 02:14.860 OK. 02:15.170 --> 02:16.190 So what are you going to do. 02:16.200 --> 02:25.710 We're going to encode data as a data on formats or the BHB site. 02:25.730 --> 02:32.150 So one once we receive it or the javascript site we can just pass the data and transform it to a javascript 02:32.210 --> 02:37.730 array and then use that array to fill the form fields. 02:37.730 --> 02:38.550 OK. 02:39.410 --> 02:40.940 So that's what we're going to be doing. 02:40.940 --> 02:44.580 In summary So let's go ahead and write all these code 02:49.750 --> 02:59.950 so we can write code for clicking on the Edit button inside a trip. 03:00.420 --> 03:04.970 So first of all we're going to select the model. 03:04.980 --> 03:07.870 So you get to select this using its ID. 03:08.080 --> 03:15.780 So the ID of the edit module is this one. 03:17.070 --> 03:19.880 So. 03:20.170 --> 03:24.990 So we want to write code once the module shows. 03:25.030 --> 03:25.330 OK. 03:25.330 --> 03:30.730 So are going to use the on method. 03:30.880 --> 03:38.030 So the event is show Daut vs the model. 03:38.270 --> 03:39.160 Okay. 03:39.920 --> 03:49.000 And then we can have the second promiser as a function and is going to have a barometer event that we 03:49.000 --> 03:50.230 will use later. 03:51.430 --> 03:53.710 OK so first of all 03:59.730 --> 04:02.820 we are going to remove any errors. 04:03.060 --> 04:03.450 OK. 04:03.540 --> 04:06.990 We would have in the area. 04:07.470 --> 04:09.020 So we going to access the area Dave. 04:09.040 --> 04:09.640 Or does 04:12.520 --> 04:15.470 remove any errors from that error. 04:15.480 --> 04:19.630 Dave has got an ID editrix message 04:25.550 --> 04:26.030 OK. 04:26.220 --> 04:27.610 So we emptied that message. 04:27.710 --> 04:34.200 All right now we got to look for the button which opened this module. 04:34.350 --> 04:37.110 So to do that we are going to use the event object. 04:37.540 --> 04:38.170 OK. 04:38.330 --> 04:42.630 I said earlier there is a property called related target. 04:42.930 --> 04:52.140 So this related targets will refer to the button but we clicked open the module so it is this inside 04:52.170 --> 04:53.240 a variable. 04:53.300 --> 04:54.220 I'm going to call it 04:58.500 --> 04:59.100 Invoca 05:17.530 --> 05:27.220 just a common event. 05:27.360 --> 05:30.330 All right so now we know that's inside this button. 05:30.360 --> 05:34.150 We've got a beauty with the ID of our trip. 05:34.250 --> 05:41.340 Now let's send the AJAX call to a file which will get the details of that trip. 05:41.430 --> 05:42.810 OK. 05:51.440 --> 06:06.590 So it is copy AJAX call from someone else. 06:07.700 --> 06:11.050 OK so you r l here is going to be the name of the file. 06:11.090 --> 06:14.830 So we're going to create a new file for this. 06:15.050 --> 06:22.520 So I'm going to call it get trip details those BHP 06:26.910 --> 06:27.770 it's open it's 06:32.420 --> 06:33.130 OK. 06:33.340 --> 06:36.480 And let's go back to this case file. 06:39.400 --> 06:40.310 Placing next to it 06:55.180 --> 06:59.110 so the name of the file is get trip details. 07:00.320 --> 07:01.370 OK. 07:01.740 --> 07:03.520 That's the method. 07:06.250 --> 07:08.230 Going to use the first method. 07:12.200 --> 07:20.340 And the data to send here is going to be the ID of the trip. 07:20.360 --> 07:25.020 So now with the ID of the trip is inside the button Invoca. 07:25.540 --> 07:26.140 OK. 07:30.760 --> 07:37.120 So we got to call the elements we would like to send Trippe ID. 07:37.390 --> 07:41.460 And that's the name that's going to be processed by this file. 07:41.800 --> 07:42.850 OK. 07:43.000 --> 07:46.600 So you get a caller id and the value is going to be 07:50.540 --> 07:52.870 Invoca dought. 07:53.130 --> 07:55.700 And now we get to access the data as abuse of the button. 07:55.980 --> 07:59.640 So data as abuse is called 08:21.630 --> 08:25.100 is called data chip ID. 08:25.430 --> 08:26.080 OK. 08:26.370 --> 08:32.800 So to access this data we will need 08:38.850 --> 08:49.410 to use the data method and place inside this method chip ID. 08:49.420 --> 08:50.340 All right. 08:50.550 --> 08:58.180 Now of course our data right so now if the AJAX call is successful. 08:58.710 --> 09:08.720 So for now all we going to do is print the return data in the console just see what you've got. 09:08.810 --> 09:09.700 OK. 09:10.380 --> 09:18.210 If there is any error then we are going to go to the editorship message and say you cause an error say 09:18.270 --> 09:18.920 save. 09:18.930 --> 09:21.450 Now let's go to the PSAP file. 09:25.290 --> 09:30.230 So first of all it starts a session and connect as we did in the other files. 09:40.420 --> 09:44.820 Ok now we are ready to create a query. 09:45.800 --> 09:51.850 So the query is going to select the trip using his ID. 09:52.440 --> 10:04.680 So the syntax is going to be select records from our table cache trips. 10:04.850 --> 10:08.000 The condition is that the trip Id 10:10.660 --> 10:11.580 much is 10:21.910 --> 10:32.610 this one which was sent using the method. 10:32.660 --> 10:34.970 So that's the key. 10:35.660 --> 10:36.110 OK. 10:36.200 --> 10:44.560 Inside the post Eric. 10:44.770 --> 10:45.720 OK so it's OK. 10:45.760 --> 11:06.610 So now let's run the query and store the result inside a result variable. 11:06.610 --> 11:11.050 Now let's check if the query has been successful. 11:11.050 --> 11:11.950 So if 11:16.510 --> 11:17.520 it is the opposite. 11:17.520 --> 11:29.420 So if it's more successful then you're going to echo something like Eric. 11:30.040 --> 11:39.840 Otherwise we're going to define a variable row where we're going to store the single line that we are 11:39.850 --> 11:42.180 causing inside the results objects. 11:42.190 --> 11:42.920 OK. 11:42.970 --> 11:56.860 So are you going to use the fetch array function. 11:57.150 --> 11:58.100 And we can add 12:02.610 --> 12:06.640 why is going to happen it's very. 12:06.850 --> 12:08.880 All right. 12:08.980 --> 12:19.640 Now are going to encode this array in a just on for months and then echo it to be sent to the javascript 12:19.710 --> 12:20.240 file. 12:20.440 --> 12:31.590 So we're going to echo the array but could it Jaiswal to do that we're going to use Jason in code. 12:31.600 --> 12:43.120 So this is a function as well encode array to Jason. 12:43.140 --> 12:46.830 OK so let's save let's go back to the age of school. 12:52.430 --> 12:56.730 And let's see what we get. 12:56.730 --> 13:00.950 So before we move on let's just check out the book looks like. 13:01.080 --> 13:11.400 So I'm just going to comment the Ajax code for now and just alerts the Invoca 13:14.370 --> 13:17.480 to make sure we're doing the right thing. 13:23.920 --> 13:29.500 So let's try this. 13:29.740 --> 13:35.030 OK so here goes here an object a shemale Butson elements. 13:35.320 --> 13:39.310 OK so if we bring this in the control 13:44.290 --> 13:52.680 what do we get. 13:52.680 --> 13:59.680 OK so we can see here the H.M. code of the button. 13:59.700 --> 14:06.320 So basically this is what event DOS related targets will give us. 14:06.330 --> 14:11.470 So in order for us to select the button itself we will need to select this. 14:11.760 --> 14:14.970 So we're going to add a dollar sign like that's 14:19.210 --> 14:28.360 OK and now we'll be able to actually use the button and go inside the Musson and get the data attributes 14:28.660 --> 14:30.260 from the button. 14:30.930 --> 14:44.920 Ok so now it's an Common's the Ajax call let's save and try our code so let's open the console again. 14:46.810 --> 14:47.230 OK. 14:47.280 --> 14:48.780 So this is what we get. 14:48.900 --> 14:56.780 So we can see the dates on formats as has been returned to us from the PSP file. 14:56.970 --> 15:01.930 So we'll need to use this data to fill the edits form. 15:02.250 --> 15:08.740 But before we do that we'll need to use a format that we can manipulate using javascript's. 15:09.040 --> 15:09.560 OK. 15:09.720 --> 15:16.000 So what are we going to do we are going to transform this format to an array because we can easily manipulate 15:16.030 --> 15:17.140 arrays. 15:17.970 --> 15:26.210 So to do this we're going to use a method of data on the adjacent object 15:29.290 --> 15:33.490 which is called phos OK. 15:33.730 --> 15:43.860 So this method is going to take as a barometer our return data which is that's one and let's talk the 15:44.100 --> 15:47.070 results inside a variable. 15:47.100 --> 15:49.280 I'm going to call trick. 15:50.670 --> 15:56.740 So let's define this variable outside the function. 15:56.930 --> 15:58.340 I'm going to use it later on. 16:12.850 --> 16:14.940 OK so let's define it. 16:19.770 --> 16:20.000 OK. 16:20.020 --> 16:24.010 Now let's bring this in the console. 16:48.410 --> 16:50.050 OK so this is what we get. 16:50.390 --> 16:52.310 So now we can see that we've got 16:56.000 --> 16:57.150 an array. 16:57.230 --> 16:57.740 OK. 16:57.920 --> 16:59.040 It says objects here. 16:59.040 --> 17:03.480 An array is an object anyway so you can see all the details of our trip. 17:03.500 --> 17:04.310 Right. 17:04.350 --> 17:08.000 So you got to use these details to fill the form. 17:08.570 --> 17:09.330 OK. 17:09.690 --> 17:10.070 So 17:13.840 --> 17:21.780 to do this we we're going to create a function that's Coy's format model. 17:21.830 --> 17:27.110 So this function is going to fill the form with the trip details. 17:47.550 --> 17:53.090 Now before we do this actually we will need to check if you got anything returned. 17:53.130 --> 17:53.510 OK. 17:53.580 --> 18:01.450 And then we're going to check if the return data is error and then we can go ahead and do this. 18:01.470 --> 18:01.980 OK. 18:02.220 --> 18:06.200 So let's check first if you got anything returned 18:10.580 --> 18:14.660 in that case we're going to check if the returned data 18:18.660 --> 18:20.140 is error. 18:20.700 --> 18:28.820 If that's the case we're going to echo an error message or just show the error message inside the edit 18:29.090 --> 18:30.070 message. 18:30.210 --> 18:42.640 Else we're going to parse the dates on for months all the data on data and use it to format the model. 18:42.660 --> 18:47.980 So if you cause an error you is going to show an error. 18:49.260 --> 18:51.780 Ok so now we will need to define this function 19:03.050 --> 19:05.110 and we do that in the next video.