Home Edit and Delete firebase
Reply: 1

Edit and Delete firebase

veen259
1#
veen259 Published in 2018-01-13 11:03:35Z
   <table>
      <tr>
         <td>Name: </td>
         <td><input type="text" name="user_name" id="user_name"  /></td>
      </tr>
      <tr>
         <td>Phone: </td>
         <td><input type="text" name="user_phone" id="user_phone"  /></td>
      </tr>
      <tr>
         <td>Address </td>
         <td><select name="user_ads" id="user_ads">
             <option value="A">A</option>
             <option value="B">B</option>
             <option value="C">C</option>
             </select>
      <tr>
         <td colspan="2">
             <input type="button" value="Save" onclick="save_user();"  />
             <input type="button" value="Update" onclick="update_user();"  />
         </td>
      </tr>
    </table>

  <table id="users_list" border="1">
   <tr>
       <td>NAME</td>
       <td>PHONE</td>
       <td>ADDRESS</td>
       <td>ACTION</td>
   </tr>
   </table>

   var usersList = document.getElementById('users_list');
   var databaseRef = firebase.database().ref('users/');
   var rowIndex = 1;


   databaseRef.once('value', function(snapshot) {
     snapshot.forEach(function(childSnapshot) {
        var childKey = childSnapshot.key;
        var childData = childSnapshot.val();
        var button = document.createElement("button");
        var button2 = document.createElement("button");
        button.innerHTML = "Edit";
        button2.innerHTML = "Delete";

        var row = usersList.insertRow(rowIndex);
        var cellName = row.insertCell(0);
        var cellPhone = row.insertCell(1);
        var cellAddress = row.insertCell(2);
        var cellButton = row.insertCell(3);
        cellName.appendChild(document.createTextNode(childData.name));
        cellPhone.appendChild(document.createTextNode(childData.phone));
        cellAddress.appendChild(document.createTextNode(childData.address));
        cellButton.appendChild(button);
        cellButton.appendChild(button2);

        button.onclick = delete;
        button2.onclick = edit;

        rowIndex = rowIndex + 1;
     });
    });


    function delete(){
           var row = document.getElementById("users_list");
           firebase.database().ref().child('/users/' + user_id).remove();

           alert('The user is deleted successfully!');

           reload_page();

          }

    function edit {

     }


        function update_user(){

           var data = {
               user_id: user_id,
               user_name: user_name
           }

           var updates = {};
           updates['/users/' + user_id] = data;
           firebase.database().ref().update(updates);

           alert('The user is updated successfully!');

           reload_page();
        }

</script>

I've created a database named users in firebase with data store name, phone and address. I've retrieved the data from firebase in the table and created a new column with edit button and delete button in the table. What should I add in delete function that enable to delete the firebase data in the row when the button delete was click and when edit button in the row was click it retrieve the firebase data in the row to the table form and click update to update the data in firebase.

A similar output:

Tushar Acharekar
2#
Tushar Acharekar Reply to 2018-01-13 12:50:36Z

use this code to delete,

considering users is your root, use users/ instead of /users/

  var ref = firebase.database().ref().child('users/' + user_id)
    ref.once("value")
    .then(function(snapshot) {
       snapshot.ref.remove();
       alert("user deleted..!");
   }).catch(function(error) {alert("Data could not be deleted." + error);});

use this code to update,

       var updates = {};
       updates['/users/' + user_id] = data;
       var ref = firebase.database().ref().child('users/' + user_id)
       ref.update(updates).then(function(){
          ref.on('value', function(snapshot) {
            alert("user updated");
         });
       }).catch(function(error) {alert("Data could not be saved." + error);});
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.32908 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO