OK, so we're going to look at another kind of notification so far, we have this one, which is kind
of cool Nottie, and that's great for nonintrusive notifications that you want to get to your user.
But sometimes you really need to get your user's attention.
And we want to do a modal alert.
Now, as you probably know, if we go over to get bootstrap and we look at documentation and we go to
component's, it has a modem so we can actually use bootstraps Motal if we want to.
And it's pretty straightforward.
It looks like this.
It can pop that up if you want to.
The reason I'm not going to use it right now is because like pretty much everything else in bootstrap,
all the interactive stuff anyway, it depends upon query and I'm not really a big fan of.
This looks great.
Don't get me wrong.
And it's pretty easy to do.
But we're going to use something else and we'll the one I want to use is called Sweedler.
And Sweedler is really, really good.
So we can look at this, for example, a very basic message.
There is any fool can use a computer.
That's true, but not entirely in my experience.
But that's neither here nor there.
You can put a title in an icon and it's really pretty easy to use.
So let's install it to start with.
So we'll go to installation and we will grab the source from a CTM and we will put that.
This one is a script, so I'll put that at the bottom of my page.
So go to my I'm doing everything on reservations each HTML.
And when we cut this up into goaland templates, we'll make it a little more organized.
But I'm going to save that there.
And how do we use this thing?
So let's go back to the documentation and use it.
So we put that in there.
Good.
We put that in there and let's call a sweet alert.
So I'll take this.
And what I'll do is I'm going to reprogram my button over here, which currently shows a nodi notification,
and I will instead have that fire, the Sweedler.
So that's right here in my JavaScript, where I'm adding my listener to the element with the idea of
color button when it's clicked, do whatever is in here.
So accommodate Sweedler, the notify and I'll put in Sweedler and save this.
Go back, reload my page in the mail, look at it in more detail.
Let's just make sure it works and it does error.
Do you want to continue?
Cool.
All right.
So the way that this actually works is it's calling swoll and then it's calling a method on swoll.
Small must stand for Sweetland and then it fires in some parameters.
And that's pretty good.
I mean, that's actually pretty useful.
And I could if I wanted to come down here and add a function saying function, notify Motal and we'll
add some arguments there in a moment.
So let's go up here and copy this and see what we should put in.
So I'll copy that, paste it down here and say swoll file fire.
So it has a title so I could put in title.
It has some text I couldn't text.
It has an icon icon and it has a confirmation button.
OK, now let's get a look at the documentation.
Well, of course, to make this work, I would have to go title title, which matches my parameter up
there, text text which matches my parameter here and icon, icon, confirmation button confirmation
button text.
And those don't match.
So let's make the match and that will work.
There's no question that I could do that.
So I come up here and delete this and just call, notify Moodle and pass in a title.
So I'll put it in title and text.
I'll make it.
Hello world italicized.
Just because I can, I can.
I don't know what my icons are, so let's see what my icons are.
Back to my documentation for sweet alert and look for icons.
Success, error, warning in info.
Let's make it a success.
And confirmation button, text my text for the button, doesn't matter what I put in there, I'm just
testing this.
I don't want to duplicate that.
Let's save this.
Go back and preview it and see how it works.
OK, so everything seemed to work except this part, which says ETM Hello, World M, I thought when
I looked at the documentation that you could put some HTML in there.
So why didn't that work?
You are because rather than text, it should be HTML, so I can make this HTML save that go back, I
should be able to reload this and that should be italicize this time it's the wrong button and there
it is.
OK, so that worked pretty well.
I really like the animation of the checkmark.
That's a nice feature.
So this is clearly going to do what I want.
But let's look at this in a little more detail.
What we can do here are all sorts of things.
We can have the basic message.
We can have one with some text under it.
We can have a model with a footer and it gets more complex, long content inside so we can scroll all
of that.
OK, that's so, so far, so good.
When we get down here, a little bit more custom buttons with Ariah labels, we can do that.
A dialogue with three buttons.
We can do that.
We can have a custom position dialog.
We can have a custom animated dialogue.
There's a lot of functionality here.
A confirmed dialogue with.
Yes.
So there's a here we can we can also even change the styling of the buttons.
Pretty straightforward.
Let's go down to Ajax request example.
What is Ajax?
Ajax stands for asynchronous JavaScript and XML that nobody uses XML anymore.
We use Jason, but we still call it Ajax because it was used for a long time.
This allows me if I click on this, submit my GitHub username TESOL to look up and it finds my picture.
So clearly we can do way more with something like this.
I mean, even just the fact that I can type something in is kind of cool.
I can chain modals so I can say a or whatever, something else, something else.
So clearly there's a lot more I can do with this than I can with just a standard dialog box, even the
bootstrap one.
The problem is, if I want to do that, all I'm doing here is calling something Hello world.
What if I want to write JavaScript that allows me to do all sorts of things?
Well, I can do that just by copying and pasting examples from the GitHub, the documentation for a
sweet alert.
But it would be more useful if I could actually do what I did with With Nottie.
Just simplify it with a simple command.
So what I could do, I suppose, is write one function for notification, one function for a prompt
input, one function for an Ajax request, one function to run some custom javascript of all these different
functions.
And every time I want to use them, I'm going to be writing, as you can see in the examples here,
some pretty long scripts.
That seems like a lot of work.
There's got to be a better way to do this.
Well, what we're going to do is we're going to actually write not in this lecture, but in the next
lecture.
We're going to take one of the functions available to us in JavaScript called modules.
And we will write a JavaScript module which allows us to simplify calling Sweedler.
So sweet.
Alert is pretty, pretty impressive, actually.
It even has Tostes.
I don't know if I showed you those.
Let's look for toast.
There's no example here.
There it is.
Is just an example.
Yes.
See, it puts the message up here, a little message that pops up in a corner and I can specify what
corner we're going to write a module that allows us to simplify our calls to Sweetland.
So we'll do that in the next lecture, because I want to keep this one some fairly complex concepts
I'll be throwing at you for the next little bit.
So I'll keep the lectures relatively short.
In the next lecture will go through what a JavaScript module is and how we can write one and we'll do
it using suite alert for our functionality.
All right.
That's enough for this time around.
We'll pick it up in the next lecture.