CODEWITHSUNDEEP
javascripthtmlfirebasefirebase-realtime-database
偉傑張
偉傑張

Reputation: 21

How to update firebase database data in html table?

i already show the firebase database data in a HTML table

and now i want to click the "Approve" button from the HTML table to update the status to approve. (Click the first row and only update the first data)

here is the code for the button that i do, but i cant work what i want.

function ButtonApproveClick(){
    var req = document.getElementById('Users');
    var dbRefReq = firebase.database().ref().child('Users')
    dbRefReq.once("child_added", function(snapshot ) {
        snapshot.ref.update({ statuss: "valid" })
    });
}

this is my database look like: [The Firebase database]

who can help me to solve the problem......

(function() {

var config = {


  apiKey: "AIzaSyDwrBm054kYrvm-6hZg3Ve_I0Rgp4MfOGo",
  authDomain: "petservice-f7559.firebaseapp.com",
  databaseURL: "https://petservice-f7559.firebaseio.com",
  projectId: "petservice-f7559",
  storageBucket: "petservice-f7559.appspot.com",
  messagingSenderId: "390073142865"
};
firebase.initializeApp(config);

  const req = document.getElementById('Users');

  const dbRefReq = firebase.database().ref().child('Users')

  dbRefReq.on('child_added', snap => {


      var name = snap.child("name").val();
      var phone = snap.child("phone").val();
      var statuss = snap.child("statuss").val();
      var icurl = snap.child("icurl").val();
      var userid = snap.child("userid").val();


$("#table_body").append("<tr><td>"+name+" </td><td>"+phone+"</td><td>"+ statuss+ "</td> <td><image src="+icurl+" alt=Trulli width=200 height=200> </image></td><td><button onclick='App()' dataid ="+userid+">Approve </button></td><td><button onclick='Dis()'>Remove</button></td></tr>");

  });

  }());



function App(){
 firebase.database().ref().child('Users').child(dataid).update({ statuss: "valid" })
}

function Dis(){

    alert("Hi2");

}
body {
  background: #fff;
  padding: 0px;
  margin: 0px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
}

input, button {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

.main-div, .loggedin-div {
  width: 20%;
  margin: 0px auto;
  margin-top: 150px;
  padding: 20px;
  display: none;
}

.main-div input {
  display: block;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  padding: 15px;
  outline: none;
  width: 100%;
  margin-bottom: 20px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

.main-div input:focus {
  border: 1px solid #777;
}

.main-div button, .loggedin-div button {
  background: #5d8ffc;
  color: #fff;
  border: 1px solid #5d8ffc;
  border-radius: 5px;
  padding: 15px;
  display: block;
  width: 100%;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

.main-div button:hover, .loggedin-div button:hover {
  background: #fff;
  color: #5d8ffc;
  border: 1px solid #5d8ffc;
  cursor: pointer;
}

<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
<html>


<head>
  <script>
  $(document).ready(function(){
    $("#myInput").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("#A").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
  });
  </script>

  <title>Firebase Login</title>
  <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">

  <link rel="stylesheet" href="style.css" />
</head>
<body>


<h1>HI</h1>
<input id="myInput" type="text" placeholder="Search..">

<div class="mainDiv" align="left">
  <h1>ALL User</h>
    <table >
      <thead>
        <tr>
          <td>Name</td>
          <td>Phone</td>
          <td>Status</td>
          <td>Url</td>
            <td>Approve</td>
              <td>Disapprove</td>
        </tr>
      </thead>

      <tbody id="table_body">


      </tbody>

    </table>
  </div>



  <script src="https://www.gstatic.com/firebasejs/5.3.1/firebase.js"></script>

          <script src="https://code.jquery.com/jquery-3.1.0.js"></script>


  <script src="view.js"></script>

</body>
</html>

Upvotes: 0

Views: 1658

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 600071

This is a three-step process. Since your didn't share the entire code/HTML, I'll just give you the steps that are needed:

  1. Make sure that ButtonApproveClick knows what specific button the user clicked on.
  2. Then find the Firebase key/id of the child node in that row (typically by storing the key/id in an id attribute of that row).
  3. Finally pass the key/id into the database call to update: firebase.database().ref().child('Users').child(keyOfUserThatWasClicked).update({ statuss: "valid" }). You don't need the once() listener here.

A simple example of how you might be rendering the users:

firebase.database().ref().child('Users').on('value', function(snapshot) {
  snapshot.forEach(function(userSnapshot) {
    var tr = document.createElement('tr');
    tr.id = userSnapshot.key;
    // TODO: populate the rest of the row and add it to the table
});

You might then get the ID of the row the user clicked on with:

function ButtonApproveClick(e){
    var button = e.target;
    var tr = e.parentElement.parentElement; // might need more or fewer to reach the right/TR element in the HTML
    var key = tr.id;
    firebase.database().ref().child('Users').child(key).update({ statuss: "valid" })
}

Upvotes: 1

Related Questions