1

00:00:00,600 --> 00:00:06,540

So this time around, let's try changing our vets request that we're making in JavaScript from a get



2

00:00:06,540 --> 00:00:12,390

to a post and let's actually send all of our form data that we're going to need, including our start



3

00:00:12,390 --> 00:00:13,130

and end date.



4

00:00:13,140 --> 00:00:18,510

And let's also generalize our custom function in our JavaScript module.



5

00:00:18,790 --> 00:00:20,990

It's a fair bit to do, but none of it is terribly difficult.



6

00:00:21,110 --> 00:00:21,750

Let's get started.



7

00:00:22,680 --> 00:00:29,340

So to start with, I am going to go over to my roots file, which is right here, and I will change



8

00:00:29,340 --> 00:00:32,300

search availability from a get to a post.



9

00:00:32,610 --> 00:00:33,330

So that was easy.



10

00:00:33,390 --> 00:00:37,410

Now it's a post request, but there's a bit more work to do here.



11

00:00:37,410 --> 00:00:41,850

So let's go over to our generals page and look at our HTML.



12

00:00:42,300 --> 00:00:48,630

So right now I'm at this point, I'm creating my fetch request and sending it as I get.



13

00:00:49,020 --> 00:00:53,160

And we need to make that an actual post, which isn't that hard.



14

00:00:53,700 --> 00:00:56,700

So first thing we're going to do is look at the demo we're sending.



15

00:00:56,730 --> 00:01:03,110

Well, we have a form and that form has an input here, which is start an input here, which is an end.



16

00:01:03,470 --> 00:01:06,150

It doesn't have our series CSF token.



17

00:01:06,160 --> 00:01:08,000

So we're going to have to add that somewhere.



18

00:01:08,130 --> 00:01:10,430

And I could put it right in the form, but I'm not going to.



19

00:01:11,280 --> 00:01:16,240

And we also need to change the way that we're calling our fetch.



20

00:01:16,260 --> 00:01:17,600

So let's think about this.



21

00:01:17,790 --> 00:01:23,810

First of all, that form has an ID, so I'm going to get that form and I'm going to store it in a variable.



22

00:01:23,820 --> 00:01:29,670

So let and I'll just call it form equal document get element by ID.



23

00:01:29,700 --> 00:01:31,230

And what's the idea of this form?



24

00:01:31,260 --> 00:01:32,580

It is right up here.



25

00:01:32,800 --> 00:01:33,700

Let's copy that.



26

00:01:33,710 --> 00:01:36,790

So I don't make any typos and paste it in here.



27

00:01:37,140 --> 00:01:38,690

Now I have a reference to that form.



28

00:01:39,780 --> 00:01:46,200

Well I'm going to do next is I'm going to program programmatically create form data exactly the kind



29

00:01:46,200 --> 00:01:51,630

of data or exactly the kind of information that is sent in a post request.



30

00:01:51,630 --> 00:01:57,360

And fortunately, JavaScript has a nice little function for doing that, which goes like this let and



31

00:01:57,360 --> 00:02:06,300

I'll call it form data equal a new and the JavaScript type is called, not surprisingly, form data,



32

00:02:06,840 --> 00:02:08,550

and that will actually take an argument.



33

00:02:08,670 --> 00:02:14,550

And the argument I can pass it is the reference to the form I want to get the data from which I stored



34

00:02:14,550 --> 00:02:15,490

in a variable form.



35

00:02:15,900 --> 00:02:20,700

So what I've done with those two lines of code, the first one is I got the form and I stored a reference



36

00:02:20,700 --> 00:02:21,570

to it in a variable.



37

00:02:21,940 --> 00:02:29,040

And here in the second one I created a form data variable that contains all of the elements, all of



38

00:02:29,040 --> 00:02:33,450

the inputs from the form that I stored in that that variable named as form.



39

00:02:33,540 --> 00:02:37,110

So now I have exactly what I need to post with one exception.



40

00:02:37,470 --> 00:02:39,360

I don't have my CSF took it.



41

00:02:39,690 --> 00:02:43,650

Now, as I said, I could have gone up here, created it and hit an input and that would work just fine.



42

00:02:43,950 --> 00:02:46,850

But there's another way I can append into that form.



43

00:02:47,090 --> 00:02:48,090

Form did a variable.



44

00:02:48,100 --> 00:02:52,980

I can just say form data don't append and what do I want to append.



45

00:02:52,980 --> 00:02:57,350

Well, I want to append something exactly as it would appear in a form input.



46

00:02:57,360 --> 00:03:03,210

So it has a name and it needs to be called CSS, RF underscore token and it has to have a value.



47

00:03:03,540 --> 00:03:08,450

And I'm going to just pull that right out of the data that I pass to every one of my goaland templates.



48

00:03:08,610 --> 00:03:18,660

So in Double Curlee quotes Dot and the name that is in my template data object is C SRF took it and



49

00:03:18,660 --> 00:03:20,730

there I have now appended that to it.



50

00:03:21,180 --> 00:03:26,340

So all I need to do now is to change this fetch request from a get to a post.



51

00:03:26,340 --> 00:03:31,920

Well that actually will take two arguments so I can put a comma here and then in curly brackets I can



52

00:03:31,920 --> 00:03:34,110

construct what I want to add to it.



53

00:03:34,110 --> 00:03:39,450

And what I want to change it to is from its default method of get to method post.



54

00:03:40,170 --> 00:03:47,190

And I want to append in there the body of the request, which is going to be my form of data.



55

00:03:48,720 --> 00:03:56,640

And with that little change, what I have done in essence is convert my fetch from a get to a post and



56

00:03:56,640 --> 00:04:02,490

I've included all the information I want to post to send along in that post with my form there.



57

00:04:02,490 --> 00:04:10,410

So that will have my start, my end and the one I manually appended my CSF token C SRF token, I spelled



58

00:04:10,410 --> 00:04:10,830

that right.



59

00:04:11,070 --> 00:04:16,800

So let's save this, let's open our terminal, stop the application just to make sure everything is



60

00:04:16,800 --> 00:04:19,770

working the way it's supposed to because I change my get to a post in my route.



61

00:04:19,770 --> 00:04:21,480

So if I don't do this it's not going to work.



62

00:04:22,050 --> 00:04:22,800

Start it up.



63

00:04:23,460 --> 00:04:24,480

It compiles.



64

00:04:24,870 --> 00:04:31,770

Let's go over to our Web browser, reload the page, clear the console and try checking availability.



65

00:04:32,160 --> 00:04:39,240

So my starts the seventeenth, my end is the eighteenth and earlier are the 17th and 18th and I click



66

00:04:39,240 --> 00:04:39,540

OK.



67

00:04:40,530 --> 00:04:41,730

And it worked.



68

00:04:41,730 --> 00:04:45,900

It called it, it posted it, it included the CSR, css, RF token.



69

00:04:46,170 --> 00:04:47,460

That is great.



70

00:04:48,060 --> 00:04:56,010

Now the last thing I want to do in the last lecture I mentioned over here in my base layout that this



71

00:04:56,010 --> 00:04:57,840

function, my function called custom.



72

00:04:58,140 --> 00:04:59,790

It is not exactly.



73

00:04:59,890 --> 00:05:05,650

Generalized, it's only good if I'm posting information that has the start in the end, and that's not



74

00:05:05,650 --> 00:05:06,260

helpful at all.



75

00:05:06,850 --> 00:05:09,360

So what I'm going to do instead is look at this.



76

00:05:09,370 --> 00:05:14,710

I want to copy will open out of there exactly as it exists.



77

00:05:15,110 --> 00:05:21,880

I'm going to go over to Generals' Page and the part where I actually make the call to attention.



78

00:05:21,970 --> 00:05:24,610

I'm going to just before the callback and after the title.



79

00:05:25,150 --> 00:05:26,230

I want to paste that right in there.



80

00:05:27,640 --> 00:05:33,850

Then what I'm doing is specifying as part of my constructor, my will open Lodrick, then I'll go back



81

00:05:33,850 --> 00:05:40,570

to my base layout and I'm going to delete all this stuff and just going to say, just like I did down



82

00:05:40,570 --> 00:05:45,760

here, where I say if callback is not equal to undefined, then run callback here.



83

00:05:45,760 --> 00:05:54,430

I'm going to say if will open is not even sorry if Seada will open.



84

00:05:58,550 --> 00:06:04,340

And no, parentheses is not exactly equal to undefined, in other words, if it specified when I make



85

00:06:04,340 --> 00:06:08,660

the call to this function and execute, zero will open.



86

00:06:13,770 --> 00:06:18,720

Which will work, that should work just fine, because back over here on the generals page, all I'm



87

00:06:18,720 --> 00:06:22,920

doing, I could have used this as an anonymous function, but this is just another syntax to do.



88

00:06:22,920 --> 00:06:30,210

Exactly the same thing I'm specifying Will Open is set to this function and that's being passed over



89

00:06:30,210 --> 00:06:34,290

to my my prompt function custom.



90

00:06:35,430 --> 00:06:36,780

So I've done it with will open.



91

00:06:36,780 --> 00:06:38,280

I could do the same thing with did open.



92

00:06:38,280 --> 00:06:46,080

I can copy this, go back over to my roots file, not my e-mail, my generals page and place it down.



93

00:06:46,440 --> 00:06:47,110

Where is it here.



94

00:06:48,120 --> 00:06:50,250

This is on base level one of the general's page.



95

00:06:50,260 --> 00:06:50,700

There it is.



96

00:06:51,000 --> 00:06:53,000

And I can put it anywhere but I'll put it right here.



97

00:06:53,160 --> 00:06:56,970

Did open exactly the same logic, but it has to have a comma after it, of course.



98

00:06:56,970 --> 00:07:02,340

Otherwise I'm going to get a JavaScript error because I have this and this will open is being passed



99

00:07:02,340 --> 00:07:04,890

a function did open is being passed a function.



100

00:07:04,890 --> 00:07:06,030

So that works just fine.



101

00:07:06,450 --> 00:07:14,330

And I can go back to base layout, delete these lines and use exactly the same logic and just say if



102

00:07:14,360 --> 00:07:26,280

Ceder did open with no parentheses is not exactly equal to undefined undefined then call Seada did open



103

00:07:27,750 --> 00:07:28,590

and I should work.



104

00:07:28,890 --> 00:07:30,150

So let's save this.



105

00:07:30,240 --> 00:07:35,970

Make sure everything saved go back over to our JavaScript or our web browser, reload the page, clear



106

00:07:35,970 --> 00:07:38,610

the console, put some dates in there.



107

00:07:38,850 --> 00:07:41,410

So 23 and 24 there.



108

00:07:41,490 --> 00:07:43,620

I've got 23 and 24 click OK.



109

00:07:43,890 --> 00:07:45,600

And it worked just fine.



110

00:07:45,900 --> 00:07:54,450

So now I have a truly useful function that I can call anywhere past anything I want for the contents



111

00:07:54,450 --> 00:07:57,630

and just by writing HTML and storing it at a JavaScript variable.



112

00:07:57,900 --> 00:08:03,840

And I can also specify what I want to happen on will open pre confirmed did open anything I want to.



113

00:08:03,840 --> 00:08:04,470

I can do that.



114

00:08:04,530 --> 00:08:07,710

I'm not doing with pre confirm right now, but I could do exactly the same thing.



115

00:08:08,250 --> 00:08:09,360

Since we're not using that.



116

00:08:09,810 --> 00:08:10,350

Why don't we do.



117

00:08:10,350 --> 00:08:10,940

Exactly.



118

00:08:10,980 --> 00:08:11,370

Just leave.



119

00:08:11,370 --> 00:08:12,600

That is, I'll just leave it alone.



120

00:08:12,600 --> 00:08:14,340

It's not hurting anything right now because I'm not calling it.



121

00:08:14,340 --> 00:08:20,880

But the logic is if I wanted to make pre confirms something I can override when I call the custom function,



122

00:08:21,300 --> 00:08:26,210

then I can use exactly the same logic to put an if statement in here and you're good to go.



123

00:08:26,610 --> 00:08:30,450

So there now we know how to post, we know how to post to Ajax.



124

00:08:30,450 --> 00:08:35,100

We know how to send a get request Ajax and we know how to handle the response that we're sending back.



125

00:08:35,850 --> 00:08:40,200

So in the next lecture we need to look at server side validation.



126

00:08:40,200 --> 00:08:45,720

We have some great client side validation for some of our forms, but there's none actually working



127

00:08:45,720 --> 00:08:47,070

at all on this form.



128

00:08:47,370 --> 00:08:49,380

I can submit that and it works just fine.



129

00:08:49,380 --> 00:08:54,150

It says, OK, you set no dates, but there's no client side JavaScript validation.



130

00:08:54,540 --> 00:08:56,220

No, I could add that manually.



131

00:08:56,220 --> 00:09:02,250

It would be kind of a chore to do it since I'm doing my send of the data using Ajax and that's very



132

00:09:02,250 --> 00:09:02,730

fast.



133

00:09:02,730 --> 00:09:04,830

I don't have to load the entire page over again.



134

00:09:05,040 --> 00:09:11,070

I'm going to do my validation for that form and indeed for all of our forms as time goes on on the server



135

00:09:11,070 --> 00:09:11,520

side.



136

00:09:11,520 --> 00:09:13,830

And we'll get started on that in the next lecture.