Как обновить данные базы данных Firebase в HTML-таблице? - PullRequest
Новая
       1

Как обновить данные базы данных Firebase в HTML-таблице?

0 голосов
/ 26 января 2019

я уже показываю данные базы данных firebase в таблице HTML

и теперь я хочу нажать кнопку «Подтвердить» в таблице HTML, чтобы обновить статус для утверждения. (Нажмите на первую строку и обновите только первые данные)

вот код для кнопки, которую я делаю, но я не могу работать, что хочу. 

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" })
    });
}

это моя база данных выглядит так: [База данных Firebase]

кто может помочь мне решить проблему ...... 

(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>

1 Ответ

0 голосов
/ 26 января 2019

Это трехэтапный процесс. Поскольку вы не передали весь код / ​​HTML, я просто дам вам необходимые шаги:

  1. Убедитесь, что ButtonApproveClick знает, на какую конкретную кнопку нажал пользователь.
  2. Затем найдите ключ / идентификатор Firebase дочернего узла в этой строке (обычно путем сохранения ключа / идентификатора в атрибуте id этой строки).
  3. Наконец, передайте ключ / id в вызов базы данных для обновления: firebase.database().ref().child('Users').child(keyOfUserThatWasClicked).update({ statuss: "valid" }). Вам не нужен once() слушатель здесь.

Простой пример того, как вы можете отображать пользователей: 

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
});

Затем вы можете получить идентификатор строки, по которой щелкнул пользователь: 

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" })
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...