Home Edit and Delete firebase
Reply: 0

Edit and Delete firebase

user3563
1#
user3563 Published in May 21, 2018, 9:17 am
   <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:

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO