Unexpected token function in Firebase - firebase

Question

I'm using the Firebase chat from the tutorial and I added an additional key pair that will keep track of the "status" of each message in the form of a boolean:
myDataRef.push({
name: name,
text: text,
status: false
});
Here is the fiddle.
I'm looking to have the text change automatically when I change the value of status in the database. So if I change it to false for one message, that message turn red instead of the default green.
Here is the bit that I am having trouble with:
var done = myDataRef.orderByChild('status').equalTo(true);
done.on('child_added', function(function(snapshot) {
var obj = snapshot.val();
if(obj.status == true) {
$('.text').attr('class', 'text red');
}
});
The code first runs through all the children looking for those that have the child "status" equal to true. Then it changes the attribute of the results by turning the text red.
However, I am not exactly sure why but I am getting a:
Uncaught SyntaxError: Unexpected token function
I hope someone can help me out here! Thanks.

Answer 1

You have a typo in your example above at:
done.on('child_added', function(function(snapshot) { ... }).
Note that duplicate function. Instead, this should be:
done.on('child_added', function(snapshot) { ... }).
--
Update 2015-03-17:
In your JSFiddle, there are a few errors. First, you create elements with "green" by default:
function displayChatMessage(name, text) {
$('#messagesDiv').prepend('<div class="text green"><i>' + name + '</i> ' + text + '<br>');
};
But, you're not closing the <div> tag, and you're filtering out any cases where obj.status would be false, and thus should update to red:
var done = myDataRef.orderByChild('status').equalTo(true);
done.on('child_added', function(snapshot) {
var obj = snapshot.val();
if(obj.status == true) { <-- Should be 'obj.status == false'
$('.text').attr('class', 'text red');
}
});
The next issue, is that upon color change, you're not selecting any specific child elements - you're selecting all fields with the text class:
var done = myDataRef.orderByChild('status').equalTo(true);
done.on('child_added', function(snapshot) {
var obj = snapshot.val();
if(obj.status == true) {
$('.text').attr('class', 'text red'); <-- Offending line
}
});
You'll need to give each element in the list some identifier, so that you can specifically update that element later on when the status changes. Here's an updated version, which you can test at the JSFiddle located here:
myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
var color = (message.status) ? 'green' : 'red';
$('#messagesDiv').prepend(
$('<div />', {
'id' : message.name,
'class' : 'text ' + color,
'html' : '<i>' + message.name + '</i> ' + message.text + '<br>'
})
);
});
myDataRef.on('child_changed', function(snapshot) {
var message = snapshot.val();
var color = (message.status) ? 'green' : 'red';
$('#' + snapshot.key()).attr('class', 'text ' + color);
});