4.2 Responding to Events
In this lesson, you will learn how to use Blaze’s event listener functionality to respond to a form submission event.
1.Introduction1 lesson, 00:34
2.Up and Running With Meteor3 lessons, 10:36
3.Building a Website With Meteor5 lessons, 36:08
4.Working With Dynamic Data9 lessons, 1:21:35
5.Conclusion1 lesson, 00:35
4.2 Responding to Events
In our last lesson we were introduced to the concept of collections in Mongo DB, and we created our first collection that has a couple of user posts stored in it. And now that we know how to retrieve the documents in a collection such as these posts here, I wanna talk about how we can create a new one. But before we get to the creation of new documents within our collection, I wanna talk about how we can respond to events, more specifically, a forum post event. So what I wanna do is I wanna create a simple text field up here at the top, where you can enter in the text for your new post. And then when you enter in that text, the Meteor app is going to respond by saving that text to the database. But before we can get to the database part of it, I wanna talk about again responding to those events. So let's jump into our code. And we're taking a look at the body.html, because that's the main body of our document. And here we have our h2 with Latest User Posts, and then below that, we have our userposts-container. But below that h2, and before we get to that container, I wanna create a form element, and I'm gonna give this a class of new-userpost. And you'll notice I'm not giving this form an action or anything like that. I'm just creating a form with a class name, and then I'm going to create an input inside that form. So this input is gonna be a type of text, I'm gonna add a place holder here, and I'm just gonna say what's on your mind. And we're gonna give this a name of text. And you'll notice that name corresponds to the field that we're actually saving it in. We're saving it in the text field, in the user post collection. So what I wanna do is create a way to respond to this form so that when we type in some text and hit Enter, it will recognize that and cause something to happen. So let's save our html file. And before we get any further let me go ahead and remind you that the changes we made in the last lesson were saved in the site 006 folder, and the changes we make in this lesson will be saved in site 007. So I wanna jump into the body.js file, we'ere currently looking on body.html, and I wanna look at body.js. And what I wanna do again is I want to create an event to respond to a form submission. Well, Meteor's templating engine gives us a very handy way to handle this, and this is actually specific to Blaze not just Meteor. But we can create our own events using templates, by typing Template with a capital T dot and then the name of the template that is going to respond to these events, and this template is our body template. So template dot and then the name of the template and then dot and then events. And this is gonna look just like our helpers, we're going to have a set of parenthesis and a set of curly brackets. And then inside those curly brackets in parenthesis we will insert any events that we want to respond to. So, these are going to look a little bit different, it's gonna look a little bit weird. We're gonna have the name of our event inside quotes, and this is what it's going to look like. First of all, this is a submission event. If it was a click event, you would have the word click here. This is a submit event on a form, so we're gonna type in the word submit, space, and then, the CSS selector for the item that we're listening for the event on. And we're listening for the event on this new user post form. And again, it has a class name of new-userpost, so we're gonna use that selector here to point to that class name. So we have submit, space, and then .new-userpost. And that's how we respond to a submit event. And then it's gonna look like a function. So I told you this was gonna be a little weird. It's gonna look like a function because we're gonna have a set of parentheses here and we're gonna pass in an event variable. And then after the parentheses we're gonna have our opening and closing curly brackets for that function. So then the first thing I wanna do is I want to prevent any browser default actions that would happen on a form submission. And the way do that is we point to this event variable here, and then say .preventDefault(), semicolon to end your statement. And again, that will prevent the browser default actions. And then the next thing I wanna do is, for now, I just want to do a console log. Eventually, we're actually gonna be saving our data to the database at this point, but I just wanna make sure that this is working. So I'm gonna do a console log, and I'm gonna say form submitted. And that's all I want to do, I just want to make sure that this event's template is working, so let's save that. And let's take a look at our page, and it has refreshed and we see the text fields doesn't look very good, so we're gonna jump back into our code. We're gonna open up main.css in our client folder, and I'm gonna go ahead and take all the rest of our CSS for this course. And I'm just gonna copy it and paste it into this document. So there's a lot of stuff here. You're welcomed to go through that and see how it's used. But for now, I'm just going to save that and we'll jump back into our browser. And there we go, that looks a lot better. So let's hit F12 to open up our console. Make sure that the console tab is selected here. And I'm just gonna put my cursor in here, type in some letters and hit Enter. And sure enough that console log is triggered, we see forms submitted there. So we know that our template.body.events are working right. So again, it looks really weird the way this function is constructed. We have a set of quotation marks and inside those quotation marks we have the event name, and then the space, and then the CSS lecture that we're listening for that event on. So I hope that made sense. With that done, we'll go ahead and move on to the next lesson where we'll talk about how to actually save this data, whatever we type into that field, we're gonna save that data to the database. So thank you for watching, and I'll see you then.