firebase read .on('value') not working - firebase

Question

This script is not working for me.
I know the problem is in the .on('value') function but I don't know what it is.
This is my script:
$(document).ready(function(){
//dynamic content switching inside the content section
function writeContent(page){
//setting post to default error message
var post = "Sorry, This page is undergoing maintenance.";
//firebase data reference for the clicked link's content
var dataRef = new Firebase("https://cityartist.firebaseio.com/"+page);
//inserting the available content to the 'post' variable
dataRef.on("value",function(snapshot){
if(snapshot.val() != null){
post = snapshot.val();
alert("post="+post);
}
});
//showing content in the content section and changing the page's title
$("#content").append("<article class='post'><p>"+post+"</p></article>");
$("title").text("CityArtist.org - "+page);
}
//switching pages using the navigation bar
$(".menu_link").click(function(){
writeContent($(this).attr("name"));
});
});

Answer 1

Callbacks in Firebase are often fired asynchronously, since Firebase has to wait for the data to arrive. So your on('value') callback code is being called /after/ the "//showing content in ..." code. You could try this instead:
dataRef.on("value",function(snapshot){
if(snapshot.val() != null){
post = snapshot.val();
alert("post="+post);
}
//showing content in the content section.
$("#content").append("<article class='post'><p>"+post+"</p></article>");
});

Answer 2

You need to perform the DOM changes inside the callback (e.g. after Firebase has returned data). Here it is in context:
$(document).ready(function(){
//dynamic content switching inside the content section
function writeContent(page){
//setting post to default error message
var post = "Sorry, This page is undergoing maintenance.";
//firebase data reference for the clicked link's content
var dataRef = new Firebase("https://cityartist.firebaseio.com/"+page);
//inserting the available content to the 'post' variable
dataRef.on("value",function(snapshot){
if(snapshot.val() != null){
post = snapshot.val();
alert("post="+post);
//showing content in the content section and changing the page's title
$("#content").append("<article class='post'><p>"+post+"</p></article>");
$("title").text("CityArtist.org - "+page);
}
});
}
//switching pages using the navigation bar
$(".menu_link").click(function(){
writeContent($(this).attr("name"));
});
});