Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Update and Delete Data

Hello everyone. This is Reggie Dawson. Welcome to the Use Firebase as Your Back-End course for Tuts Plus. In this video we will learn to update and delete our saved data. We're capable of saving our data and have configured Configure views to display this data. Now we just need a way to update our data in case we have a change and of course we need a way to delete our data if we no longer need it. When we set up our admin product listing we added buttons to edit and delete. These buttons have been set up with click handlers. As a result when we click on these buttons a function will run that takes the index as an argument. This index is our ID that was generated by the push method in Firebase and we will use this key to access our data. First let's go to our product listing that js file. Underneath the Firebase reference we're going to add a function. This is the function set up when our edit button and as you can see we have the argument of ID which is our passed in ID from our listing. Now we come to a problem with using plain JavaScript to create our project. I want to navigate to another page to display my data where I can edit. Unfortunately, I don't have a feature such as routing available to me where I can pass data to the other page. In order to do this I will have to use a little hack that some developers use. What I am going to do is use the window name property to pass the data across to another page. Now understand this is in no way secure but it will work for our purposes. First we set the property to our ID. And then we navigate to our page. Here we use the window location object to change our page. We also could have just assigned our URL to a location directly, but I prefer to use this version so it is clear what we are doing. After that, let's create editProduct.html by copying the addProduct.html file. After that, let's open editProduct.html. First we will change the title to edit product, then we can delete the nav bar as we will not need it. Then we can change the form id to editform. All of our input will remain the same except we will remove the placeholder text for all of them. Then we can change the button id to editbutton and the button text to read update a product. The final thing we need to do in this file is change the custom JavaScript reference from addproduct.js to editproduct.js. After that of course, we will create editproduct.js. The first thing we're going to do is create a variable to hold our product Id. Then we create a reference to our fire base app. Again we are mapping directly to our products node. Then we are going to create variables for our form fields and after that we create an object to hold our return data. At this point all we have is the ID of the record that we clicked on. We don't have any actual data. To get that we have to use a firebase method. First you'll notice that we have added the child mode to our reference which will pointed at the ID we pass from the product listing page. We can actually query firebase against any of the keys of our data but for our purposes the idea is the key that will get us individual records. You will also notice that as opposed to us using on we have use once. In our previous example on will load the data with the initial call to on and then again every time we have changes to the data. For our edit page we just need to grab the data one time because our intention is to change it Therefore use the Once listener which will load on the initial call and that's it. Any further changes to the data will not be recognized by Once. It's not really going to matter who going to navigate pages after you update. But I wanted to show you the Once Event listener. As with the previous example, we're listening for the value of it and passing a snapshot to our function. This snapshot consists of the return product. Then we set our Snapshot value to our object. Then we assign the return data to our variables. After that we use the jQuery val method to set the values of our text inputs. Most jQuery methods work as either getters and setters. Here we change its uses to set values by supplying the variables for name, description and price, to the appropriate inputs. For our image it's going to be a little different. This is the same thing we did previously with our preview image, using the attribute method to set the source of our image. Then we can add our change handler for our image, as we may be changing the image here. This is the same chain channel that we used in our addproduct.js file, except we are storing the reader result in the img variable. The last part is the editproduct function which should be familiar as it is similar to the syntax that we use to save the data in the first place. Again we are grabbing the contents of our inputs at the time we run the command which makes sense since this is the base to edit our data. Here again we are using our ID in conjunction with the update method to update the Firebase data. Inside we will send our variables like we did when we save the data. Instead of closing our statement like we did last time, we are going to use a callback function. This function will execute once the update method has run. Then we will add our click handler for our button set to execute the edit product function. Just above our edit product function, let's add our on complete function. The first thing we will do is check if there is an error. If there is an error, we will display an alert with the error code. Otherwise, we will navigate back to the product listing and see our changes reflected. After that, our edit page is done. Before we preview, we are also going to set up our function to delete our data as well. All we need to do is add a function to our productlisting.js file. Remember we create a click handler for the delete button on each product listing the executes this function. Again we pass in our id is the key to manipulate individual products. then we're going to use a JavaScript confirm box to be sure that we want to delete. If the user clicks cancel nothing will happen, but if they click okay we will delete. We use our firebase reference with our ID just like we did on our edit page. This time we use the Remove method. We also pass an optional callback function as an argument. We set up our callback function just like we did in our edit product.js file. We won't pass in the error code this time. We will just log that the delete failed. If the delete succeeds, we will alert the user that the product was deleted and reload the page with the location reload set to true. After that, let's save in preview. Go to the admin page. First click on one of your products edit button. Change some of the data and update. We seem to have a little problem here but I know what it is. Let's navigate back to our editProduct.html page and we're going to remove the disabled attribute from our edit button. Remember previously we were disabling the button if our fields were empty, but this time we aren't performing that check, so therefore the button will remain disabled. After that let's save in preview again and everything should be working. I apologize, there's one more thing we have to fix. We need to change this button from a submit button to a plain button. Now if we save in preview, it should work. As you can see after we updated, he gave us our alert letting us know that the update succeeded and then it navigates back to our listing. Next list click on the listings delete button. We will be prompted if we are sure. First let's click on cancel. Now let's click on Delete again and this time we're going to click OK. The page should refresh and the listing we deleted should be gone. We now have the ability to add display Update and Delete products. Unfortunately, not all the users of our site should be able to do this. In the next video we will add authentication to be sure that authorized users are the only ones able to access the admin area.

Back to the top