Reputation: 21
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
Reputation: 600006
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:
ButtonApproveClick
knows what specific button the user clicked on.id
attribute of that row).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