Update the table without manually refreshing

266
March 09, 2017, at 00:02 AM

I have the following code but it seems like the syncUpdate function doesn't work for me. Basically, when I click update employee it populates my form with its data and then I can change the data and click update. Then I just update the employee with the newly entered data. However, the table (list of employees) is not updated unless I click refresh manually.

function UpdateEmployee(){
this.rootRef;
this.database = firebase.database();
this.dialog;
this.newEmployeeID;
this.newEmployeeName;
this.newEmployeeEmail;
dialog = document.querySelector('#updateDialog');
if (!dialog.showModal) {
  dialogPolyfill.registerDialog(dialog);
}
// Now dialog acts like a native <dialog>.
dialog.showModal();
rootRef = firebase.database().ref().child("Employees");
this.fetchEmployees = function fetchEmployees(){
  rootRef.on('child_added', snap => {
    id = snap.child("ID").val();
    key = snap.key;
    name = snap.child("Name").val();
    email = snap.child("Email").val();
    btn = "<button key='"+ key +"' class='updateEmployee mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'>Update</button>";
    $("#table_body").append("<tr id='"+key+"'><td>" + id + "</td><td>" + name + "</td> <td>" + email +
    "</td><td>" + btn +"</td></tr>");
  });
}
//Get data for the employee clicked and populate form
function getData(k){
  return firebase.database().ref('/Employees/' + k).once('value').then(function(snapshot) {
    var id = snapshot.val().ID;
    var name = snapshot.val().Name;
    var email = snapshot.val().Email;
    document.getElementById('uId').value = id;
    document.getElementById('uEn').value = name;
    document.getElementById('uEe').value = email;
  });
}
function setNewData(k){
  firebase.database().ref('Employees/' + k).set({
    ID: newEmployeeID,
    Email: newEmployeeEmail,
    Name: newEmployeeName
  });
}
function checkUpdateClick(){
  //Check if update button is clicked
  $(document).on('click', ".updateBtn", function(){
  newEmployeeID = $("#uId").val();
  newEmployeeName = $("#uEn").val();
  newEmployeeEmail = $("#uEe").val();
  if(newEmployeeID != "" && newEmployeeName != "" && newEmployeeEmail != ""){
    setNewData(key);
    $("#updateSuccess").show().text("Employee successfully updated!");
    //show the update form
  }
  else{
    $("#updateSuccess").show().text("Employee not updated! Try again.");
  }
  });
}
this.updateEventListener = function updateEventListener(){
  $(document).on('click', ".updateEmployee", function(){// note: using 'removeElement' as class, not as id
    //fetch the key for the row/employee clicked
    var key = $(this).attr('key');
    //show the update form
    $("#updateDialog").show();
    //Get data for the employee clicked and populate form
    getData(key);
    checkUpdateClick();
  });
}
this.syncUpdate = function syncUpdate(){
  rootRef.on('child_added', function(snap) {
    key = snap.key;
    $('#' + key).set();
    });
  }
}
var updateEmp = new UpdateEmployee();
updateEmp.fetchEmployees();
updateEmp.updateEventListener();
updateEmp.syncUpdate();
READ ALSO
Firebase web page on ios &lt; 10

Firebase web page on ios < 10

I've built a web page for a school project and I used Firebase for the Realtime databaseIt's a simple JavaScript that i'm running:

267
Terminate and restart the webworker if the same event occurs

Terminate and restart the webworker if the same event occurs

I am initiating a webworker by clicking on a marker on google mapwhen click event occurs the id of that marker(sensorid in my case) is passed to the function which starts the worker and worker fetched the data against that id

298
Meteor how to make webtempest:animate work on {{#each loop}}

Meteor how to make webtempest:animate work on {{#each loop}}

I am trying to make the webtempest:animate transistions work in my meteor projectEvery time the content changes I want it to slide in from the right and the old one to slide out to the left

277
ES6 Script not working on Chrome iOS

ES6 Script not working on Chrome iOS

I have an issue with my webpage on the Chrome browser on my iPhone 6 that I cannot seem to replicate on the iPhone 6 simulator in the Chrome dev tools

326