WEBVTT

00:00:06.660 --> 00:00:12.280
In this video we're going to write code responsible for editing and existing notes.

00:00:12.450 --> 00:00:19.610
So again to edit an existing notes we need to click on the notes and then the text area will show up

00:00:19.710 --> 00:00:25.910
and then whatever we write in the text area is going to become the new content of our note.

00:00:26.040 --> 00:00:26.560
OK.

00:00:26.880 --> 00:00:32.010
Now let's have a look at something if you click on the eddies person in the final up.

00:00:32.670 --> 00:00:33.330
OK.

00:00:33.630 --> 00:00:42.240
You'll be able to delete notes but if you click on the notes you won't see the text area.

00:00:42.240 --> 00:00:42.780
OK.

00:00:43.200 --> 00:00:49.880
So we're going to need to do something in our code so that when we click on the notes we check whether

00:00:49.890 --> 00:00:52.290
we are in the edits mode or not.

00:00:52.290 --> 00:00:57.080
Because if you are not in the eddies mode then we'd be able to show the text area and Eddie's own notes

00:00:57.080 --> 00:00:57.570
.

00:00:57.720 --> 00:01:03.900
Otherwise if we are in the Edy's mode we won't be able to change the contents of those we'd only be

00:01:03.900 --> 00:01:06.320
able to delete the notes if you want to.

00:01:06.640 --> 00:01:12.660
OK so now let's go to our code and

00:01:15.270 --> 00:01:21.750
write something corresponding to clicking on the news showing the text area.

00:01:22.350 --> 00:01:29.610
OK so I've put this inside the functions because later on we can to write a function where we're going

00:01:29.610 --> 00:01:30.410
to place this.

00:01:30.540 --> 00:01:32.090
We're going to show you why.

00:01:32.200 --> 00:01:37.660
Ok now I'm going to do it the wrong way just to show you why it doesn't work.

00:01:37.860 --> 00:01:51.780
OK so let's select all our notes OK and tell the browser if the user clicks on the notes to show the

00:01:51.810 --> 00:01:53.940
text area.

00:01:53.940 --> 00:02:01.040
So we are selecting all these notes so we need to find a common factor between them.

00:02:01.390 --> 00:02:05.570
We're not going to use an ID but we are going to use a class.

00:02:05.750 --> 00:02:06.520
OK.

00:02:06.540 --> 00:02:12.760
So the common class between all those notes is notes had.

00:02:13.230 --> 00:02:19.080
OK they can check that in the load notes file we gave all those

00:02:25.700 --> 00:02:31.120
A-class notes had on it.

00:02:31.200 --> 00:02:32.910
Now if you click on the notes

00:02:38.210 --> 00:02:48.280
OK the function would like to run it as following.

00:02:51.870 --> 00:02:55.320
So first of all we're going to check if we are in the Edie's mode.

00:02:55.320 --> 00:03:03.670
So to manage the areas mode we're going to use a variable that we're going to call Edie's mode.

00:03:04.710 --> 00:03:09.080
So at the beginning when we load the page this is going to be false.

00:03:09.300 --> 00:03:14.520
OK so that very well is a billion and it's set to false at the beginning initially.

00:03:14.700 --> 00:03:16.140
All right.

00:03:16.230 --> 00:03:21.220
If you go to the Edie's mode then that's variable is going to become true.

00:03:21.510 --> 00:03:22.150
OK.

00:03:22.490 --> 00:03:22.740
All right.

00:03:22.740 --> 00:03:27.160
So first we're going to check if we are not in the Edie's mode.

00:03:27.420 --> 00:03:28.870
Okay.

00:03:29.130 --> 00:03:33.160
So if opposites of is moot.

00:03:33.970 --> 00:03:34.170
Okay

00:03:34.220 --> 00:03:40.850
.

00:03:41.280 --> 00:03:49.090
All right so now we need to change the active notes variable.

00:03:49.490 --> 00:03:50.070
Okay.

00:03:50.340 --> 00:03:58.440
Because if you want to edit that note you need the ID of that note to be stored in the active notes

00:03:58.440 --> 00:03:59.420
variable.

00:03:59.640 --> 00:04:09.660
So that's when you start typing something you can send that ID through the AJAX call OK to the update

00:04:09.660 --> 00:04:10.770
notes file.

00:04:10.830 --> 00:04:14.120
We're going to use exactly the same file for an unit.

00:04:14.130 --> 00:04:26.810
OK so let's update our active notes variable.

00:04:32.780 --> 00:04:34.740
OK.

00:04:35.710 --> 00:04:40.120
So we're going to find they're going to find the ID of the nodes.

00:04:40.140 --> 00:04:50.130
So if you remember when we loaded the notes we placed the ID of each node somewhere.

00:04:50.670 --> 00:04:56.180
We gave it as an ID only as an ID of the day itself.

00:04:56.580 --> 00:04:57.810
OK.

00:04:57.810 --> 00:05:05.070
So that's Dave has got an ID which is the ID of that and that's all right.

00:05:05.310 --> 00:05:07.590
So how do we get that ID

00:05:10.870 --> 00:05:15.690
so we get to access the notes itself.

00:05:15.800 --> 00:05:21.100
Look at using the keyword this.

00:05:22.020 --> 00:05:22.580
All right.

00:05:22.750 --> 00:05:26.320
We're using this because we are already inside the same elements.

00:05:26.350 --> 00:05:26.800
OK.

00:05:26.800 --> 00:05:28.390
We selected the same elements.

00:05:28.780 --> 00:05:34.950
So then to get the idea we're going to use the attributes method.

00:05:35.440 --> 00:05:38.870
And we're going to give it as a barometer.

00:05:38.870 --> 00:05:41.100
Id simply.

00:05:41.170 --> 00:05:50.740
All right so now we updated the Occy of notes very well now we will need to fill the text area this

00:05:50.740 --> 00:05:57.910
text area with the contents of our notes so the contents of the notes is the first div inside the containing

00:05:57.910 --> 00:05:58.520
div.

00:05:58.920 --> 00:05:59.400
OK.

00:05:59.770 --> 00:06:03.630
So let's do this.

00:06:03.670 --> 00:06:10.150
So fill sex area so we're going to select the text area.

00:06:10.540 --> 00:06:15.110
So again we're going to use a text area it's like we have only one text area.

00:06:16.150 --> 00:06:22.830
And then we're going to set its value to the content of the notes.

00:06:23.110 --> 00:06:26.870
So how do we find the content of the notes.

00:06:27.100 --> 00:06:36.770
So we get to select the containing div OK and then we're going to look for the elements of class text

00:06:37.580 --> 00:06:38.870
.

00:06:39.560 --> 00:06:41.500
So when we loaded the notes.

00:06:41.610 --> 00:06:42.120
OK.

00:06:42.220 --> 00:06:46.530
So this is that they've just dusted they've the containing live is this one.

00:06:46.880 --> 00:06:49.150
So inside that they've got a couple of these.

00:06:49.240 --> 00:06:54.160
So we want the contents of the div of class text.

00:06:54.190 --> 00:06:54.850
All right.

00:06:54.850 --> 00:07:06.500
So to do that we are going to select our containing div using the keyword this again.

00:07:07.450 --> 00:07:08.130
All right.

00:07:08.410 --> 00:07:16.240
So we're using this because we are inside the same elements and then we're going to find the elements

00:07:16.240 --> 00:07:17.670
of class text.

00:07:17.920 --> 00:07:26.260
So to do that we're going to use the method find and we're going to give it a promiser the text class

00:07:26.470 --> 00:07:28.080
like that's OK.

00:07:28.300 --> 00:07:35.260
And once you find that elements you're going to get the text of those elements using the text method

00:07:35.950 --> 00:07:36.950
just like this.

00:07:37.470 --> 00:07:39.220
OK.

00:07:39.490 --> 00:07:47.250
All right so again so we select the containing div we find the day of class text which is this one.

00:07:47.290 --> 00:07:54.730
And as the contents of our notes and then we get the text inside that elements and we feel it takes

00:07:54.730 --> 00:07:56.340
area using that text.

00:07:56.350 --> 00:07:57.350
All right.

00:07:57.820 --> 00:07:59.230
OK.

00:08:00.340 --> 00:08:07.900
Now you also want to show unhide certain elements so it is going to be very similar to what we did when

00:08:07.900 --> 00:08:11.850
we clicked on.

00:08:12.210 --> 00:08:13.880
No it's basically.

00:08:15.040 --> 00:08:19.930
So let's go back to the notes code and show how the same elements

00:08:19.930 --> 00:08:27.920
.

00:08:29.290 --> 00:08:33.920
And then we're going to focus in science X area

00:08:34.990 --> 00:08:46.440
.

00:08:54.250 --> 00:09:00.110
So let's save and try our code.

00:09:00.130 --> 00:09:03.110
So if we're fresh.

00:09:03.190 --> 00:09:08.280
So if I now click on any of these notes nothing will happen.

00:09:08.320 --> 00:09:08.940
OK.

00:09:09.340 --> 00:09:11.590
Exactly as expected.

00:09:11.590 --> 00:09:17.110
So I suggest you pause the video and find out why.

00:09:17.530 --> 00:09:18.290
OK.

00:09:18.730 --> 00:09:19.350
All right.

00:09:19.540 --> 00:09:27.820
I hope that you post the video and found what the problem was so basically the reason why this won't

00:09:27.820 --> 00:09:35.240
work is because we are calling a class which was loaded using AJAX.

00:09:35.590 --> 00:09:36.150
OK.

00:09:36.370 --> 00:09:39.210
So let me try something different.

00:09:39.250 --> 00:09:47.290
So if my selects insight instead of that class any div when on a page.

00:09:47.290 --> 00:09:47.860
OK.

00:09:48.100 --> 00:09:58.700
So if I refresh the page and click on any div then I'll see the text area.

00:10:00.640 --> 00:10:01.740
OK.

00:10:02.500 --> 00:10:11.110
Now let's go back to our original code and fix this.

00:10:11.110 --> 00:10:22.750
So the AJAX call which loaded these days where they were this class notes header.

00:10:23.230 --> 00:10:23.890
Is

00:10:29.200 --> 00:10:30.060
this one.

00:10:30.560 --> 00:10:31.310
OK.

00:10:31.330 --> 00:10:36.640
So this call was sent to load notes those BHB.

00:10:36.690 --> 00:10:37.550
All right.

00:10:37.990 --> 00:10:46.120
So basically what happens is as you go through the code once you get to the AJAX call the rest of the

00:10:46.120 --> 00:10:51.970
code is not going to wait for the AJAX call to finish.

00:10:51.970 --> 00:10:52.570
OK.

00:10:53.110 --> 00:10:53.860
So one way

00:10:56.980 --> 00:11:07.570
to avoid having this problem is to place this piece of code inside the school.

00:11:07.870 --> 00:11:17.220
So once the call is successful then we do that and then we execute this piece of code.

00:11:18.250 --> 00:11:19.120
OK.

00:11:19.150 --> 00:11:23.120
An easy way of doing this is to place this code inside a function.

00:11:23.800 --> 00:11:26.140
So that's why we have a function.

00:11:26.140 --> 00:11:27.940
Click on the notes.

00:11:28.120 --> 00:11:32.190
So let's call that function.

00:11:32.830 --> 00:11:45.170
Click on notes and inside the function we just copy paste our code.

00:11:48.150 --> 00:11:48.560
Ok

00:12:14.520 --> 00:12:18.190
it's totally up to me.

00:12:18.830 --> 00:12:19.120
OK

00:12:19.140 --> 00:12:29.530
.

00:12:29.800 --> 00:12:30.310
All right.

00:12:30.430 --> 00:12:37.060
So now I'm going to call this function inside the ages because once the call is successful we get a

00:12:37.060 --> 00:12:38.930
call that function.

00:12:39.160 --> 00:12:39.860
OK.

00:12:40.270 --> 00:12:40.810
So

00:12:44.830 --> 00:12:46.540
click on notes.

00:12:47.110 --> 00:12:53.170
All right so now let's save and refresh and let's try now.

00:12:53.650 --> 00:12:54.370
It works

00:12:58.940 --> 00:13:00.630
and now it doesn't work anymore.

00:13:01.110 --> 00:13:01.920
OK.

00:13:01.930 --> 00:13:06.580
So again I suggest you pause the video and find out why.

00:13:06.610 --> 00:13:06.850
OK.

00:13:06.850 --> 00:13:17.880
I hope you found was the problem was basically once you learn in a page like this you used this Ajax

00:13:17.880 --> 00:13:19.180
code to load these notes.

00:13:19.180 --> 00:13:21.180
So now it's working.

00:13:21.490 --> 00:13:26.620
Now if you click on all nodes to go back to the list of notes basically you're going to use another

00:13:26.620 --> 00:13:32.130
piece of code OK which is clicking on all notes.

00:13:33.130 --> 00:13:35.730
OK let me find where this is.

00:13:35.740 --> 00:13:36.640
So is this one.

00:13:36.940 --> 00:13:44.710
So basically we need to do the same function or call the same function inside the success parameter

00:13:44.720 --> 00:13:44.990
.

00:13:45.250 --> 00:13:46.600
OK so

00:13:49.360 --> 00:13:53.330
I'm going to call the function click on notes again.

00:13:53.700 --> 00:13:59.090
Now let's save refresh again so that one is working.

00:13:59.110 --> 00:14:04.860
If I go back it'll work OK.

00:14:05.960 --> 00:14:08.070
Perfect.

00:14:08.230 --> 00:14:18.040
Now let's just make sure that the notes gets edited successfully So if I click on the first notes OK

00:14:18.640 --> 00:14:19.970
these are a character.

00:14:20.030 --> 00:14:25.400
There goes to the database and refresh.

00:14:26.380 --> 00:14:27.880
And now you can see the change.

00:14:27.880 --> 00:14:28.170
OK.

00:14:28.180 --> 00:14:31.250
That's the extra character that you've just added.

00:14:31.600 --> 00:14:35.770
OK.

00:14:35.770 --> 00:14:36.090
All right.

00:14:36.100 --> 00:14:42.070
In the next video we're going to see how we're going to go to the Edie's mode and delete NYTs