Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:19Length:2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.7 Editing Posts

We already have the “update” method in place, and in this lesson, we’ll talk about how to create a modal where we can edit the text of a post.

4.7 Editing Posts

Now that we know how to delete an item, I wanna talk in this lesson about how to edit an item on our page. And we've already created the method that's gonna do that in our API folder. And now we just need to add a click event to this button to make it happen. And what I wanna do is when we click on this button, I want to pop up a modal. And we're gonna use a bootstrap modal just to keep it simple. So the first thing we need to do is we need to add bootstrap to our site. Now, I've already added it here. As you can see, it's already been installed, but the command for installing it, I'm just gonna hit the up arrow so we can see that command, is Meteor add twbs:bootstrap, and that will actually add Bootstrap 3 to your site. There's not currently a lot of support for Bootstrap 4 in Meteor, at least not for adding it this way. But we're just gonna work with version three for now because I'm more focused on Meteor than I am on bootstrap anyways. So we've added it to our site here, and now we need to create a click event for this button. So when we click on that button, the model will pop up, and in that model there's gonna be an input field that's already gonna be populated with whatever text is in the posts that we just clicked on. And then we can edit that text in that input field and click on Save and it should save the posts for us. So before we get started, I need to comment something out. So in an earlier video, in the userposts.js file, I pasted the final code for our remove and update functions. But there's a certain portion of this update function which isn't gonna work just yet, and that's everything we see here from constant user post down to the bottom of this if statement here. So I'm just gonna grab all of that and comment it out. We'll talk about what that does later on, but for now, it's just gonna break things. So once that is commented out, we can save the file and move on. Do another thing that you might notice is that, I was going to close that, is that we now have two new files in our import ui folder. We have a file called editmodal.html and another one called editmodal.js. This is a new template that I've added to our project. And if you look at the HTML inside this template, all we have here is a bootstrap modal. Very, very simple and then one thing I do wanna point out here is that inside the modal, we have this input field which is just a text field with an ID of text edit. We're gonna be using that ID to point to this text field, and one thing to keep in mind is that this model does not know which item we clicked on. So we've got numerous post, numerous user posts on the screen and when we click on one of those edit buttons, we need to be able to tell this modal which edit button we clicked on. So what we need to do is we need to pass in the id for that particular user post. And what we're gonna do is we're going to attach that ID to this input field with a data attribute called data post ID. And then once data post ID is populated, we'll know which post to save it to when we click on this button here to save our changes. So again, we'll get more into that as we move forward. But let's jump over to our editmodal.js file which is the JavaScript end of our new template. And you'll see that we have a click event here for our save changes button in our modal. And so we have this constant called text edit which is just pointing to that text edit input field. So this is pointing to that text field, and then we have a constant called ID which is pointing to that data postid attribute that we talked about. Now that data postid attribute isn't here in the HTML file, but we're going to attach that data postid to this input text field using JavaScript. So that when we click on the Save Changes button, by the time we've clicked on that, this data post ID attribute will be populated with the ID of the user post that we're trying to edit and that ID will then be stored in this variable. So then we're going to store the value of that text field, whatever we typed into that text field, we're gonna store that value in this constant called text and then we're going to use Meteor.call to call our update function. We're gonna pass in the id of that user post and we're gonna pass in our new text. And this should save the changes for us. And then after we save those changes, we're going to hide our bootstrap modal. So we have this new template, and this new template is not gonna do anything until, first of all, we put it on the screen. So we need to add this modal to the body of our document. So let's go to body.html inside our UI folder. And just before our closing body tag, I'm gonna add our edit motor template. Now, we can't access this editmodal template until we actually input that into the JavaScript file for our body template. So let's save our HTML file and then let's jump into body.js and in body.js, we need to import the editmodal template so editmodal.js. So let's save them, and then the next thing we need is we need to add a click event to this edit button. And this edit button is in our user post template, so let's go back to our files here. We are gonna userpost.html. Here's our edit button right here. Let's create a click event for that edit button. So we are gonna go into userpost.JS. And I'm going to copy and paste this click event for our edit button here. So we're preventing the default behavior for clicking on that button. And then, after that, we're pointing to, or we're creating this constant called txtPost, which is simply pointing to the txtEdit input field that's inside our modal. So that input field is now stored in this txtPost variable. Then we have a constant called userpost, and you'll notice that we're using the userpost collection and we're trying to find the userpost associated with the ID of the template that we just clicked on. So we've just clicked on an edit button for one of our templates or for one of our user post. And the id for that user post is what we're using to find that particular entry in the database. So findOne is a MongoDB command. And it helps us to find one item that matches the id that we pass into it. And if we're going to call this userposts, we need to make that we import it. So I'm going to copy and paste that import statement here. And now that it's here, we can access it using Userposts.findOne. And the reason we're grabbing that userpost is because we need to know the value that's stored in it, the text value that's stored in it so that we can display that value in the input field when the model pops up. And so remember that input field is now stored in this text post variable. And then after we pull that user post, we're pointing to that input field and we're setting the value equal to the text that's stored in that entry in the database. So reporting to the text property of that particular post to that we just found, and then we're also adding the data postid attribute to that text field and setting it equal to this.id. And now that that postid is added, remember, we have our editmodal here. We're adding that data postid to this input field so that we'll know, when we click on the Save Changes button, we'll know which posts to save the changes to. So let's go to userposts.js. So we'll do all of that, and then we'll trigger the modal and cause it to pop up using this code here. And then once all of that is done, again, the editmodal.js file will kick in, and will have this save-changes click event, and it will run through all of that code that we've already talked about. So let's see if this works. That's a lot of moving pieces that we've added there. We just need to make sure that it works. So let's jump back into our site, and in a second, it should refresh, and if it doesn't, we can click refresh ourselves and it'll do it. So now let's click the edit button on one of our posts. We'll click and sure enough our modal pops up. It says this should be a string, let's change the text here, changed to something else and we'll click on save changes. And sure enough it saves those changes for us and if we refresh our page, we'll see that those saved changes are still there. So I realize we kind of rushed through that, because we're running short on time, but I hope that made sense. If not, I would encourage you to go back through this video, watch it again, look through all of the files in the Site 12 folder. That'll have all of our changes that have been saved, and, again, make sure that you add Bootstrap to your site before you do all of this, otherwise the modal is not gonna work. So thank you for watching, and I'll see you in the next lesson.

Back to the top