So let's go about writing some JavaScript to handle the JSON that we're requesting from the page.
So right now, if we look at our handlers, which are right here, I'm going to get rid of that log
print print line, because I don't I know that works.
I don't care about it anymore.
I'm going to leave this as a get request in roots right now.
We'll change it to post before too long.
So we'll leave it as a get request right here.
And we're going to think about what we're going to do.
So let's go back to a Web browser.
Let's bring up the site, which hopefully is running.
No, I've got to start it up.
They're running now, so I can bring it up and this is the page we're going to work with, I'm going
to do the generals quarters to start with.
OK, so I want when I click this button, I want it to send an Ajax request, asynchronous request behind
the scenes without reloading this page, get some JSON and process it.
So obviously, one of the places we have to do this is in JavaScript.
So let's go to our Web page and I'll close this down here.
Let's go to the we put all of our main JavaScript on the base layout.
So the base layout is right here.
And we get down to the section called Prompt.
And the internal function from our JavaScript module that we're calling is called custom.
Now, obviously, you've probably noticed this right now.
This is not a generalized function.
We're only going to use it for one thing.
And that's just the way this this dialog box.
Obviously, if you were making this more generalized, you wouldn't be calling the the elements by ID
in a generalized function.
You'd make it more, more open.
But that's not our our purpose today.
Our purpose today is just to make this work.
So we need to make some changes to this.
So right now, what happens when you call this function is you pass it a message and a title in a JavaScript
object, which then set the values on this variable C here and we use that that variable down here.
So when message is specified here, it becomes this message here, which is tied to the HTML member
on that particular object.
And then we check to see if the before it opens, we do some things.
We initialize the date picker and then and after it opens we do the whole removing the disabled attribute.
But and then after that we have this just pop up a box that shows us what we entered.
So back on this page, if I actually open this right now and put in two dates, 25 and 26 and say,
OK, it pops this up and shows me what I entered, which just shows me that I know I'm able to do that,
which is great, but that's not what I want to do at all.
So what I'm going to do to start with is I'm going to write at the top of this.
That's OK.
Yeah.
This value form values, I'm going to rename that result just because I like that better and I'm going
to get rid of this down here that pops up the dialog box that shows us what we entered.
That's not useful at all.
Instead, I want to check to see if we actually have a result.
So if result, in other words, if there's some result coming back after this this this dialog box after
somebody clicks, OK, and this dialog box, then I want to see what that result is.
And Swale has a couple of things that I can check so I can say if result don't dismiss, which is right
in built right into swoll.
If that's not equal to.
Exactly equal to.
And the operator here is exclamation mark equals equals which is to say exactly.
Equals two.
And I'm going to check one of the built-In reasons that Swale has swoll dot dismiss reason.
And you can see this right in the small documentation, Sweedler documentation if you want to cancel.
In other words, if they didn't hit the cancel button, then check to see if we have any actual values.
And the result, if result.
Dorton value is not equal exactly to an empty string, then I want to do something.
So what I've done here is say it's really straightforward if I have a result.
And that result is not because they've clicked the cancel button on the window and the result is not
exactly equal to empty, then do something.
And what do you want to do?
Well, I actually want to call a callback.
I want to execute some JavaScript back on the client page.
That that happens when someone fills in that form.
So I have to check a couple of things here.
First of all, I'll say if Seedorf Callback C is the variable we specified way up at the top here.
OK, so what we're we're calling it my calling code.
If the callback is not equal exactly.
To undefined.
So there is a callback and I better spell undefined.
Right.
There we go.
Then inside of that I want to do something.
I actually want to call that callback, see the callback and I want to pass it.
The result, what they've entered.
OK, or when I got back.
And then if they if the result value is exactly equal to nothing, then sorry else see the callback.
I'll just pass it off false.
So it doesn't do anything.
And then one more ounce, if the result is dismiss, cancel, in other words, the the ELT's for this
part, if they actually pick the cancel button, kind of don't want to do anything, I actually don't
have to do anything.
But it's good practice just to say I call my callback and pass.
It falls again.
And this should do some things for us.
Nothing yet because we haven't done anything.
But it allows me, because I've done this, it allows me to actually process code after the swoll dialogue
is closed.
In other words, after they click the submit button or the OK button or whatever I've chosen to label
it, then I should be able to do some some actual code on my Generals' page.
So let's go back to our generals page where we're actually making this call, General Page, up tempo
and get down to this part in order to make this more useful.
I'm still going to pass that message, but I'll put it on its own line.
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
after this one and give it another attribute, which I am going to call callback.
And this is what's called by the code we were just working on.
And callback is actually a function.
That's what's a JavaScript function.
And it takes an argument of result was handed back to me by the Sweedler or by a JavaScript module.
And inside of that, right now, I'm just going to say console log code and see if this works.
So what's happening here?
Once once someone calls attention a custom, it pops up the dialog box.
They choose some dates, they click, enter, and then after they click, enter, because I have a callback
function defined here and I pass that as part of my arguments to the custom method on my JavaScript
module.
What's inside callback will get executed if result is not empty and result is not filled with.
I click the cancel button and not to submit them.
So this should work.
So let's go back over to our web browser and let's reload this page to make sure it's current.
And I'll open the JavaScript console here and I will open this up.
Check availability.
OK, so it's giving me a little warning there.
You could ignore that.
That has been there for a long time and it actually does nothing of value.
But I'll now choose the 25th and I'll choose the twenty six.
And when I click OK, I'm hoping to see a console log over in the JavaScript console and I do.
So that's been called and that's actually kind of helpful.
What I can do more than that when I do this call, what I do this callback, I don't just have to console
log.
Here's the part where we can actually execute some JavaScript code that will perform an Ajax request.
And JavaScript has a nice little package called Fetch and Fetch will do exactly what I tell it.
To go to this Uttara, which, if I recall correctly, is search availability, dash JSON.
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.
We'll change it to post eventually after you're done that dot then.
So after that's done, get the response.
Whatever is is handed to us, ok.
And give it an equal sign greater then, which is an arrow, get the response to Jason, convert the
response to Jason, which is built right in.
So I don't have to do any magic to convert the Jason I'm receiving into Jason that JavaScript can deal
with.
And then once that's done, then after that, what I want to do well, I'm going to take data and data
is just my nicely polished job, Jason, into something I can deal with in JavaScript.
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
brackets.
All I'm going to do now is set console log data.
So let's save that and see what happens.
So I reload the page, I clear the JavaScript console, I check availability.
I choose two dates, the first and the second.
I don't know why I got along dates.
It doesn't matter.
So the dates don't matter at this point.
So I've got dates in there and I click, OK, let's watch the JavaScript console.
It was called and it gave me back an object with OK, false and message is set to available.
So it did exactly what I wanted.
But how do I get the OK or get the message.
This object is useless to me.
Well I can do that to console log data dot OK.
And then I can do the same thing underneath it.
But say data message, I'm referring to the elements that are stored in that data object which were
passed by this line right here.
So when I save this and reload the page and clear the console and choose two dates, the first and the
whatever it is, let's go with the second there, OK?
And now I get my object.
I get my cold printed in the console showing that it's actually working.
The object is printed, the console, then the object, OK, and the object available, which we refer
to as data OK and data message.
So it's all set.
So now we know we can make a request to our handler, our Jason Handler, and we can actually pass the
request.
And now that we have this information, the OC is the one that's really important to us.
We can take some action and we'll do that in the next lecture.
But we'll also change this to a post request.