populating div from external file div with javascript and jquery

Question

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.

Illusion

Can you alert the filename and verify that the file exists? It may be a problem with the file path. – Intelligence

@mrtsherman I think the op is trying to load only the part of the specified html with id 'source'. – Intelligence

@AmitBhargava - thanks, didn't know load could do that! Looks like his syntax is still wrong though. – Filbert

Tried following the info here. I am sure the file exists, it is right beside the file I am using. – Illusion

@Illusion Well, I hope the 'files' folder is at the right location. I'm not sure as to the correct absolute location myself. Please post the absolute path of the 'files' folder. Maybe that will help us figure it out. – Intelligence

At this point, everything I am doing is on my local machine. The files folder it next to the file I am working on. Inside it are all the individual files for the books and chapters. – Illusion

Answer 1

Use this code: $('#text').load(filename + " #source");.

Blowbyblow

#source (according to this) is the id of the div in the other html file. I have tried with just 'filename', and will the actually file's name (which is supposed to be dynamic, hence the variable). Nothing works. – Illusion

Thanks. Jsfiddle doesn't seem to work with nearly any other link I try. – Illusion

@Illusion yes, allright. Google "Access-Control-Allow-Origin". – Blowbyblow

OK, apparently there were a number of issues, a primary one being that I wasn't doing a hard refresh in the browser. Ok, so now everything plays nice and it will display the info from the other html file nicely. However, it does not work when I use the 'filename' variable. The whole point of this project is to make a look up based on a dynamic selections. So, I think inputting a variable is the problem. – Illusion

Stupid me. Didn't see it. The problem was not that $.load() cannot take a variable it can. In the line where I define the variable I forgot to put the correct quotes in the string to make it readable to $.load(). So, here is the correct string: var myFile = "'files/" + book + chapter + ".html'";. Thanks for all the help. – Illusion