populating div from external file div with javascript and jquery

Very frustrated here. Can't get this to work and don't know why. I am trying to populate my div with a div from another html file. Here is my code: ``` <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <div id="text"> content goes here </div> <script type="text/javascript"> function whenButtonClicked() { var book = document.getElementById("book").value; //this is working var chapter = document.getElementById("chapter").value; //this is working var filename = 'files/' + book + chapter + '.html'; //this is working $('#text').load(filename #source); //this is NOT } </script> ``` Thanks for any help. Adam Edit: Here is a link to the actual file I am working on. There may be something wrong in it as well.