1 00:00:01,020 --> 00:00:06,690 So let's go about writing some JavaScript to handle the JSON that we're requesting from the page. 2 00:00:07,140 --> 00:00:13,650 So right now, if we look at our handlers, which are right here, I'm going to get rid of that log 3 00:00:13,650 --> 00:00:16,290 print print line, because I don't I know that works. 4 00:00:16,310 --> 00:00:17,460 I don't care about it anymore. 5 00:00:17,700 --> 00:00:21,050 I'm going to leave this as a get request in roots right now. 6 00:00:21,060 --> 00:00:23,000 We'll change it to post before too long. 7 00:00:23,010 --> 00:00:25,140 So we'll leave it as a get request right here. 8 00:00:26,070 --> 00:00:28,320 And we're going to think about what we're going to do. 9 00:00:28,330 --> 00:00:29,620 So let's go back to a Web browser. 10 00:00:30,570 --> 00:00:33,810 Let's bring up the site, which hopefully is running. 11 00:00:33,820 --> 00:00:34,860 No, I've got to start it up. 12 00:00:38,570 --> 00:00:43,370 They're running now, so I can bring it up and this is the page we're going to work with, I'm going 13 00:00:43,370 --> 00:00:45,500 to do the generals quarters to start with. 14 00:00:45,530 --> 00:00:54,380 OK, so I want when I click this button, I want it to send an Ajax request, asynchronous request behind 15 00:00:54,380 --> 00:00:58,770 the scenes without reloading this page, get some JSON and process it. 16 00:00:59,060 --> 00:01:03,200 So obviously, one of the places we have to do this is in JavaScript. 17 00:01:04,040 --> 00:01:09,500 So let's go to our Web page and I'll close this down here. 18 00:01:09,950 --> 00:01:14,300 Let's go to the we put all of our main JavaScript on the base layout. 19 00:01:14,300 --> 00:01:15,680 So the base layout is right here. 20 00:01:15,680 --> 00:01:17,840 And we get down to the section called Prompt. 21 00:01:18,380 --> 00:01:23,570 And the internal function from our JavaScript module that we're calling is called custom. 22 00:01:24,050 --> 00:01:26,540 Now, obviously, you've probably noticed this right now. 23 00:01:26,690 --> 00:01:28,760 This is not a generalized function. 24 00:01:28,760 --> 00:01:30,260 We're only going to use it for one thing. 25 00:01:30,260 --> 00:01:32,870 And that's just the way this this dialog box. 26 00:01:33,290 --> 00:01:40,010 Obviously, if you were making this more generalized, you wouldn't be calling the the elements by ID 27 00:01:40,010 --> 00:01:41,240 in a generalized function. 28 00:01:41,240 --> 00:01:43,100 You'd make it more, more open. 29 00:01:43,370 --> 00:01:45,090 But that's not our our purpose today. 30 00:01:45,110 --> 00:01:46,970 Our purpose today is just to make this work. 31 00:01:47,510 --> 00:01:49,380 So we need to make some changes to this. 32 00:01:49,400 --> 00:01:56,540 So right now, what happens when you call this function is you pass it a message and a title in a JavaScript 33 00:01:56,540 --> 00:02:01,970 object, which then set the values on this variable C here and we use that that variable down here. 34 00:02:01,980 --> 00:02:09,500 So when message is specified here, it becomes this message here, which is tied to the HTML member 35 00:02:09,500 --> 00:02:11,690 on that particular object. 36 00:02:11,960 --> 00:02:16,160 And then we check to see if the before it opens, we do some things. 37 00:02:16,160 --> 00:02:24,140 We initialize the date picker and then and after it opens we do the whole removing the disabled attribute. 38 00:02:24,500 --> 00:02:30,980 But and then after that we have this just pop up a box that shows us what we entered. 39 00:02:31,010 --> 00:02:39,290 So back on this page, if I actually open this right now and put in two dates, 25 and 26 and say, 40 00:02:39,290 --> 00:02:44,240 OK, it pops this up and shows me what I entered, which just shows me that I know I'm able to do that, 41 00:02:44,240 --> 00:02:46,740 which is great, but that's not what I want to do at all. 42 00:02:47,150 --> 00:02:53,150 So what I'm going to do to start with is I'm going to write at the top of this. 43 00:02:54,500 --> 00:02:55,420 That's OK. 44 00:02:55,940 --> 00:02:56,270 Yeah. 45 00:02:56,270 --> 00:03:01,340 This value form values, I'm going to rename that result just because I like that better and I'm going 46 00:03:01,340 --> 00:03:05,600 to get rid of this down here that pops up the dialog box that shows us what we entered. 47 00:03:05,630 --> 00:03:06,560 That's not useful at all. 48 00:03:07,640 --> 00:03:11,340 Instead, I want to check to see if we actually have a result. 49 00:03:11,360 --> 00:03:18,500 So if result, in other words, if there's some result coming back after this this this dialog box after 50 00:03:18,500 --> 00:03:23,240 somebody clicks, OK, and this dialog box, then I want to see what that result is. 51 00:03:23,240 --> 00:03:32,390 And Swale has a couple of things that I can check so I can say if result don't dismiss, which is right 52 00:03:32,390 --> 00:03:34,280 in built right into swoll. 53 00:03:34,490 --> 00:03:36,020 If that's not equal to. 54 00:03:36,020 --> 00:03:37,310 Exactly equal to. 55 00:03:37,310 --> 00:03:42,500 And the operator here is exclamation mark equals equals which is to say exactly. 56 00:03:42,500 --> 00:03:43,400 Equals two. 57 00:03:43,700 --> 00:03:51,380 And I'm going to check one of the built-In reasons that Swale has swoll dot dismiss reason. 58 00:03:51,380 --> 00:03:56,360 And you can see this right in the small documentation, Sweedler documentation if you want to cancel. 59 00:03:56,810 --> 00:04:02,840 In other words, if they didn't hit the cancel button, then check to see if we have any actual values. 60 00:04:02,840 --> 00:04:04,620 And the result, if result. 61 00:04:04,620 --> 00:04:11,670 Dorton value is not equal exactly to an empty string, then I want to do something. 62 00:04:11,870 --> 00:04:16,370 So what I've done here is say it's really straightforward if I have a result. 63 00:04:16,790 --> 00:04:22,610 And that result is not because they've clicked the cancel button on the window and the result is not 64 00:04:23,030 --> 00:04:26,030 exactly equal to empty, then do something. 65 00:04:26,360 --> 00:04:27,440 And what do you want to do? 66 00:04:27,470 --> 00:04:30,410 Well, I actually want to call a callback. 67 00:04:30,410 --> 00:04:34,250 I want to execute some JavaScript back on the client page. 68 00:04:34,700 --> 00:04:38,270 That that happens when someone fills in that form. 69 00:04:38,870 --> 00:04:40,700 So I have to check a couple of things here. 70 00:04:40,700 --> 00:04:46,490 First of all, I'll say if Seedorf Callback C is the variable we specified way up at the top here. 71 00:04:46,520 --> 00:04:49,700 OK, so what we're we're calling it my calling code. 72 00:04:50,240 --> 00:04:52,670 If the callback is not equal exactly. 73 00:04:52,670 --> 00:04:53,750 To undefined. 74 00:04:54,290 --> 00:04:57,050 So there is a callback and I better spell undefined. 75 00:04:57,050 --> 00:04:57,290 Right. 76 00:04:58,810 --> 00:04:59,360 There we go. 77 00:05:00,560 --> 00:05:02,930 Then inside of that I want to do something. 78 00:05:02,930 --> 00:05:08,030 I actually want to call that callback, see the callback and I want to pass it. 79 00:05:08,030 --> 00:05:09,350 The result, what they've entered. 80 00:05:09,500 --> 00:05:10,970 OK, or when I got back. 81 00:05:12,680 --> 00:05:26,360 And then if they if the result value is exactly equal to nothing, then sorry else see the callback. 82 00:05:26,930 --> 00:05:28,420 I'll just pass it off false. 83 00:05:28,430 --> 00:05:29,180 So it doesn't do anything. 84 00:05:32,980 --> 00:05:40,240 And then one more ounce, if the result is dismiss, cancel, in other words, the the ELT's for this 85 00:05:40,240 --> 00:05:43,900 part, if they actually pick the cancel button, kind of don't want to do anything, I actually don't 86 00:05:43,900 --> 00:05:44,590 have to do anything. 87 00:05:44,590 --> 00:05:49,900 But it's good practice just to say I call my callback and pass. 88 00:05:49,900 --> 00:05:50,550 It falls again. 89 00:05:52,150 --> 00:05:54,730 And this should do some things for us. 90 00:05:54,850 --> 00:05:56,470 Nothing yet because we haven't done anything. 91 00:05:56,470 --> 00:06:04,180 But it allows me, because I've done this, it allows me to actually process code after the swoll dialogue 92 00:06:04,180 --> 00:06:04,740 is closed. 93 00:06:04,750 --> 00:06:08,470 In other words, after they click the submit button or the OK button or whatever I've chosen to label 94 00:06:08,470 --> 00:06:13,100 it, then I should be able to do some some actual code on my Generals' page. 95 00:06:13,210 --> 00:06:18,340 So let's go back to our generals page where we're actually making this call, General Page, up tempo 96 00:06:19,030 --> 00:06:23,170 and get down to this part in order to make this more useful. 97 00:06:23,530 --> 00:06:26,290 I'm still going to pass that message, but I'll put it on its own line. 98 00:06:26,320 --> 00:06:31,690 I'm still going to pass a title, but I'll put it on its own line and then I'm going to put a comma 99 00:06:31,690 --> 00:06:36,190 after this one and give it another attribute, which I am going to call callback. 100 00:06:36,730 --> 00:06:39,250 And this is what's called by the code we were just working on. 101 00:06:39,370 --> 00:06:41,130 And callback is actually a function. 102 00:06:41,130 --> 00:06:42,520 That's what's a JavaScript function. 103 00:06:43,240 --> 00:06:49,180 And it takes an argument of result was handed back to me by the Sweedler or by a JavaScript module. 104 00:06:49,750 --> 00:06:56,100 And inside of that, right now, I'm just going to say console log code and see if this works. 105 00:06:56,290 --> 00:06:59,310 So what's happening here? 106 00:07:00,130 --> 00:07:05,830 Once once someone calls attention a custom, it pops up the dialog box. 107 00:07:05,830 --> 00:07:11,530 They choose some dates, they click, enter, and then after they click, enter, because I have a callback 108 00:07:11,530 --> 00:07:17,530 function defined here and I pass that as part of my arguments to the custom method on my JavaScript 109 00:07:17,530 --> 00:07:18,070 module. 110 00:07:18,640 --> 00:07:25,090 What's inside callback will get executed if result is not empty and result is not filled with. 111 00:07:25,100 --> 00:07:27,380 I click the cancel button and not to submit them. 112 00:07:27,550 --> 00:07:28,650 So this should work. 113 00:07:28,660 --> 00:07:33,520 So let's go back over to our web browser and let's reload this page to make sure it's current. 114 00:07:33,520 --> 00:07:38,290 And I'll open the JavaScript console here and I will open this up. 115 00:07:38,800 --> 00:07:39,730 Check availability. 116 00:07:39,880 --> 00:07:41,920 OK, so it's giving me a little warning there. 117 00:07:41,920 --> 00:07:42,700 You could ignore that. 118 00:07:42,700 --> 00:07:46,480 That has been there for a long time and it actually does nothing of value. 119 00:07:47,080 --> 00:07:50,350 But I'll now choose the 25th and I'll choose the twenty six. 120 00:07:50,590 --> 00:07:56,950 And when I click OK, I'm hoping to see a console log over in the JavaScript console and I do. 121 00:07:56,950 --> 00:08:00,550 So that's been called and that's actually kind of helpful. 122 00:08:01,330 --> 00:08:07,780 What I can do more than that when I do this call, what I do this callback, I don't just have to console 123 00:08:07,780 --> 00:08:08,110 log. 124 00:08:08,110 --> 00:08:14,140 Here's the part where we can actually execute some JavaScript code that will perform an Ajax request. 125 00:08:14,620 --> 00:08:21,010 And JavaScript has a nice little package called Fetch and Fetch will do exactly what I tell it. 126 00:08:21,010 --> 00:08:28,930 To go to this Uttara, which, if I recall correctly, is search availability, dash JSON. 127 00:08:29,260 --> 00:08:35,350 OK, so that's what I'm doing is saying go to that URL and right now it's a get request, which is fine. 128 00:08:35,350 --> 00:08:39,760 We'll change it to post eventually after you're done that dot then. 129 00:08:39,760 --> 00:08:42,430 So after that's done, get the response. 130 00:08:42,430 --> 00:08:44,820 Whatever is is handed to us, ok. 131 00:08:46,390 --> 00:08:53,170 And give it an equal sign greater then, which is an arrow, get the response to Jason, convert the 132 00:08:53,170 --> 00:08:55,890 response to Jason, which is built right in. 133 00:08:55,900 --> 00:09:01,570 So I don't have to do any magic to convert the Jason I'm receiving into Jason that JavaScript can deal 134 00:09:01,570 --> 00:09:01,890 with. 135 00:09:02,830 --> 00:09:10,120 And then once that's done, then after that, what I want to do well, I'm going to take data and data 136 00:09:10,120 --> 00:09:15,790 is just my nicely polished job, Jason, into something I can deal with in JavaScript. 137 00:09:16,030 --> 00:09:22,930 And I will just do that as what I want to do once I get that data is after this this pointer is in curly 138 00:09:22,930 --> 00:09:23,470 brackets. 139 00:09:23,760 --> 00:09:26,980 All I'm going to do now is set console log data. 140 00:09:27,700 --> 00:09:29,350 So let's save that and see what happens. 141 00:09:30,740 --> 00:09:35,200 So I reload the page, I clear the JavaScript console, I check availability. 142 00:09:35,200 --> 00:09:38,710 I choose two dates, the first and the second. 143 00:09:40,240 --> 00:09:41,370 I don't know why I got along dates. 144 00:09:41,380 --> 00:09:41,860 It doesn't matter. 145 00:09:41,860 --> 00:09:43,530 So the dates don't matter at this point. 146 00:09:43,540 --> 00:09:46,950 So I've got dates in there and I click, OK, let's watch the JavaScript console. 147 00:09:47,710 --> 00:09:54,340 It was called and it gave me back an object with OK, false and message is set to available. 148 00:09:54,490 --> 00:09:56,170 So it did exactly what I wanted. 149 00:09:56,440 --> 00:09:59,650 But how do I get the OK or get the message. 150 00:09:59,710 --> 00:10:01,210 This object is useless to me. 151 00:10:01,510 --> 00:10:08,080 Well I can do that to console log data dot OK. 152 00:10:08,860 --> 00:10:10,600 And then I can do the same thing underneath it. 153 00:10:10,600 --> 00:10:16,840 But say data message, I'm referring to the elements that are stored in that data object which were 154 00:10:16,840 --> 00:10:18,550 passed by this line right here. 155 00:10:19,150 --> 00:10:27,910 So when I save this and reload the page and clear the console and choose two dates, the first and the 156 00:10:27,910 --> 00:10:31,080 whatever it is, let's go with the second there, OK? 157 00:10:31,720 --> 00:10:33,190 And now I get my object. 158 00:10:33,700 --> 00:10:36,910 I get my cold printed in the console showing that it's actually working. 159 00:10:37,690 --> 00:10:43,960 The object is printed, the console, then the object, OK, and the object available, which we refer 160 00:10:43,960 --> 00:10:47,710 to as data OK and data message. 161 00:10:47,740 --> 00:10:48,630 So it's all set. 162 00:10:48,850 --> 00:10:56,350 So now we know we can make a request to our handler, our Jason Handler, and we can actually pass the 163 00:10:56,350 --> 00:10:56,980 request. 164 00:10:56,980 --> 00:11:00,580 And now that we have this information, the OC is the one that's really important to us. 165 00:11:00,850 --> 00:11:03,910 We can take some action and we'll do that in the next lecture. 166 00:11:03,910 --> 00:11:06,910 But we'll also change this to a post request.