CODEWITHSUNDEEP
javascriptjqueryhtmlfirebase-realtime-database
Ebenezer
Ebenezer

Reputation: 102

how to check for changed values in firebase real time database and make them show up in html table?

I have been able to remove entries from the table once it's been removed on the database and also able to add entries once they've been edited. how to check if data is already in html table using firebase real time database? I am now looking for how to look for live changes to the database.

var database = firebase.database().ref().child('transactions');
database.on('child_added', function(snapshot){
    var data = snapshot.val();

    var content = '<tr id="'+snapshot.key+'">';
    content += '<td>' + data.CustomerName + '</td>';//column2
    content += '<td>' + data.TimeEffected + '</td>'; //column1 
    content += '<td>' + data.DateEffected + '</td>'; //column1
    content += '<td>' + data.Successful + '</td>'; //column1
    content += '</tr>';
    $('#ex-table').append(content);

    database.on('child_removed', function(snapshot){
        $('#'+snapshot.key).remove()
    });

});

I tried using this:

database.on('child_changed', function(snapshot){
        $('#'+snapshot.key).change()
    });

I tried putting it under the remove method but that has been unsuccessful.

Upvotes: 0

Views: 2766

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598847

The $('#'+snapshot.key) gets the correct element in the HTML, but jQuery's change() method does not do what you think it does. Read the linked documentation to learn what it actually does.

If you think about if for a moment this should make sense: how would a built-in method from jQuery know how to update your HTML structure?

Only your code knows what HTML it created for the data in the snapshot. You will need to replicate (some of) your code that creates the HTML in the child_added callback into the child_changed callback.

Something like this:

database.on('child_changed', function(snapshot){
    var data = snapshot.val();

    var content = '<tr id="'+snapshot.key+'">';
    content += '<td>' + data.CustomerName + '</td>';//column2
    content += '<td>' + data.TimeEffected + '</td>'; //column1 
    content += '<td>' + data.DateEffected + '</td>'; //column1
    content += '<td>' + data.Successful + '</td>'; //column1
    content += '</tr>';

    $('#'+snapshot.key).replaceWith(content)
});

Upvotes: 2

Related Questions