WEBVTT

00:00:07.020 --> 00:00:13.480
In this video we're going to learn how to move to the Edie's mode and start deleting notes.

00:00:13.650 --> 00:00:19.710
So the first thing we're going to do is when we load notes we're going to load with them a delete button

00:00:19.710 --> 00:00:20.660
like this.

00:00:20.660 --> 00:00:21.130
OK.

00:00:21.330 --> 00:00:28.680
And we're going to hide these in the background so we're going to go back to our load notes those PSP

00:00:28.710 --> 00:00:30.130
file.

00:00:30.180 --> 00:00:31.380
OK.

00:00:31.930 --> 00:00:37.210
And another Dave just before the note Steve.

00:00:37.740 --> 00:00:42.070
So you will notice does the width of the deceased person is going to change.

00:00:42.200 --> 00:00:49.550
So in extra small devices is going to be five columns out of 12.

00:00:50.280 --> 00:00:54.720
And in small devices and beyond.

00:00:54.870 --> 00:00:58.390
It's going to be three columns.

00:00:58.390 --> 00:01:04.200
So let's do that.

00:01:04.470 --> 00:01:13.360
So just before this date we're going to have another one let's just tidy up our code slightly.

00:01:15.560 --> 00:01:18.450
OK.

00:01:18.650 --> 00:01:22.380
And love that live there.

00:01:24.990 --> 00:01:25.970
OK.

00:01:26.640 --> 00:01:31.820
And we can also place these two Daves inside a containing Dave

00:01:31.830 --> 00:01:38.180
.

00:01:44.680 --> 00:01:45.740
OK.

00:01:45.810 --> 00:01:55.300
And we can give it a class note as we might use later.

00:01:56.250 --> 00:01:57.060
We'll see.

00:01:57.300 --> 00:02:05.570
OK so the delete button is going to be placed inside this div.

00:02:05.640 --> 00:02:06.200
So let's do.

00:02:06.340 --> 00:02:11.130
Let's give this div a couple of classes so.

00:02:12.320 --> 00:02:20.720
So this gives a class column X as 5.

00:02:21.990 --> 00:02:26.690
So he wants five columns in extra small devices and he's small and beyond.

00:02:26.700 --> 00:02:31.640
We want only 3 so call them S.M. 3.

00:02:31.750 --> 00:02:34.760
OK let's add another class.

00:02:34.810 --> 00:02:36.520
I'm going to qualis delete.

00:02:36.600 --> 00:02:40.440
I'm going to use this class to some see as is dying.

00:02:41.580 --> 00:02:42.630
OK.

00:02:43.380 --> 00:02:46.530
Or rather hide the the button if you want.

00:02:46.920 --> 00:02:50.760
OK so inside the div This creates a button.

00:02:51.150 --> 00:02:51.990
So we're going to use

00:02:56.370 --> 00:02:59.390
the button a shameful tag.

00:03:00.570 --> 00:03:01.580
OK.

00:03:02.460 --> 00:03:07.400
And this writes some text inside deletes.

00:03:08.590 --> 00:03:09.290
OK.

00:03:09.420 --> 00:03:13.360
So it's side of the button let's add your classes.

00:03:14.760 --> 00:03:22.710
So we're going to give it a clause Busson lunge to make it large and also going to use Busson danger

00:03:23.070 --> 00:03:27.370
to give it this nice red color.

00:03:29.580 --> 00:03:30.320
All right.

00:03:30.930 --> 00:03:35.970
OK so now before we hide the button let's save

00:03:39.720 --> 00:03:41.930
and refresh.

00:03:42.990 --> 00:03:45.780
OK so we can see our US in there.

00:03:46.340 --> 00:03:48.340
Now we'll need to hide it.

00:03:48.360 --> 00:03:50.880
So let's go to the CIRCE's

00:03:53.280 --> 00:03:56.700
section and decide it's

00:04:00.040 --> 00:04:00.410
OK.

00:04:00.420 --> 00:04:04.140
It's odd.

00:04:04.160 --> 00:04:10.060
He deletes the class to these elements which be written.

00:04:10.110 --> 00:04:15.140
So if we save and refresh or the least puzzles are no hit.

00:04:15.300 --> 00:04:16.160
OK.

00:04:16.350 --> 00:04:24.740
Now when we click on the edits button we can see that the buttons will appear OK.

00:04:25.260 --> 00:04:30.870
And also the width of the notes will decrease.

00:04:30.870 --> 00:04:32.800
So let's go ahead and do this.

00:04:33.090 --> 00:04:40.260
So we're going to go back to our jobs file and click on edits.

00:04:40.400 --> 00:04:44.430
OK that's the one we're looking at.

00:04:44.820 --> 00:04:47.970
So it selects the reset button using his ID

00:04:53.280 --> 00:04:54.470
which is edits.

00:04:54.480 --> 00:04:56.580
So once we click on the button

00:05:06.150 --> 00:05:09.660
we are going to execute the following function.

00:05:10.740 --> 00:05:12.330
OK.

00:05:12.330 --> 00:05:14.910
So first of all we're going to go to the Edie's mode.

00:05:15.010 --> 00:05:15.410
OK.

00:05:15.510 --> 00:05:22.680
Which means that our variable edits mode is going to be set to true.

00:05:22.740 --> 00:05:24.130
All right.

00:05:24.570 --> 00:05:26.610
OK.

00:05:27.540 --> 00:05:38.410
So it's a common switch to areas but then we're going to reduce the width of our notes.

00:05:38.430 --> 00:05:39.120
OK.

00:05:39.150 --> 00:05:42.000
So to do that we're going to change the class of owner.

00:05:42.010 --> 00:05:50.310
So originally the notes had a glass which is

00:05:57.120 --> 00:05:58.370
just notes hador.

00:05:58.380 --> 00:05:58.860
OK.

00:05:58.950 --> 00:06:02.040
So this was taking the full width available.

00:06:02.040 --> 00:06:09.200
Now we're going to add another class which will limit the width taken by the nose.

00:06:09.400 --> 00:06:10.500
OK.

00:06:10.560 --> 00:06:14.780
So you would use the.

00:06:15.340 --> 00:06:15.760
Notes

00:06:19.410 --> 00:06:31.380
so you can access all notes using the class notes header and then you're going to add a new class or

00:06:31.380 --> 00:06:35.910
a couple of glasses you can add as many classes as you like using the class method.

00:06:36.320 --> 00:06:36.810
OK.

00:06:37.110 --> 00:06:44.650
So we're going to use 7 columns in extra small devices and nine columns.

00:06:44.750 --> 00:06:45.070
OK.

00:06:45.090 --> 00:06:46.750
Out of 12.

00:06:47.070 --> 00:06:48.480
Small and beyond so

00:06:51.190 --> 00:06:59.850
column X as 7 or small column as some mine for small and greater.

00:07:00.170 --> 00:07:00.960
OK.

00:07:01.800 --> 00:07:07.650
Now we are going to show certain elements and hide certain elements.

00:07:07.650 --> 00:07:12.870
So when you click on edits you're going to hide the Edie's doesn't show the done button and show the

00:07:12.930 --> 00:07:14.360
delete buttons.

00:07:14.460 --> 00:07:17.940
So I'm going to show the you going to use the show height function

00:07:19.880 --> 00:07:22.870
.

00:07:23.450 --> 00:07:27.130
OK.

00:07:29.760 --> 00:07:35.050
So the elements to show are done and the delete buttons.

00:07:35.250 --> 00:07:43.950
So let's select Dunbarton using its ID which is done and it selects the Dili's persons using their class

00:07:44.280 --> 00:07:51.570
which is deletes OK and then the elements to hide the areas present itself.

00:07:51.660 --> 00:07:55.080
OK so you can you can select the person using its ID.

00:07:55.160 --> 00:07:58.770
Otherwise you can use the keyword this.

00:07:59.440 --> 00:08:00.200
OK.

00:08:00.810 --> 00:08:06.510
Because we are already inside this element.

00:08:06.780 --> 00:08:15.540
So now let's save refresh our page and click on the eddys.

00:08:16.260 --> 00:08:17.050
OK.

00:08:17.670 --> 00:08:24.540
Now we can see that's the persons appear OK but they are not taking the full width available to them

00:08:24.560 --> 00:08:25.000
.

00:08:25.380 --> 00:08:30.810
So to fix this we can go to the buttons and make sure that they take the full width available to them

00:08:30.810 --> 00:08:32.670
inside the containing div.

00:08:33.150 --> 00:08:38.950
OK so we can add the styling inside the button if we want to.

00:08:39.180 --> 00:08:50.580
So all you need to do is add a style attributes and make sure the width is set to 100 percent

00:08:53.300 --> 00:08:53.920
like this.

00:08:54.080 --> 00:08:55.650
OK.

00:08:55.830 --> 00:08:59.170
There is a minus sign missing there.

00:08:59.460 --> 00:09:00.220
OK.

00:09:00.280 --> 00:09:01.570
One is 9 3.

00:09:01.980 --> 00:09:04.980
OK so let's save and refresh.

00:09:05.400 --> 00:09:12.040
If I click on edits I can see that the buttons this time take the full available with.

00:09:12.210 --> 00:09:13.940
All right.

00:09:13.950 --> 00:09:14.220
All right.

00:09:14.230 --> 00:09:19.350
Now if we click on the delete button we're going to delete the corresponding notes.

00:09:19.560 --> 00:09:22.140
So to delete the notes you going to do a couple of things.

00:09:22.200 --> 00:09:30.360
First of all we're going to delete the email contents all components relating to that specific notes

00:09:30.380 --> 00:09:30.900
.

00:09:31.590 --> 00:09:38.850
And we're also going to go to the database and delete the notes from the database.

00:09:38.850 --> 00:09:39.730
OK.

00:09:40.140 --> 00:09:48.090
So we're going to have the same issue we had with clicking on a notes.

00:09:48.450 --> 00:09:56.730
So what are we going to do we're going to place the code inside a function so that we can call it inside

00:09:56.760 --> 00:09:58.510
AJAX calls.

00:09:58.920 --> 00:10:00.800
Right.

00:10:00.810 --> 00:10:10.560
And the reason why is because this content's OK was received or obtained using AJAX.

00:10:10.560 --> 00:10:16.490
So we're going to make sure that we call the delete function inside those AJAX calls.

00:10:16.710 --> 00:10:17.590
All right.

00:10:17.590 --> 00:10:20.920
So let's go up the end of our javascript file

00:10:24.930 --> 00:10:29.840
and write a new function for clicking on delete buttons.

00:10:30.360 --> 00:10:30.840
OK.

00:10:31.020 --> 00:10:34.400
So it's called the function.

00:10:36.060 --> 00:10:39.800
Click on deletes.

00:10:41.590 --> 00:10:42.170
Right.

00:10:42.390 --> 00:10:49.770
So what this function is going to be doing is going to say select all the buttons using that class which

00:10:49.770 --> 00:10:50.340
is delete

00:10:53.420 --> 00:10:58.570
or writes or actually the div containing those deletes buttons.

00:10:58.680 --> 00:11:08.320
And once we click on those dates we're going to execute the following function.

00:11:10.380 --> 00:11:12.560
OK.

00:11:12.930 --> 00:11:14.190
All right.

00:11:14.400 --> 00:11:25.470
So first of all let's start with the database side so we don't need to send the ID of that note to the

00:11:26.010 --> 00:11:28.650
delete notes file.

00:11:28.950 --> 00:11:29.250
OK.

00:11:29.280 --> 00:11:34.800
And say deletes the notes with this ID.

00:11:35.210 --> 00:11:36.730
OK.

00:11:37.770 --> 00:11:46.170
So to do this first of all we need to find a way of how to get that ID.

00:11:46.440 --> 00:11:49.270
So we're going to create a variable.

00:11:49.560 --> 00:11:52.680
I'm going to call it a delete button.

00:11:53.730 --> 00:12:02.230
So I'm going to store inside this variable the selection OK off the button that we clicked.

00:12:02.360 --> 00:12:07.500
I'm going to use the keyword this because we are already inside that wasn't all that different saying

00:12:07.500 --> 00:12:10.780
that that wasn't all right.

00:12:10.830 --> 00:12:18.640
Now if we look at our code when we loaded the notes we had a date.

00:12:18.660 --> 00:12:20.950
So that's the date that we are selecting at the moment.

00:12:21.180 --> 00:12:24.170
OK which contains the button.

00:12:24.810 --> 00:12:26.500
The next elements.

00:12:26.910 --> 00:12:35.390
OK is the div with ID no idea which is the ID of our notes.

00:12:35.400 --> 00:12:40.820
So what are we going to do at the moment we are selecting this button or this Dave.

00:12:41.490 --> 00:12:51.360
So we going to use a function called next which will give us the next elements and then we're going

00:12:51.360 --> 00:12:54.180
to get the ID attributes of these elements.

00:12:54.210 --> 00:12:54.760
OK.

00:12:55.170 --> 00:12:59.940
So let's go ahead and do this.

00:13:00.000 --> 00:13:04.350
So first let's raise the age of school.

00:13:04.500 --> 00:13:05.100
So

00:13:12.980 --> 00:13:16.800
it's copy code from

00:13:20.970 --> 00:13:25.250
another call where we send data.

00:13:25.260 --> 00:13:26.260
OK so let's use this one

00:13:26.270 --> 00:13:36.300
.

00:13:51.390 --> 00:13:57.650
OK so we sent in the call to the delete notes those page file.

00:13:58.440 --> 00:13:59.190
OK.

00:13:59.250 --> 00:14:00.530
Using the post method

00:14:03.180 --> 00:14:06.360
and we're going to send only the ID of the notes

00:14:09.270 --> 00:14:10.560
to be deleted.

00:14:11.160 --> 00:14:20.200
OK so they say we're going to be sending A's only the ID.

00:14:20.700 --> 00:14:29.880
So to get the ID we're going to use the current selection which is our delete button what basically

00:14:29.880 --> 00:14:38.640
it's the div OK containing the bottom and then we're going to use the method next which will give us

00:14:38.640 --> 00:14:41.770
the next elements which is this one.

00:14:42.120 --> 00:14:48.930
And then to get the idea of those elements we're going to use the attributes method like that's going

00:14:48.930 --> 00:14:52.230
to give it as a barometer idea.

00:14:53.150 --> 00:14:54.770
OK.

00:14:56.370 --> 00:15:03.800
So if there are any errors this file deletes node is going to return error.

00:15:04.020 --> 00:15:04.560
OK.

00:15:04.560 --> 00:15:13.080
So if the return value which is data has error we're going to say something like there was an issue

00:15:13.800 --> 00:15:18.380
deleting the notes from the database.

00:15:18.920 --> 00:15:22.950
OK.

00:15:27.270 --> 00:15:31.760
Otherwise we can have an L statements.

00:15:31.770 --> 00:15:36.390
So if the native If the notes was deleted successfully What are we going to do we are going to go back

00:15:37.710 --> 00:15:44.130
to the containing Dave which contains both the button and the notes which is this one.

00:15:44.130 --> 00:15:48.050
And we're looking at this div which contains everything.

00:15:48.360 --> 00:15:49.890
And we going to delete it.

00:15:49.950 --> 00:15:54.710
So to access does Dave begin to use the parent method.

00:15:54.810 --> 00:15:55.410
OK.

00:15:55.800 --> 00:15:56.680
From.

00:15:56.940 --> 00:15:57.720
So we're going to select.

00:15:57.770 --> 00:16:00.770
That's Dave using our variable delays.

00:16:01.000 --> 00:16:02.630
And again look foists parents.

00:16:02.910 --> 00:16:05.050
So the it's parents is busted.

00:16:05.730 --> 00:16:11.470
And then we're going to remove the e-mail contents of that state.

00:16:11.820 --> 00:16:14.070
So else

00:16:18.030 --> 00:16:20.560
remove containing Dave.

00:16:21.000 --> 00:16:26.300
So to do that we're going to use the least person variable we can to access the parents.

00:16:26.810 --> 00:16:27.770
OK.

00:16:27.780 --> 00:16:33.230
And then we're going to use the Remove method to remove the parents from the Tom