WEBVTT

00:00:07.170 --> 00:00:11.670
So far we manage to write code which loads notes.

00:00:11.670 --> 00:00:18.910
Once the user is logged in now we're going to write code which will enable our user to create and units

00:00:18.940 --> 00:00:19.540
.

00:00:20.100 --> 00:00:27.180
So if we look at the final app to create a new node we need to click on notes and straight away we can

00:00:27.180 --> 00:00:32.300
see the textbooks where we can write the content of our own units.

00:00:33.030 --> 00:00:33.670
OK.

00:00:33.840 --> 00:00:40.330
So what are we going to do we going to write some javascript code inside our jobs file.

00:00:40.650 --> 00:00:47.910
So once we click on odd notes we're going to need to execute some code.

00:00:48.250 --> 00:00:48.920
OK.

00:00:49.260 --> 00:00:51.460
So let's go ahead and do this.

00:00:51.540 --> 00:00:51.870
So

00:01:00.810 --> 00:01:03.750
first of all we need to click on that button

00:01:06.540 --> 00:01:09.810
and you know it's OK or odd notes.

00:01:09.840 --> 00:01:21.840
So we're going to select that but using its ID which is notes.

00:01:22.230 --> 00:01:26.360
All right then we're going to use the click function.

00:01:26.460 --> 00:01:34.140
So the click function is going to take as a barometer a function writes

00:01:38.100 --> 00:01:43.710
which we will define as well.

00:01:45.780 --> 00:01:49.550
So first of all we're going to send an AJAX call.

00:01:49.740 --> 00:01:54.290
So that's AJAX call is going to be sent to the PSAP file creates notes.

00:01:54.510 --> 00:02:02.700
So that's file is going to run a query which will create a new node in the database.

00:02:02.700 --> 00:02:12.210
If everything goes fine then we're going to return the note Id if there is an error then we're going

00:02:12.210 --> 00:02:14.590
to return return error.

00:02:14.610 --> 00:02:15.320
OK.

00:02:15.570 --> 00:02:25.110
So this file is going to return either a number which is the ID of the newly created notes or error

00:02:26.190 --> 00:02:27.000
or it.

00:02:27.300 --> 00:02:27.600
So

00:02:31.530 --> 00:02:32.970
let's write our Ajax code

00:02:42.060 --> 00:02:51.740
so it's XYZ is don't sign DOS Ajax OK.

00:02:51.810 --> 00:02:56.900
Inside curly brackets we can replace all the promises of our AJAX call.

00:02:57.030 --> 00:02:59.340
So the first vomitus is going to be the URL.

00:02:59.370 --> 00:03:04.960
So in our case we are sending the call to create notes does ph we

00:03:09.080 --> 00:03:14.310
get the second barometer is going to be the access.

00:03:14.790 --> 00:03:19.430
Which will tell us what we're going to do if the call is successful.

00:03:19.500 --> 00:03:19.950
So

00:03:23.040 --> 00:03:26.980
we're going to execute the following function.

00:03:27.180 --> 00:03:30.750
We can give it's a prompter let's call it data.

00:03:30.960 --> 00:03:32.650
You can call it whatever you want.

00:03:33.060 --> 00:03:41.220
So that's Prometa is going to stall whatever this file is going to return to us.

00:03:41.220 --> 00:03:41.700
OK.

00:03:42.030 --> 00:03:49.480
So as you said earlier he's going to return either error or the ID of the newly created net.

00:03:49.710 --> 00:03:52.290
So let's start with the first case.

00:03:52.290 --> 00:04:08.400
So if we get error we're going to do and then else we're going to do so if data equals error

00:04:12.150 --> 00:04:16.530
then we're going to show an alert message.

00:04:16.530 --> 00:04:24.430
So basically we'd like to show that message out of the top right there.

00:04:24.690 --> 00:04:26.020
All right.

00:04:26.630 --> 00:04:27.300
OK.

00:04:27.840 --> 00:04:32.160
So basically what we need to do is go back to

00:04:34.890 --> 00:04:37.610
our main page logged in file.

00:04:37.980 --> 00:04:38.890
OK.

00:04:39.410 --> 00:04:45.540
And then right at the beginning of that section

00:04:50.360 --> 00:04:55.520
on a Dave for our last message.

00:04:55.710 --> 00:05:01.800
So we're going to create a collapsable alert message as we covered in the bootstrap chapter.

00:05:02.250 --> 00:05:07.010
So it's a commons.

00:05:07.080 --> 00:05:07.440
The

00:05:14.540 --> 00:05:18.810
so it is going to be a day.

00:05:20.250 --> 00:05:22.860
OK.

00:05:23.280 --> 00:05:25.300
So this give us an ID.

00:05:25.790 --> 00:05:27.560
It's very simple.

00:05:27.850 --> 00:05:36.650
And scientists using a couple of classes alerts and alerts danger and also we need the collapse glass

00:05:36.670 --> 00:05:37.270
.

00:05:37.860 --> 00:05:40.740
OK.

00:05:41.110 --> 00:05:41.860
All right.

00:05:42.030 --> 00:05:49.530
And then we're going to need a symbol like this one.

00:05:49.670 --> 00:05:50.370
OK.

00:05:50.630 --> 00:05:55.450
Which will enable the user to close the message.

00:05:55.620 --> 00:05:57.890
So you go to places inside a link.

00:05:57.960 --> 00:06:00.720
They covered all these earlier actually.

00:06:00.840 --> 00:06:04.140
So on the inside the link We're going to use

00:06:06.870 --> 00:06:15.010
the Times and see which is ampersand times yet like beds.

00:06:15.480 --> 00:06:19.100
And inside the link We're going on a few hours of.

00:06:19.230 --> 00:06:22.080
So let's give it a glance close.

00:06:22.080 --> 00:06:22.400
OK.

00:06:22.440 --> 00:06:23.530
We need this one.

00:06:23.540 --> 00:06:24.210
And also

00:06:27.810 --> 00:06:32.280
we need the data dismiss attributes.

00:06:33.500 --> 00:06:38.760
Where we going to specify what elements we're going to close.

00:06:38.750 --> 00:06:46.830
In either case it's going to be the elements of ID that are going to place that.

00:06:47.410 --> 00:06:47.970
OK.

00:06:48.180 --> 00:06:53.340
And then right after the link so we're going to place a paragraph.

00:06:55.310 --> 00:07:02.560
OK and let's give it an I.D. let's contents.

00:07:02.580 --> 00:07:06.530
So that's where we're going to place the content of our last message.

00:07:07.170 --> 00:07:07.710
OK.

00:07:08.040 --> 00:07:11.380
So let's save this and go back to our age of school.

00:07:11.490 --> 00:07:21.180
So if we get an error OK then we're going to change the content of our alerts message by accessing the

00:07:21.380 --> 00:07:23.520
paragraph of ID

00:07:26.940 --> 00:07:29.460
its contents.

00:07:29.550 --> 00:07:30.020
OK.

00:07:30.140 --> 00:07:35.030
I'm going to change the text inside the paragraph.

00:07:35.160 --> 00:07:46.050
And also we're going to show the alert message so we can access the alerts message using its ID which

00:07:46.050 --> 00:07:54.440
is alerts and then we can use some animation like fading.

00:07:54.540 --> 00:07:55.070
OK.

00:07:55.410 --> 00:08:01.980
So the content could be something like there was an issue inserting the new nodes in the database

00:08:03.470 --> 00:08:08.300
.

00:08:11.590 --> 00:08:15.660
OK.

00:08:18.890 --> 00:08:22.210
All right.

00:08:22.640 --> 00:08:31.110
Now if the call is successful the Create notes file is going to return the ID of the unit.

00:08:31.170 --> 00:08:40.560
So once the notes has been created OK with empty content we're going to have a text area like this.

00:08:40.560 --> 00:08:48.560
So once we use it starts typing something in there then the content of the new note is going to get

00:08:48.600 --> 00:08:49.890
updated.

00:08:49.950 --> 00:08:55.860
So we need to know which notes we're talking about so that we can update the right notes in the notes

00:08:55.860 --> 00:08:56.810
table.

00:08:57.020 --> 00:08:59.220
So we're going to need the ID of the notes.

00:08:59.340 --> 00:09:00.150
OK.

00:09:00.170 --> 00:09:03.360
So that we can edit that specific note.

00:09:03.540 --> 00:09:10.950
So what we're going to do we're going to create a variable where we're going to store the ID of that

00:09:10.950 --> 00:09:11.630
note.

00:09:11.700 --> 00:09:17.940
So at the beginning when we define variables we have a variable that we're going to call Occy of nodes

00:09:17.950 --> 00:09:19.070
.

00:09:20.180 --> 00:09:20.880
OK.

00:09:21.360 --> 00:09:28.000
So there's lots that refers to the dinos which is active.

00:09:28.190 --> 00:09:36.380
OK in our case Dustin you note if you're trying to Edie's a search notes in the file up there the active

00:09:36.380 --> 00:09:39.750
notes is the notes that we're editing.

00:09:39.750 --> 00:09:42.290
OK.

00:09:42.810 --> 00:09:52.030
So at the beginning when I said that 0 but no the AJAX call is successful.

00:09:52.030 --> 00:10:01.830
We're going to update that variable which is actually of note to the ID of the new nodes so active nodes

00:10:02.280 --> 00:10:04.650
equals data.

00:10:04.980 --> 00:10:05.990
OK.

00:10:06.620 --> 00:10:12.490
So again data this time if the AJAX call is successful he's going to be the ID of the notes.

00:10:12.620 --> 00:10:14.310
So you've got no idea of the notes.

00:10:14.490 --> 00:10:15.310
OK.

00:10:15.750 --> 00:10:19.850
Now we are going to show a text area like this.

00:10:20.120 --> 00:10:27.950
So before we show the text area we're going to make sure it's blank.

00:10:28.050 --> 00:10:29.820
So you going to access the text area

00:10:34.610 --> 00:10:40.760
have only one text area in inside our documents so we can access it using takes area just like that's

00:10:41.430 --> 00:10:42.670
OK.

00:10:44.240 --> 00:10:47.620
No need to use an ID or anything like this.

00:10:48.500 --> 00:10:49.260
OK.

00:10:49.630 --> 00:10:56.810
So we're going to change the contents of the text area to blank so we're going to use the avowe method

00:10:57.390 --> 00:11:01.170
and we're going to say that to an empty string.

00:11:01.880 --> 00:11:04.890
OK.

00:11:05.090 --> 00:11:07.980
Now we will need to show that sex area.

00:11:08.620 --> 00:11:09.350
OK.

00:11:09.390 --> 00:11:14.090
And also we need to hide certain elements and show some other elements.

00:11:14.420 --> 00:11:20.890
So you will see that we're going to hide all these hide the Edie's mustn't hide the odd notes Musson

00:11:21.580 --> 00:11:25.580
and show we all know it's Musson and show it's X area itself.

00:11:25.630 --> 00:11:29.440
So for now it is just added comments.

00:11:29.620 --> 00:11:30.180
OK.

00:11:30.290 --> 00:11:35.840
For the step on this say Show Hide elements.

00:11:35.840 --> 00:11:41.780
So we're going to use a function but we're going to call show height which will take some barometers

00:11:41.780 --> 00:11:42.270
.

00:11:42.500 --> 00:11:48.020
So we're going to come back to it in a moment and then once we show the text area we're going to make

00:11:48.020 --> 00:11:54.080
sure that we've got focus inside the text area.

00:11:54.130 --> 00:11:58.490
So to do this we're just going to access the text area.

00:11:59.970 --> 00:12:02.840
OK.

00:12:05.570 --> 00:12:11.530
And then use the focus method like this.

00:12:13.230 --> 00:12:13.960
OK.

00:12:14.480 --> 00:12:16.820
Now let's build our show hide function.

00:12:16.820 --> 00:12:24.740
So let's go to the functions section OK and writes our function in the.

00:12:25.380 --> 00:12:35.690
OK so it is defined the function using the function keyword and then it's called show hide.

00:12:35.690 --> 00:12:43.160
This function is going to take a couple of promises he's going to take a couple of race so array one

00:12:43.850 --> 00:12:45.980
and array two.

00:12:47.040 --> 00:12:47.490
OK.

00:12:47.620 --> 00:12:54.170
So everyone is going to have all the IDs of the elements that we would like to show every two is going

00:12:54.170 --> 00:12:57.880
to have all the IDs of elements that we would like to hide.

00:12:58.310 --> 00:12:59.450
OK.

00:13:00.130 --> 00:13:00.610
So

00:13:04.190 --> 00:13:05.320
how does it work.

00:13:05.600 --> 00:13:08.420
So let's start with array one.

00:13:08.780 --> 00:13:23.950
So we're going to look at elements inside array one so to access those elements we get access in IDS

00:13:23.970 --> 00:13:24.050
.

00:13:24.110 --> 00:13:35.010
OK so each ID is going to be inside the array so it's access one ID is going to be array array one.

00:13:35.960 --> 00:13:36.420
OK.

00:13:36.500 --> 00:13:42.730
And then we're going to use the index corresponding to the elements inside our array.

00:13:42.980 --> 00:13:43.760
OK.

00:13:43.750 --> 00:13:53.470
So we would like to show elements showing where which IDs are or with IDS inside every one.

00:13:53.500 --> 00:13:57.030
So we're going to use the show method.

00:13:57.470 --> 00:13:58.990
OK.

00:13:59.000 --> 00:14:10.390
And inside our four statements we're going to start with the first elements which is the elements of

00:14:10.460 --> 00:14:12.020
indexed 0.

00:14:12.590 --> 00:14:19.600
And we're going to continue until the elements of index the length of our array minus one.

00:14:19.750 --> 00:14:20.390
OK.

00:14:20.380 --> 00:14:27.460
So I less than a red dot length of the array.

00:14:28.000 --> 00:14:29.280
OK.

00:14:29.300 --> 00:14:33.850
And then every time you're going to increment by one.

00:14:34.750 --> 00:14:39.110
OK so that's for the first array for the second array you're going to do the same thing.

00:14:39.110 --> 00:14:44.020
The only thing that's going to change is instead of the show method you're going to use the hide method

00:14:44.040 --> 00:14:44.550
.

00:14:45.020 --> 00:14:46.030
OK.

00:14:46.640 --> 00:14:51.480
So that's going to be IRET too.

00:14:51.660 --> 00:14:54.650
All right so save is go back to

00:14:57.480 --> 00:14:58.790
Ajax call.

00:14:58.910 --> 00:14:59.730
So.

00:14:59.880 --> 00:15:05.230
So we'd like to show certain elements and hide certain elements.

00:15:06.020 --> 00:15:10.820
So it starts with the elements we'd like to show which will go inside our first array.

00:15:11.240 --> 00:15:12.130
OK.

00:15:12.500 --> 00:15:16.910
So the first one is our text area.

00:15:16.900 --> 00:15:17.870
OK so let's.

00:15:17.920 --> 00:15:18.290
Right.

00:15:18.320 --> 00:15:21.560
It's ID which is

00:15:28.850 --> 00:15:29.700
notepad.

00:15:29.890 --> 00:15:30.560
OK.

00:15:30.830 --> 00:15:39.860
And then the second element is the all notes button and it's is all notes.

00:15:46.410 --> 00:15:47.740
OK.

00:15:48.500 --> 00:15:55.450
Now let's move to the second array which will show the elements that we'd like to highlight.

00:15:55.700 --> 00:15:56.060
OK

00:15:56.060 --> 00:16:04.030
.

00:16:08.720 --> 00:16:11.180
So we are going to be hiding.

00:16:12.130 --> 00:16:13.320
Our notes.

00:16:13.490 --> 00:16:17.060
OK.

00:16:17.090 --> 00:16:20.210
So that response to ID notes.

00:16:20.350 --> 00:16:21.120
OK.

00:16:21.440 --> 00:16:29.510
Well you know hard the we can hide the bus and add notes.

00:16:29.560 --> 00:16:31.230
We're going to hide the Edie's muslin

00:16:34.460 --> 00:16:42.510
and also just in case you cause the Dunbarton we're going to hide that as well.

00:16:45.530 --> 00:16:47.860
OK.

00:16:47.870 --> 00:16:53.750
So let's save and go to our create notes file