WEBVTT 00:00:07.310 --> 00:00:12.870 In this video we're going to write code which will run when the user types something inside the text 00:00:12.870 --> 00:00:13.640 area. 00:00:13.710 --> 00:00:16.110 So this will happen in a couple of scenarios. 00:00:16.140 --> 00:00:20.680 So the first one is when the user creates a new notes. 00:00:20.850 --> 00:00:24.040 So basically the user will click on odd notes. 00:00:24.330 --> 00:00:33.300 This will create a new note in the new stable with empty content and then as they type something in 00:00:33.300 --> 00:00:37.550 the text area the contents of the notes is going to be updated. 00:00:37.770 --> 00:00:45.610 OK so that's the first scenario the second scenario is when the user clicks on an existing notes then 00:00:45.620 --> 00:00:48.540 they will be able to update the content of that note. 00:00:48.600 --> 00:00:55.310 So whatever they type in the text area is going to become the new content of the existing notes. 00:00:55.320 --> 00:00:55.750 OK. 00:00:55.980 --> 00:01:05.100 So let's start with the first hour or so the first scenario is when the user clicks on odd notes. 00:01:05.350 --> 00:01:14.890 OK then they will see the text area there and he can start typing the content of the new. 00:01:14.940 --> 00:01:24.330 So at the moment if I type anything here OK and then go back to the list of notes I'm not going to see 00:01:24.330 --> 00:01:25.340 when you notice. 00:01:25.440 --> 00:01:28.680 And the reason why is because then you know it is still empty. 00:01:28.680 --> 00:01:32.730 And by the time it gets here all empty notes get deleted. 00:01:32.730 --> 00:01:33.320 OK. 00:01:33.570 --> 00:01:42.120 So I won't see in the new notes now are we going to do whatever the user types in this text area is 00:01:42.120 --> 00:01:46.140 going to become the new content of owners. 00:01:46.170 --> 00:01:52.580 So the way we're going to do this is by using the key up function. 00:01:52.800 --> 00:01:59.310 So we're going to select the next area and then basically we're going to say whenever we because a key 00:01:59.310 --> 00:02:03.990 up we're going to guess the content of the notes. 00:02:04.070 --> 00:02:07.120 OK. 00:02:08.820 --> 00:02:16.650 But the content of the notes and we going to send that content to APHC file along with the idea of the 00:02:16.650 --> 00:02:17.610 notes. 00:02:17.880 --> 00:02:26.420 And we're going to ask the database or the table to update that it notes content for us. 00:02:26.460 --> 00:02:26.980 OK. 00:02:27.270 --> 00:02:31.420 So let's go go ahead and do this so. 00:02:31.610 --> 00:02:34.950 So we're going to look at this piece of code 00:02:37.590 --> 00:02:39.860 typing and notes. 00:02:40.470 --> 00:02:51.990 So first of all I'm going to select the text area again because only one text area inside our documents 00:02:52.290 --> 00:02:59.650 so we can select the text area using the text area attack. 00:03:03.900 --> 00:03:04.470 OK. 00:03:04.520 --> 00:03:08.470 And then we're going to use the key up function. 00:03:09.990 --> 00:03:10.860 OK. 00:03:11.310 --> 00:03:21.390 So inside this function we're going to write the function to execute whenever you cause a keep. 00:03:21.750 --> 00:03:24.590 All right so now we're going to send an AJAX call. 00:03:24.780 --> 00:03:25.660 OK. 00:03:25.710 --> 00:03:36.160 So this call is going to be sent to the update notes file. 00:03:38.700 --> 00:03:40.460 OK. 00:03:40.840 --> 00:03:44.990 And we get looking here and the task of ID activeness. 00:03:45.510 --> 00:03:57.780 So if you remember when we clicked on odd notes we set the variable active note to the ID of the newly 00:03:58.050 --> 00:03:59.070 created notes. 00:03:59.280 --> 00:04:00.980 OK. 00:04:01.020 --> 00:04:03.720 And if I want to show that 00:04:09.390 --> 00:04:10.940 that's where it happened. 00:04:11.040 --> 00:04:12.060 OK. 00:04:12.060 --> 00:04:17.090 So we updated the variable to the ID of the notes. 00:04:17.190 --> 00:04:17.730 OK. 00:04:17.910 --> 00:04:21.370 The variable data here holds the ID of the notes in that case. 00:04:21.420 --> 00:04:22.080 All right. 00:04:22.320 --> 00:04:22.620 So 00:04:26.040 --> 00:04:27.960 let's ROIs our AJAX call. 00:04:28.350 --> 00:04:35.780 So the syntax is going to be similar to this one so we can copy this one or just customize it. 00:04:43.870 --> 00:04:50.930 OK so you are able in this case is update notes those BHB. 00:04:52.900 --> 00:04:54.160 OK. 00:04:54.160 --> 00:05:02.210 No we are going to be sending data this time so we need to specify the type of our age or school. 00:05:02.470 --> 00:05:04.740 So are you going to use the post method. 00:05:05.330 --> 00:05:05.620 OK 00:05:13.960 --> 00:05:18.000 then we're going to have another barometer of our age ex-school it's data. 00:05:18.010 --> 00:05:22.730 So basically this refers to whatever we're going to send through the age ex-school. 00:05:22.990 --> 00:05:28.530 So let's add a quick comment there just to make sure everything is clear. 00:05:28.570 --> 00:05:34.070 So we need to send the current notes. 00:05:34.120 --> 00:05:34.780 OK. 00:05:35.200 --> 00:05:41.140 All current news content with its ID. 00:05:42.130 --> 00:05:44.400 Ok to that speech. 00:05:44.570 --> 00:05:52.710 OK we're going to need both these OK to run the query later on to the page people. 00:05:53.450 --> 00:05:54.090 OK. 00:05:54.190 --> 00:06:02.950 So just make sure you don't mix up this data which is a barometer inside our age ex-school with that 00:06:03.040 --> 00:06:03.720 data. 00:06:03.810 --> 00:06:04.470 OK. 00:06:04.540 --> 00:06:06.380 Which is just a variable. 00:06:06.640 --> 00:06:11.390 It's whatever it's returned. 00:06:12.610 --> 00:06:21.120 If the school is successful you can call that data anything you like you can call it data returned like 00:06:21.120 --> 00:06:22.070 that. 00:06:22.560 --> 00:06:26.310 Just make sure you change that to data return as well. 00:06:27.010 --> 00:06:33.290 OK but if you want to keep this data you can keep his data. 00:06:33.310 --> 00:06:38.420 Just make sure you don't mix you up with that data which is a parameter of our age school. 00:06:38.620 --> 00:06:46.010 All right so the information we need to send through our school will contain a couple of things. 00:06:46.030 --> 00:06:48.800 We're going to have the content of our notes. 00:06:48.870 --> 00:06:56.410 We're going to call it notes and we're going to have the ID of the notes I'm going to call it id. 00:06:56.730 --> 00:06:57.300 OK. 00:06:57.520 --> 00:07:04.210 So the PH peafowl is going to receive these two promises using the post method. 00:07:04.440 --> 00:07:05.190 OK. 00:07:05.380 --> 00:07:14.480 So the content of our notes can be retrieved by selecting the text area. 00:07:14.710 --> 00:07:15.040 OK. 00:07:15.040 --> 00:07:23.280 And using the valve function so to select the text area I can use the text area tag again. 00:07:23.500 --> 00:07:27.230 Otherwise I can just use the keyword this. 00:07:27.390 --> 00:07:33.070 OK because we have already selected the text area and we are inside at the moment. 00:07:33.270 --> 00:07:34.380 OK. 00:07:34.630 --> 00:07:43.060 All right so the content can be accessed using the function ball like that. 00:07:43.060 --> 00:07:52.410 And then the ID of the notes is inside the variable active note. 00:07:53.080 --> 00:07:54.130 OK. 00:07:54.130 --> 00:07:58.140 All right so now let's see what we are going to do. 00:07:58.180 --> 00:08:01.320 If the call is successful. 00:08:02.050 --> 00:08:08.040 OK all this rather starts with the case where we cause an error with age school. 00:08:08.050 --> 00:08:14.950 We're going to have the same error message as we're going to show inside our alerts message. 00:08:14.950 --> 00:08:24.190 OK so now if it's successful we're going to have a couple of scenarios so if everything goes fine and 00:08:24.700 --> 00:08:29.610 the query is successful inside our PSP file We're not going to do anything. 00:08:29.620 --> 00:08:32.090 We're just going to let the user keep typing. 00:08:32.160 --> 00:08:40.520 OK but if there is an error the PSP file is going to return error. 00:08:40.750 --> 00:08:42.010 Ok so 00:08:45.870 --> 00:08:47.280 unless we're going to do here. 00:08:47.410 --> 00:08:48.010 So 00:08:50.980 --> 00:09:02.460 if the PSP file returns error which means that data equals error OK 00:09:09.590 --> 00:09:15.890 then we're going to change the content of our alert message. 00:09:16.030 --> 00:09:21.350 OK let's copy that code. 00:09:21.990 --> 00:09:24.340 OK. 00:09:25.620 --> 00:09:32.310 And we're going to write something like there was an issue inserting or updating 00:09:37.230 --> 00:09:40.130 the notes in the database. 00:09:41.310 --> 00:09:44.220 OK. 00:09:44.370 --> 00:09:48.210 So you would get this if you're typing the notes and all of a sudden you lose your internet connection 00:09:48.510 --> 00:09:53.940 then you will see this error message all those message showing up. 00:09:53.960 --> 00:09:54.720 All right. 00:09:54.990 --> 00:09:56.010 OK. 00:09:56.010 --> 00:10:03.900 And to show the alleged message we're just going to use this line of code which will introduce some 00:10:03.900 --> 00:10:05.300 animation as well. 00:10:05.730 --> 00:10:07.490 OK. 00:10:09.750 --> 00:10:13.980 So let's save Now let's go to our update notes file. 00:10:14.160 --> 00:10:15.500 OK. 00:10:15.810 --> 00:10:21.230 OK so the first thing we're going to do is get the ID of the notes which he sends through Ajax. 00:10:21.240 --> 00:10:25.140 So the ID corresponds to 00:10:27.810 --> 00:10:31.850 the variable ID. 00:10:31.980 --> 00:10:32.430 OK. 00:10:32.550 --> 00:10:34.660 Which we sense through the school. 00:10:34.710 --> 00:10:40.660 So to get it this creates a variable that is going to call ID. 00:10:41.310 --> 00:10:45.150 And we're is going to access our posts array. 00:10:45.200 --> 00:10:46.350 OK. 00:10:46.440 --> 00:10:54.370 And we're looking at this key inside the boes array which is ID. 00:10:54.420 --> 00:10:57.200 OK. 00:11:00.240 --> 00:11:04.100 Now let's do the same thing with the contents of the NOSSO. 00:11:04.200 --> 00:11:05.510 This creates a variable. 00:11:05.540 --> 00:11:11.560 We're going to call note and again we're going to use the foe's array. 00:11:12.350 --> 00:11:13.410 OK. 00:11:14.100 --> 00:11:19.620 And the key is going to be the same as that. 00:11:21.470 --> 00:11:23.260 OK. 00:11:23.790 --> 00:11:28.690 Now let's guess the current time using the time variable. 00:11:28.840 --> 00:11:32.630 So it's inside the set time using a time function. 00:11:32.640 --> 00:11:35.070 So it's it's I'm inside a time variable. 00:11:35.070 --> 00:11:43.800 So that's the current time so we need the current time because we're going to update the time column 00:11:43.820 --> 00:11:43.960 . 00:11:44.130 --> 00:11:45.670 Ok for that. 00:11:45.700 --> 00:11:48.890 Notes on it. 00:11:48.920 --> 00:11:52.850 Now we're going to run a query which will update our notes. 00:11:53.070 --> 00:11:55.290 So let's create the query 00:12:01.980 --> 00:12:08.840 so that since ex-gays updates our notes table. 00:12:09.600 --> 00:12:15.810 OK I'm going to set the notes field column 00:12:21.330 --> 00:12:24.760 to the variable notes. 00:12:26.240 --> 00:12:27.560 Right. 00:12:27.880 --> 00:12:37.400 Also we're going to set the time to the time variable. 00:12:39.530 --> 00:12:40.220 OK. 00:12:40.290 --> 00:12:48.280 And the condition is going to be the ID of the notes so we can do that. 00:12:48.300 --> 00:12:51.180 And that's for the notes with ID 00:12:54.750 --> 00:12:59.670 equals that ID. 00:13:01.800 --> 00:13:03.150 OK. 00:13:03.150 --> 00:13:14.130 So let's execute on a query using the way school-I and the sql query function 00:13:17.350 --> 00:13:22.540 will take the link variable in the query. 00:13:23.340 --> 00:13:26.030 Then we're going to check if we get any errors. 00:13:26.160 --> 00:13:32.150 OK we're going to check the opposite of results. 00:13:32.640 --> 00:13:33.720 OK. 00:13:33.720 --> 00:13:41.160 So if anything goes wrong results are going to return false instead of an objects and well instead of 00:13:41.160 --> 00:13:44.130 two because we're using an update query. 00:13:44.130 --> 00:13:48.580 If we had a select query then if it's successful we'd have an objects. 00:13:48.590 --> 00:13:51.790 So in this case you're going to get either false or true. 00:13:51.870 --> 00:13:52.400 OK. 00:13:52.590 --> 00:14:01.090 So if we get any problem then we're going to echo error. 00:14:02.170 --> 00:14:02.850 OK. 00:14:02.880 --> 00:14:07.850 So and that error is what we refer to in here. 00:14:07.920 --> 00:14:08.910 OK. 00:14:08.910 --> 00:14:17.690 So if the data returned by the HP file is error then we do this. 00:14:17.770 --> 00:14:18.630 OK so 00:14:21.780 --> 00:14:25.530 let's save and try our code. 00:14:25.530 --> 00:14:29.400 So refresh the page 00:14:32.160 --> 00:14:35.020 and let's create a new note. 00:14:35.040 --> 00:14:40.270 So now we need to see a new notes with empty content in our table. 00:14:40.380 --> 00:14:42.360 So let's refresh the table. 00:14:43.350 --> 00:14:44.870 So that's our new note. 00:14:44.920 --> 00:14:45.340 OK. 00:14:45.360 --> 00:14:49.330 With M.Z. content 8s ID is 14 right. 00:14:49.560 --> 00:14:55.020 So now let's start typing something inside our notes. 00:14:55.020 --> 00:14:55.310 OK. 00:14:55.350 --> 00:14:59.940 So we've got an error with AJAX call so something went wrong. 00:15:00.020 --> 00:15:06.660 So let's have a look at our code and see what happened. 00:15:07.450 --> 00:15:11.710 Let's have a look at the jobs group's file. 00:15:12.900 --> 00:15:13.650 OK. 00:15:13.650 --> 00:15:21.620 So we've caused the wrong name of the file so it's updates notes notes update notes. 00:15:21.630 --> 00:15:24.450 OK so it is save and try again 00:15:24.450 --> 00:15:31.520 . 00:15:31.650 --> 00:15:34.570 OK so miscreate and your notes. 00:15:35.830 --> 00:15:37.460 OK. 00:15:38.460 --> 00:15:39.360 And then refresh 00:15:42.190 --> 00:15:43.660 page again. 00:15:44.550 --> 00:15:48.260 OK so we of course a new notes on his ID is 15. 00:15:48.300 --> 00:15:49.650 Now I will start typing something 00:15:54.800 --> 00:16:02.820 and let's refresh a table and here we go we can see that the contents of our notes has been updated 00:16:02.840 --> 00:16:02.980 . 00:16:03.090 --> 00:16:08.410 Let's add one letter and see what happens. 00:16:10.950 --> 00:16:14.480 OK Perfect's we can see that the note has been updated again. 00:16:14.700 --> 00:16:20.150 All right so now we have covered how to change the content of a new note. 00:16:20.190 --> 00:16:26.660 So now if I go back to the list of notes I'm supposed to see then you know it's in the lists. 00:16:27.320 --> 00:16:27.690 OK. 00:16:27.720 --> 00:16:30.190 And we can see that all right. 00:16:30.300 --> 00:16:36.800 All right so in the next video we are going to look at how are we going to edit and existing units. 00:16:36.810 --> 00:16:43.530 So basically when we click on the notes and then change the contents in the text area we want to see 00:16:43.530 --> 00:16:47.570 the contents getting updated in the notes table. 00:16:48.040 --> 00:16:52.250 OK.