Update DIV without reloading page when receiving Firebase data

Question

Update DIV without reloading page when receiving Firebase data

Navigation

#1 by (0 votes)

0

On a div, with CSS, I'm trying to update its background color with a change in a database in Firebase. This update I only see if I refresh in the browser. I would like the corresponding div to be updated since the change was made in Firebase. Attached codes:

Here I make the class changes:

function changeColor(colorChange) {
if ((colorChange == 1) || (colorChange == 11)){
    document.getElementById('Asiento7').classList.remove('blink','flash');
    document.getElementById('Asiento7').classList.add('Busy');
}

Previous changes are made by reading from the database:

var databaseEstado = firebase.database().ref('CubiculosIndividuales/Asiento1/status');
    databaseEstado.once("value", function(snap){
    status = snap.val();
    changeColor(status);
});

javascript html firebase css

asked by Alex 21.10.2018 в 21:23

source

1 answer

SQLite Fincas with sum of income and expenses As I send fix with an insert

score 0 · Accepted Answer

The problem is that you use the once method that runs only once, when you must use the on method, which is executed every time there is a change in the database:

var databaseEstado = firebase.database().ref('CubiculosIndividuales/Asiento1/status');
databaseEstado.on("value", function(snap){
    status = snap.val();
    changeColor(status);
});

Here you can read the documentation .