使用jQuery从Firebase更新页面上的数据时遇到问题

Question

  //Display User in header
  usersRef.child(uid).on('value', function(name){
    var dName = (name.val().displayName);
    $("#userName").replaceWith("<li id=userName><span>Logged in as " + dName + "</span></li>");
    //Get the first Letter of the users name
    firstLetter = dName.charAt(0);
    //Display icon in header
      console.log("User Image Replaced");
      $("#userImage").replaceWith("<li id='userImage'>" + firstLetter + "</li>");
  });

The above code successfully creates a user icon in the header of my website. It is the first letter of their name with a background the color of their 'user color'. When their 'user color' gets changed I want the icon in the header to update.

I have been getting mixed results, but usually it would update the first time I change the color and I would have to click around the page for it to do it again. But not always, sometimes it would not work the first time and sometimes it would work the first three times.

Have I coded it in a way which is causing this problem or is it a Firebase thing?

Answer 1

You need to add child_changed event for the firebase reference URL.

Following is the example:

usersRef.on("child_changed", function(snapshot) {    
      document.getElementById("username").innerHTML = udata.name;
      document.getElementById("username").style.backgroundColor=udata.color;
});

Sample fiddle: http://jsfiddle.net/learningloop/ha5wncmx/19/