How to reload html table when firebase data changesHow do I export data from Firebase Realtime Database?Why not use tables for layout in HTML?How to change the href for a hyperlink using jQueryHow to change an element's class with JavaScript?How do I modify the URL without reloading the page?How to create an HTML button that acts like a link?How can I set the default value for an HTML <select> element?How to decide when to use Node.js?How do I reformat HTML code using Sublime Text 2?How does data binding work in AngularJS?Cannot display HTML string
Can the inductive kick be discharged without a freewheeling diode, in this example?
Received email from ISP saying one of my devices has malware
Heuristic argument for the Riemann Hypothesis
How were US credit cards verified in-store in the 1980's?
What checks exist against overuse of presidential pardons in the USA?
Do universities maintain secret textbooks?
In what language did Túrin converse with Mím?
Calculate Landau's function
My colleague treats me like he's my boss, yet we're on the same level
How to load files as a quickfix window at start-up
'Horseshoes' for Deer?
Quick Tilepaint Puzzles: Corridors and Corners
Can authors email you PDFs of their textbook for free?
How does the search space affect the speed of an ILP solver?
How is the casino term "a high roller" commonly expressed in German?
I failed to respond to a potential advisor
Why does the U.S. military maintain their own weather satellites?
Does the Freedom of Movement spell prevent petrification by the Flesh to Stone spell?
Can UV radiation be safe for the skin?
Can I leave a large suitcase at TPE during a 4-hour layover, and pick it up 4.5 days later when I come back to TPE on my way to Taipei downtown?
Create a list of snaking numbers under 50,000
How do I get my neighbour to stop disturbing with loud music?
Welche normative Autorität hat der Duden? / What's the normative authority of the Duden?
Small RAM 4 KB on the early Apple II?
How to reload html table when firebase data changes
How do I export data from Firebase Realtime Database?Why not use tables for layout in HTML?How to change the href for a hyperlink using jQueryHow to change an element's class with JavaScript?How do I modify the URL without reloading the page?How to create an HTML button that acts like a link?How can I set the default value for an HTML <select> element?How to decide when to use Node.js?How do I reformat HTML code using Sublime Text 2?How does data binding work in AngularJS?Cannot display HTML string
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
0
i am using a table to display data from a firebase, the problme is that everytime i update the data, i get a duplicate of the table instead of reloaded data.
I have tried several different ways but none work. Also i am not an experienced programmer. this is my code. The entire function myFunction is called every-time the value of select is changed.
<html>
<head>
<title>OSA</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div>
<select id="mySelect" class="mySelect" onchange="getData()">
<option>Select Class</option>
<option value="ArtificialIntelligence">Artificial Intelligence</option>
<option value="MachineLearning">Machine Learning</option>
<option value="NaturalLanguageInterface">Natural Language Interface</option>
</select>
</div>
<div class="studentTable-div" id="table-div">
<p>
<h2 class="h2" id="tblText""></h2>
</p>
<button class="button" onclick="refresh()">Refresh</button>
<table id="tbl_users_list" class="w3-table w3-striped w3-bordered">
<tr>
<td>ID</td>
<td>NAME</td>
<td>PRESENT</td>
</tr>
</table>
</div>
</body>
<script>
//creating reference to the database.
var database = firebase.database();
var x;
function getData()
resetTable();
var tblUsers = document.getElementById('tbl_users_list');
x = document.getElementById("mySelect").value;
var databaseRef = firebase.database().ref('Classes/'+x+'/students');
var rowIndex = 1;
databaseRef.once('value', function(snapshot)
snapshot.forEach(function(childSnapshot)
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var cellPresent = row.insertCell(2);
cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.name));
cellPresent.appendChild(document.createTextNode(childData.present));
rowIndex = rowIndex + 1;
);
);
var text = x.split(/(?=[A-Z])/).join(" ");
document.getElementById('tblText').innerHTML = "Students enroled for " + text;
function setText()
document.getElementById('tblText').innerHTML = "Students enroled for " + text;
function resetTable()
var table = document.getElementById("tbl_users_list");
//or use : var table = document.all.tableid;
for(var i = table.rows.length - 1; i > 0; i--)
table.deleteRow(i);
</script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase.js"></script>
<script>
// Initialize Firebase
var config =
apiKey: "AIzaSyBAV157BePawASuItu_Ycvv8p96SQcuFVg",
authDomain: "osattendance-352c4.firebaseapp.com",
databaseURL: "https://osattendance-352c4.firebaseio.com",
projectId: "osattendance-352c4",
storageBucket: "osattendance-352c4.appspot.com",
messagingSenderId: "91858851284"
;
firebase.initializeApp(config);
</script>
<script src="index.js"></script>
<script src="https://www.puck-js.com/puck.js"></script>
</body>
</html>
All i need is for the table to stay as it is and only reload the fields that are updated. Thanks
Ok so as you may see, the following is my main screen . with the html select the user may select different classes, data in the table should display accordingly, instead, everytime i select different class, the table just gets bigger and bigger as it loads the data which i have selected.
This is my json file for the database, nothing more than just number of classes with students.
"Classes" :
"ArtificialIntelligence" :
"code" : "code",
"students" :
"1212" :
"name" : "jacob",
"present" : "false",
"surname" : "kalas"
,
"2323" :
"name" : "chanelle",
"present" : "true",
"surname" : "lindsay"
,
"3434" :
"name" : "adam",
"present" : "true",
"surname" : "smith"
,
"4545" :
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
,
"5656" :
"name" : "derek",
"present" : "false",
"surname" : "salak"
,
"6767" :
"name" : "ernest",
"present" : "false",
"surname" : "brown"
,
"7878" :
"name" : "liam",
"present" : "false",
"surname" : "day"
,
"8989" :
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
,
"9191" :
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
,
"9898" :
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
,
"MachineLearning" :
"code" : "code",
"students" :
"1111" :
"name" : "student1",
"present" : "true",
"surname" : "kalas"
,
"2222" :
"name" : "student1",
"present" : "false",
"surname" : "lindsay"
,
"3333" :
"name" : "jim",
"present" : "false",
"surname" : "smith"
,
"4444" :
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
,
"5555" :
"name" : "derek",
"present" : "false",
"surname" : "salak"
,
"6666" :
"name" : "ernest",
"present" : "false",
"surname" : "brown"
,
"7777" :
"name" : "liam",
"present" : "false",
"surname" : "day"
,
"8888" :
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
,
"9191" :
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
,
"9999" :
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
,
"NaturalLanguageInterface" :
"code" : "code",
"students" :
"1212" :
"name" : "kate",
"present" : "false",
"surname" : "kalas"
,
"2323" :
"name" : "Tom",
"present" : "true",
"surname" : "lindsay"
,
"3434" :
"name" : "pauly",
"present" : "true",
"surname" : "smith"
,
"4545" :
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
,
"5656" :
"name" : "derek",
"present" : "false",
"surname" : "salak"
,
"6767" :
"name" : "ernest",
"present" : "false",
"surname" : "brown"
,
"7878" :
"name" : "liam",
"present" : "false",
"surname" : "day"
,
"8989" :
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
,
"9191" :
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
,
"9898" :
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
javascript html firebase firebase-realtime-database
asked Mar 27 at 19:18
QubaQuba
14 bronze badges
|
show 1 more comment
0
i am using a table to display data from a firebase, the problme is that everytime i update the data, i get a duplicate of the table instead of reloaded data.
I have tried several different ways but none work. Also i am not an experienced programmer. this is my code. The entire function myFunction is called every-time the value of select is changed.
<html>
<head>
<title>OSA</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div>
<select id="mySelect" class="mySelect" onchange="getData()">
<option>Select Class</option>
<option value="ArtificialIntelligence">Artificial Intelligence</option>
<option value="MachineLearning">Machine Learning</option>
<option value="NaturalLanguageInterface">Natural Language Interface</option>
</select>
</div>
<div class="studentTable-div" id="table-div">
<p>
<h2 class="h2" id="tblText""></h2>
</p>
<button class="button" onclick="refresh()">Refresh</button>
<table id="tbl_users_list" class="w3-table w3-striped w3-bordered">
<tr>
<td>ID</td>
<td>NAME</td>
<td>PRESENT</td>
</tr>
</table>
</div>
</body>
<script>
//creating reference to the database.
var database = firebase.database();
var x;
function getData()
resetTable();
var tblUsers = document.getElementById('tbl_users_list');
x = document.getElementById("mySelect").value;
var databaseRef = firebase.database().ref('Classes/'+x+'/students');
var rowIndex = 1;
databaseRef.once('value', function(snapshot)
snapshot.forEach(function(childSnapshot)
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var cellPresent = row.insertCell(2);
cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.name));
cellPresent.appendChild(document.createTextNode(childData.present));
rowIndex = rowIndex + 1;
);
);
var text = x.split(/(?=[A-Z])/).join(" ");
document.getElementById('tblText').innerHTML = "Students enroled for " + text;
function setText()
document.getElementById('tblText').innerHTML = "Students enroled for " + text;
function resetTable()
var table = document.getElementById("tbl_users_list");
//or use : var table = document.all.tableid;
for(var i = table.rows.length - 1; i > 0; i--)
table.deleteRow(i);
</script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase.js"></script>
<script>
// Initialize Firebase
var config =
apiKey: "AIzaSyBAV157BePawASuItu_Ycvv8p96SQcuFVg",
authDomain: "osattendance-352c4.firebaseapp.com",
databaseURL: "https://osattendance-352c4.firebaseio.com",
projectId: "osattendance-352c4",
storageBucket: "osattendance-352c4.appspot.com",
messagingSenderId: "91858851284"
;
firebase.initializeApp(config);
</script>
<script src="index.js"></script>
<script src="https://www.puck-js.com/puck.js"></script>
</body>
</html>
All i need is for the table to stay as it is and only reload the fields that are updated. Thanks
Ok so as you may see, the following is my main screen . with the html select the user may select different classes, data in the table should display accordingly, instead, everytime i select different class, the table just gets bigger and bigger as it loads the data which i have selected.
This is my json file for the database, nothing more than just number of classes with students.
"Classes" :
"ArtificialIntelligence" :
"code" : "code",
"students" :
"1212" :
"name" : "jacob",
"present" : "false",
"surname" : "kalas"
,
"2323" :
"name" : "chanelle",
"present" : "true",
"surname" : "lindsay"
,
"3434" :
"name" : "adam",
"present" : "true",
"surname" : "smith"
,
"4545" :
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
,
"5656" :
"name" : "derek",
"present" : "false",
"surname" : "salak"
,
"6767" :
"name" : "ernest",
"present" : "false",
"surname" : "brown"
,
"7878" :
"name" : "liam",
"present" : "false",
"surname" : "day"
,
"8989" :
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
,
"9191" :
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
,
"9898" :
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
,
"MachineLearning" :
"code" : "code",
"students" :
"1111" :
"name" : "student1",
"present" : "true",
"surname" : "kalas"
,
"2222" :
"name" : "student1",
"present" : "false",
"surname" : "lindsay"
,
"3333" :
"name" : "jim",
"present" : "false",
"surname" : "smith"
,
"4444" :
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
,
"5555" :
"name" : "derek",
"present" : "false",
"surname" : "salak"
,
"6666" :
"name" : "ernest",
"present" : "false",
"surname" : "brown"
,
"7777" :
"name" : "liam",
"present" : "false",
"surname" : "day"
,
"8888" :
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
,
"9191" :
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
,
"9999" :
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
,
"NaturalLanguageInterface" :
"code" : "code",
"students" :
"1212" :
"name" : "kate",
"present" : "false",
"surname" : "kalas"
,
"2323" :
"name" : "Tom",
"present" : "true",
"surname" : "lindsay"
,
"3434" :
"name" : "pauly",
"present" : "true",
"surname" : "smith"
,
"4545" :
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
,
"5656" :
"name" : "derek",
"present" : "false",
"surname" : "salak"
,
"6767" :
"name" : "ernest",
"present" : "false",
"surname" : "brown"
,
"7878" :
"name" : "liam",
"present" : "false",
"surname" : "day"
,
"8989" :
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
,
"9191" :
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
,
"9898" :
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
javascript html firebase firebase-realtime-database
asked Mar 27 at 19:18
QubaQuba
14 bronze badges
Before yoursnapshot.forEach...you can delete all rows in your table (except for the header row).
– Andrew Lohr
Mar 27 at 19:23
may you please show me how if you know? I have tried several ways and nothing.
– Quba
Mar 27 at 19:38
1-You want the existing data from the table to be removed and new data to be updated in that place?? or 2- you want the old data in the table to be present and the new data to be added below under the existing one?? How is that you want??
– Fire-In-D-Hole
Mar 27 at 19:41
1-I want the existing data from the table to be removed and new data to be updated in that place.
– Quba
Mar 27 at 19:44
can you show us your realtime db data ..Export the realtime data from your database and paste it Click me to export data from Database . Also can you show us the duplicate data that is being added into the Html and what data are you expecting to be shown in the Table?? With the function code you have shared above we can only see that you are adding the data to the Db. Can you add more Code ?
– Fire-In-D-Hole
Mar 27 at 20:38
|
show 1 more comment
0
0
0
i am using a table to display data from a firebase, the problme is that everytime i update the data, i get a duplicate of the table instead of reloaded data.
I have tried several different ways but none work. Also i am not an experienced programmer. this is my code. The entire function myFunction is called every-time the value of select is changed.
<html>
<head>
<title>OSA</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div>
<select id="mySelect" class="mySelect" onchange="getData()">
<option>Select Class</option>
<option value="ArtificialIntelligence">Artificial Intelligence</option>
<option value="MachineLearning">Machine Learning</option>
<option value="NaturalLanguageInterface">Natural Language Interface</option>
</select>
</div>
<div class="studentTable-div" id="table-div">
<p>
<h2 class="h2" id="tblText""></h2>
</p>
<button class="button" onclick="refresh()">Refresh</button>
<table id="tbl_users_list" class="w3-table w3-striped w3-bordered">
<tr>
<td>ID</td>
<td>NAME</td>
<td>PRESENT</td>
</tr>
</table>
</div>
</body>
<script>
//creating reference to the database.
var database = firebase.database();
var x;
function getData()
resetTable();
var tblUsers = document.getElementById('tbl_users_list');
x = document.getElementById("mySelect").value;
var databaseRef = firebase.database().ref('Classes/'+x+'/students');
var rowIndex = 1;
databaseRef.once('value', function(snapshot)
snapshot.forEach(function(childSnapshot)
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var cellPresent = row.insertCell(2);
cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.name));
cellPresent.appendChild(document.createTextNode(childData.present));
rowIndex = rowIndex + 1;
);
);
var text = x.split(/(?=[A-Z])/).join(" ");
document.getElementById('tblText').innerHTML = "Students enroled for " + text;
function setText()
document.getElementById('tblText').innerHTML = "Students enroled for " + text;
function resetTable()
var table = document.getElementById("tbl_users_list");
//or use : var table = document.all.tableid;
for(var i = table.rows.length - 1; i > 0; i--)
table.deleteRow(i);
</script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase.js"></script>
<script>
// Initialize Firebase
var config =
apiKey: "AIzaSyBAV157BePawASuItu_Ycvv8p96SQcuFVg",
authDomain: "osattendance-352c4.firebaseapp.com",
databaseURL: "https://osattendance-352c4.firebaseio.com",
projectId: "osattendance-352c4",
storageBucket: "osattendance-352c4.appspot.com",
messagingSenderId: "91858851284"
;
firebase.initializeApp(config);
</script>
<script src="index.js"></script>
<script src="https://www.puck-js.com/puck.js"></script>
</body>
</html>
All i need is for the table to stay as it is and only reload the fields that are updated. Thanks
Ok so as you may see, the following is my main screen . with the html select the user may select different classes, data in the table should display accordingly, instead, everytime i select different class, the table just gets bigger and bigger as it loads the data which i have selected.
This is my json file for the database, nothing more than just number of classes with students.
"Classes" :
"ArtificialIntelligence" :
"code" : "code",
"students" :
"1212" :
"name" : "jacob",
"present" : "false",
"surname" : "kalas"
,
"2323" :
"name" : "chanelle",
"present" : "true",
"surname" : "lindsay"
,
"3434" :
"name" : "adam",
"present" : "true",
"surname" : "smith"
,
"4545" :
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
,
"5656" :
"name" : "derek",
"present" : "false",
"surname" : "salak"
,
"6767" :
"name" : "ernest",
"present" : "false",
"surname" : "brown"
,
"7878" :
"name" : "liam",
"present" : "false",
"surname" : "day"
,
"8989" :
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
,
"9191" :
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
,
"9898" :
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
,
"MachineLearning" :
"code" : "code",
"students" :
"1111" :
"name" : "student1",
"present" : "true",
"surname" : "kalas"
,
"2222" :
"name" : "student1",
"present" : "false",
"surname" : "lindsay"
,
"3333" :
"name" : "jim",
"present" : "false",
"surname" : "smith"
,
"4444" :
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
,
"5555" :
"name" : "derek",
"present" : "false",
"surname" : "salak"
,
"6666" :
"name" : "ernest",
"present" : "false",
"surname" : "brown"
,
"7777" :
"name" : "liam",
"present" : "false",
"surname" : "day"
,
"8888" :
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
,
"9191" :
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
,
"9999" :
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
,
"NaturalLanguageInterface" :
"code" : "code",
"students" :
"1212" :
"name" : "kate",
"present" : "false",
"surname" : "kalas"
,
"2323" :
"name" : "Tom",
"present" : "true",
"surname" : "lindsay"
,
"3434" :
"name" : "pauly",
"present" : "true",
"surname" : "smith"
,
"4545" :
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
,
"5656" :
"name" : "derek",
"present" : "false",
"surname" : "salak"
,
"6767" :
"name" : "ernest",
"present" : "false",
"surname" : "brown"
,
"7878" :
"name" : "liam",
"present" : "false",
"surname" : "day"
,
"8989" :
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
,
"9191" :
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
,
"9898" :
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
javascript html firebase firebase-realtime-database
asked Mar 27 at 19:18
QubaQuba
14 bronze badges
i am using a table to display data from a firebase, the problme is that everytime i update the data, i get a duplicate of the table instead of reloaded data.
I have tried several different ways but none work. Also i am not an experienced programmer. this is my code. The entire function myFunction is called every-time the value of select is changed.
<html>
<head>
<title>OSA</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div>
<select id="mySelect" class="mySelect" onchange="getData()">
<option>Select Class</option>
<option value="ArtificialIntelligence">Artificial Intelligence</option>
<option value="MachineLearning">Machine Learning</option>
<option value="NaturalLanguageInterface">Natural Language Interface</option>
</select>
</div>
<div class="studentTable-div" id="table-div">
<p>
<h2 class="h2" id="tblText""></h2>
</p>
<button class="button" onclick="refresh()">Refresh</button>
<table id="tbl_users_list" class="w3-table w3-striped w3-bordered">
<tr>
<td>ID</td>
<td>NAME</td>
<td>PRESENT</td>
</tr>
</table>
</div>
</body>
<script>
//creating reference to the database.
var database = firebase.database();
var x;
function getData()
resetTable();
var tblUsers = document.getElementById('tbl_users_list');
x = document.getElementById("mySelect").value;
var databaseRef = firebase.database().ref('Classes/'+x+'/students');
var rowIndex = 1;
databaseRef.once('value', function(snapshot)
snapshot.forEach(function(childSnapshot)
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var cellPresent = row.insertCell(2);
cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.name));
cellPresent.appendChild(document.createTextNode(childData.present));
rowIndex = rowIndex + 1;
);
);
var text = x.split(/(?=[A-Z])/).join(" ");
document.getElementById('tblText').innerHTML = "Students enroled for " + text;
function setText()
document.getElementById('tblText').innerHTML = "Students enroled for " + text;
function resetTable()
var table = document.getElementById("tbl_users_list");
//or use : var table = document.all.tableid;
for(var i = table.rows.length - 1; i > 0; i--)
table.deleteRow(i);
</script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase.js"></script>
<script>
// Initialize Firebase
var config =
apiKey: "AIzaSyBAV157BePawASuItu_Ycvv8p96SQcuFVg",
authDomain: "osattendance-352c4.firebaseapp.com",
databaseURL: "https://osattendance-352c4.firebaseio.com",
projectId: "osattendance-352c4",
storageBucket: "osattendance-352c4.appspot.com",
messagingSenderId: "91858851284"
;
firebase.initializeApp(config);
</script>
<script src="index.js"></script>
<script src="https://www.puck-js.com/puck.js"></script>
</body>
</html>
All i need is for the table to stay as it is and only reload the fields that are updated. Thanks
Ok so as you may see, the following is my main screen . with the html select the user may select different classes, data in the table should display accordingly, instead, everytime i select different class, the table just gets bigger and bigger as it loads the data which i have selected.
This is my json file for the database, nothing more than just number of classes with students.
"Classes" :
"ArtificialIntelligence" :
"code" : "code",
"students" :
"1212" :
"name" : "jacob",
"present" : "false",
"surname" : "kalas"
,
"2323" :
"name" : "chanelle",
"present" : "true",
"surname" : "lindsay"
,
"3434" :
"name" : "adam",
"present" : "true",
"surname" : "smith"
,
"4545" :
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
,
"5656" :
"name" : "derek",
"present" : "false",
"surname" : "salak"
,
"6767" :
"name" : "ernest",
"present" : "false",
"surname" : "brown"
,
"7878" :
"name" : "liam",
"present" : "false",
"surname" : "day"
,
"8989" :
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
,
"9191" :
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
,
"9898" :
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
,
"MachineLearning" :
"code" : "code",
"students" :
"1111" :
"name" : "student1",
"present" : "true",
"surname" : "kalas"
,
"2222" :
"name" : "student1",
"present" : "false",
"surname" : "lindsay"
,
"3333" :
"name" : "jim",
"present" : "false",
"surname" : "smith"
,
"4444" :
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
,
"5555" :
"name" : "derek",
"present" : "false",
"surname" : "salak"
,
"6666" :
"name" : "ernest",
"present" : "false",
"surname" : "brown"
,
"7777" :
"name" : "liam",
"present" : "false",
"surname" : "day"
,
"8888" :
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
,
"9191" :
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
,
"9999" :
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
,
"NaturalLanguageInterface" :
"code" : "code",
"students" :
"1212" :
"name" : "kate",
"present" : "false",
"surname" : "kalas"
,
"2323" :
"name" : "Tom",
"present" : "true",
"surname" : "lindsay"
,
"3434" :
"name" : "pauly",
"present" : "true",
"surname" : "smith"
,
"4545" :
"name" : "aroon",
"present" : "false",
"surname" : "lindsay"
,
"5656" :
"name" : "derek",
"present" : "false",
"surname" : "salak"
,
"6767" :
"name" : "ernest",
"present" : "false",
"surname" : "brown"
,
"7878" :
"name" : "liam",
"present" : "false",
"surname" : "day"
,
"8989" :
"name" : "sebastian",
"present" : "false",
"surname" : "mcgregor"
,
"9191" :
"name" : "paul",
"present" : "false",
"surname" : "hemingway"
,
"9898" :
"name" : "kuba",
"present" : "false",
"surname" : "kalas"
javascript html firebase firebase-realtime-database
javascript html firebase firebase-realtime-database
asked Mar 27 at 19:18
QubaQuba
14 bronze badges
asked Mar 27 at 19:18
QubaQuba
14 bronze badges
edited Mar 28 at 20:00
Quba
asked Mar 27 at 19:18
QubaQuba
14 bronze badges
asked Mar 27 at 19:18
QubaQuba
14 bronze badges
asked Mar 27 at 19:18
QubaQuba
14 bronze badges
14 bronze badges
Before yoursnapshot.forEach...you can delete all rows in your table (except for the header row).
– Andrew Lohr
Mar 27 at 19:23
may you please show me how if you know? I have tried several ways and nothing.
– Quba
Mar 27 at 19:38
1-You want the existing data from the table to be removed and new data to be updated in that place?? or 2- you want the old data in the table to be present and the new data to be added below under the existing one?? How is that you want??
– Fire-In-D-Hole
Mar 27 at 19:41
1-I want the existing data from the table to be removed and new data to be updated in that place.
– Quba
Mar 27 at 19:44
can you show us your realtime db data ..Export the realtime data from your database and paste it Click me to export data from Database . Also can you show us the duplicate data that is being added into the Html and what data are you expecting to be shown in the Table?? With the function code you have shared above we can only see that you are adding the data to the Db. Can you add more Code ?
– Fire-In-D-Hole
Mar 27 at 20:38
|
show 1 more comment
Before yoursnapshot.forEach...you can delete all rows in your table (except for the header row).
– Andrew Lohr
Mar 27 at 19:23
may you please show me how if you know? I have tried several ways and nothing.
– Quba
Mar 27 at 19:38
1-You want the existing data from the table to be removed and new data to be updated in that place?? or 2- you want the old data in the table to be present and the new data to be added below under the existing one?? How is that you want??
– Fire-In-D-Hole
Mar 27 at 19:41
1-I want the existing data from the table to be removed and new data to be updated in that place.
– Quba
Mar 27 at 19:44
can you show us your realtime db data ..Export the realtime data from your database and paste it Click me to export data from Database . Also can you show us the duplicate data that is being added into the Html and what data are you expecting to be shown in the Table?? With the function code you have shared above we can only see that you are adding the data to the Db. Can you add more Code ?
– Fire-In-D-Hole
Mar 27 at 20:38
Before your
snapshot.forEach... you can delete all rows in your table (except for the header row).– Andrew Lohr
Mar 27 at 19:23
Before your
snapshot.forEach... you can delete all rows in your table (except for the header row).– Andrew Lohr
Mar 27 at 19:23
may you please show me how if you know? I have tried several ways and nothing.
– Quba
Mar 27 at 19:38
may you please show me how if you know? I have tried several ways and nothing.
– Quba
Mar 27 at 19:38
1-You want the existing data from the table to be removed and new data to be updated in that place?? or 2- you want the old data in the table to be present and the new data to be added below under the existing one?? How is that you want??
– Fire-In-D-Hole
Mar 27 at 19:41
1-You want the existing data from the table to be removed and new data to be updated in that place?? or 2- you want the old data in the table to be present and the new data to be added below under the existing one?? How is that you want??
– Fire-In-D-Hole
Mar 27 at 19:41
1-I want the existing data from the table to be removed and new data to be updated in that place.
– Quba
Mar 27 at 19:44
1-I want the existing data from the table to be removed and new data to be updated in that place.
– Quba
Mar 27 at 19:44
can you show us your realtime db data ..Export the realtime data from your database and paste it Click me to export data from Database . Also can you show us the duplicate data that is being added into the Html and what data are you expecting to be shown in the Table?? With the function code you have shared above we can only see that you are adding the data to the Db. Can you add more Code ?
– Fire-In-D-Hole
Mar 27 at 20:38
can you show us your realtime db data ..Export the realtime data from your database and paste it Click me to export data from Database . Also can you show us the duplicate data that is being added into the Html and what data are you expecting to be shown in the Table?? With the function code you have shared above we can only see that you are adding the data to the Db. Can you add more Code ?
– Fire-In-D-Hole
Mar 27 at 20:38
|
show 1 more comment
1 Answer
1
active
oldest
votes
0
Ok so i have found a solution to this problem, it is not the expected solution as the table has to be manually refreshed in order to display updated data, but it works and there are no duplicates. I have created a function which clears the table. the function is as follows and it is invoked at the beginning of myFunction()
function resetTable()
var table = document.getElementById("tbl_users_list");
for(var i = table.rows.length - 1; i > 0; i--)
table.deleteRow(i);
function getData()
resetTable();
var tblUsers = document.getElementById('tbl_users_list');
x = document.getElementById("mySelect").value;
var databaseRef = firebase.database().ref('Classes/'+x+'/students');
var rowIndex = 1;
databaseRef.once('value', function(snapshot)
snapshot.forEach(function(childSnapshot)
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var cellPresent = row.insertCell(2);
cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.name));
cellPresent.appendChild(document.createTextNode(childData.present));
rowIndex = rowIndex + 1;
);
);
Please if you know the right way of doing it, answer the question please.
answered Mar 27 at 23:36
QubaQuba
14 bronze badges
As Andrew mentioned your goal is to fetch the latest data to remove the existing data you can run a function to delete the existing data before forEach method i see thats what you have done .
– Fire-In-D-Hole
Mar 28 at 6:54
yes only problem is that now the data is not realtime, the table has to be refreshed as every-time i manually update the data in the firebase console i still get a duplicate.
– Quba
Mar 28 at 16:40
Can you edit your question with all HTML, JS files added that way I can figure out how your code is and help you out.
– Fire-In-D-Hole
Mar 28 at 18:44
as per your request, there is not much, literally a select and a table.
– Quba
Mar 28 at 20:00
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55384951%2fhow-to-reload-html-table-when-firebase-data-changes%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Ok so i have found a solution to this problem, it is not the expected solution as the table has to be manually refreshed in order to display updated data, but it works and there are no duplicates. I have created a function which clears the table. the function is as follows and it is invoked at the beginning of myFunction()
function resetTable()
var table = document.getElementById("tbl_users_list");
for(var i = table.rows.length - 1; i > 0; i--)
table.deleteRow(i);
function getData()
resetTable();
var tblUsers = document.getElementById('tbl_users_list');
x = document.getElementById("mySelect").value;
var databaseRef = firebase.database().ref('Classes/'+x+'/students');
var rowIndex = 1;
databaseRef.once('value', function(snapshot)
snapshot.forEach(function(childSnapshot)
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var cellPresent = row.insertCell(2);
cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.name));
cellPresent.appendChild(document.createTextNode(childData.present));
rowIndex = rowIndex + 1;
);
);
Please if you know the right way of doing it, answer the question please.
answered Mar 27 at 23:36
QubaQuba
14 bronze badges
As Andrew mentioned your goal is to fetch the latest data to remove the existing data you can run a function to delete the existing data before forEach method i see thats what you have done .
– Fire-In-D-Hole
Mar 28 at 6:54
yes only problem is that now the data is not realtime, the table has to be refreshed as every-time i manually update the data in the firebase console i still get a duplicate.
– Quba
Mar 28 at 16:40
Can you edit your question with all HTML, JS files added that way I can figure out how your code is and help you out.
– Fire-In-D-Hole
Mar 28 at 18:44
as per your request, there is not much, literally a select and a table.
– Quba
Mar 28 at 20:00
add a comment |
0
Ok so i have found a solution to this problem, it is not the expected solution as the table has to be manually refreshed in order to display updated data, but it works and there are no duplicates. I have created a function which clears the table. the function is as follows and it is invoked at the beginning of myFunction()
function resetTable()
var table = document.getElementById("tbl_users_list");
for(var i = table.rows.length - 1; i > 0; i--)
table.deleteRow(i);
function getData()
resetTable();
var tblUsers = document.getElementById('tbl_users_list');
x = document.getElementById("mySelect").value;
var databaseRef = firebase.database().ref('Classes/'+x+'/students');
var rowIndex = 1;
databaseRef.once('value', function(snapshot)
snapshot.forEach(function(childSnapshot)
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var cellPresent = row.insertCell(2);
cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.name));
cellPresent.appendChild(document.createTextNode(childData.present));
rowIndex = rowIndex + 1;
);
);
Please if you know the right way of doing it, answer the question please.
answered Mar 27 at 23:36
QubaQuba
14 bronze badges
As Andrew mentioned your goal is to fetch the latest data to remove the existing data you can run a function to delete the existing data before forEach method i see thats what you have done .
– Fire-In-D-Hole
Mar 28 at 6:54
yes only problem is that now the data is not realtime, the table has to be refreshed as every-time i manually update the data in the firebase console i still get a duplicate.
– Quba
Mar 28 at 16:40
Can you edit your question with all HTML, JS files added that way I can figure out how your code is and help you out.
– Fire-In-D-Hole
Mar 28 at 18:44
as per your request, there is not much, literally a select and a table.
– Quba
Mar 28 at 20:00
add a comment |
0
0
0
Ok so i have found a solution to this problem, it is not the expected solution as the table has to be manually refreshed in order to display updated data, but it works and there are no duplicates. I have created a function which clears the table. the function is as follows and it is invoked at the beginning of myFunction()
function resetTable()
var table = document.getElementById("tbl_users_list");
for(var i = table.rows.length - 1; i > 0; i--)
table.deleteRow(i);
function getData()
resetTable();
var tblUsers = document.getElementById('tbl_users_list');
x = document.getElementById("mySelect").value;
var databaseRef = firebase.database().ref('Classes/'+x+'/students');
var rowIndex = 1;
databaseRef.once('value', function(snapshot)
snapshot.forEach(function(childSnapshot)
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var cellPresent = row.insertCell(2);
cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.name));
cellPresent.appendChild(document.createTextNode(childData.present));
rowIndex = rowIndex + 1;
);
);
Please if you know the right way of doing it, answer the question please.
answered Mar 27 at 23:36
QubaQuba
14 bronze badges
Ok so i have found a solution to this problem, it is not the expected solution as the table has to be manually refreshed in order to display updated data, but it works and there are no duplicates. I have created a function which clears the table. the function is as follows and it is invoked at the beginning of myFunction()
function resetTable()
var table = document.getElementById("tbl_users_list");
for(var i = table.rows.length - 1; i > 0; i--)
table.deleteRow(i);
function getData()
resetTable();
var tblUsers = document.getElementById('tbl_users_list');
x = document.getElementById("mySelect").value;
var databaseRef = firebase.database().ref('Classes/'+x+'/students');
var rowIndex = 1;
databaseRef.once('value', function(snapshot)
snapshot.forEach(function(childSnapshot)
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblUsers.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
var cellPresent = row.insertCell(2);
cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.name));
cellPresent.appendChild(document.createTextNode(childData.present));
rowIndex = rowIndex + 1;
);
);
Please if you know the right way of doing it, answer the question please.
answered Mar 27 at 23:36
QubaQuba
14 bronze badges
answered Mar 27 at 23:36
QubaQuba
14 bronze badges
answered Mar 27 at 23:36
QubaQuba
14 bronze badges
answered Mar 27 at 23:36
QubaQuba
14 bronze badges
14 bronze badges
As Andrew mentioned your goal is to fetch the latest data to remove the existing data you can run a function to delete the existing data before forEach method i see thats what you have done .
– Fire-In-D-Hole
Mar 28 at 6:54
yes only problem is that now the data is not realtime, the table has to be refreshed as every-time i manually update the data in the firebase console i still get a duplicate.
– Quba
Mar 28 at 16:40
Can you edit your question with all HTML, JS files added that way I can figure out how your code is and help you out.
– Fire-In-D-Hole
Mar 28 at 18:44
as per your request, there is not much, literally a select and a table.
– Quba
Mar 28 at 20:00
add a comment |
As Andrew mentioned your goal is to fetch the latest data to remove the existing data you can run a function to delete the existing data before forEach method i see thats what you have done .
– Fire-In-D-Hole
Mar 28 at 6:54
yes only problem is that now the data is not realtime, the table has to be refreshed as every-time i manually update the data in the firebase console i still get a duplicate.
– Quba
Mar 28 at 16:40
Can you edit your question with all HTML, JS files added that way I can figure out how your code is and help you out.
– Fire-In-D-Hole
Mar 28 at 18:44
as per your request, there is not much, literally a select and a table.
– Quba
Mar 28 at 20:00
As Andrew mentioned your goal is to fetch the latest data to remove the existing data you can run a function to delete the existing data before forEach method i see thats what you have done .
– Fire-In-D-Hole
Mar 28 at 6:54
As Andrew mentioned your goal is to fetch the latest data to remove the existing data you can run a function to delete the existing data before forEach method i see thats what you have done .
– Fire-In-D-Hole
Mar 28 at 6:54
yes only problem is that now the data is not realtime, the table has to be refreshed as every-time i manually update the data in the firebase console i still get a duplicate.
– Quba
Mar 28 at 16:40
yes only problem is that now the data is not realtime, the table has to be refreshed as every-time i manually update the data in the firebase console i still get a duplicate.
– Quba
Mar 28 at 16:40
Can you edit your question with all HTML, JS files added that way I can figure out how your code is and help you out.
– Fire-In-D-Hole
Mar 28 at 18:44
Can you edit your question with all HTML, JS files added that way I can figure out how your code is and help you out.
– Fire-In-D-Hole
Mar 28 at 18:44
as per your request, there is not much, literally a select and a table.
– Quba
Mar 28 at 20:00
as per your request, there is not much, literally a select and a table.
– Quba
Mar 28 at 20:00
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55384951%2fhow-to-reload-html-table-when-firebase-data-changes%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Before your
snapshot.forEach...you can delete all rows in your table (except for the header row).– Andrew Lohr
Mar 27 at 19:23
may you please show me how if you know? I have tried several ways and nothing.
– Quba
Mar 27 at 19:38
1-You want the existing data from the table to be removed and new data to be updated in that place?? or 2- you want the old data in the table to be present and the new data to be added below under the existing one?? How is that you want??
– Fire-In-D-Hole
Mar 27 at 19:41
1-I want the existing data from the table to be removed and new data to be updated in that place.
– Quba
Mar 27 at 19:44
can you show us your realtime db data ..Export the realtime data from your database and paste it Click me to export data from Database . Also can you show us the duplicate data that is being added into the Html and what data are you expecting to be shown in the Table?? With the function code you have shared above we can only see that you are adding the data to the Db. Can you add more Code ?
– Fire-In-D-Hole
Mar 27 at 20:38