populating div from external file div with javascript and jquery

Go To StackoverFlow.com


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

<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


Thanks for any help.


Edit: Here is a link to the actual file I am working on. There may be something wrong in it as well.

2012-04-04 03:50
by preahkumpii
Can you alert the filename and verify that the file exists? It may be a problem with the file path - Chetter Hummin 2012-04-04 03:54
@mrtsherman I think the op is trying to load only the part of the specified html with id 'source' - Chetter Hummin 2012-04-04 03:56
@AmitBhargava - thanks, didn't know load could do that! Looks like his syntax is still wrong though - mrtsherman 2012-04-04 04:02
Tried following the info here. I am sure the file exists, it is right beside the file I am using - preahkumpii 2012-04-04 04:04
@preahkumpii 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 - Chetter Hummin 2012-04-04 04:10
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 - preahkumpii 2012-04-04 04:14


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

2012-04-04 03:52
by Daniil Ryzhkov
>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. - preahkumpii 2012-04-04 03:56
Didn't work... - preahkumpii 2012-04-04 03:58
http://jsfiddle.net/daniilr/kwQQK/ look at this example. Updated variant works - Daniil Ryzhkov 2012-04-04 04:06
Thanks. Jsfiddle doesn't seem to work with nearly any other link I try - preahkumpii 2012-04-04 04:22
@preahkumpii yes, allright. Google "Access-Control-Allow-Origin" - Daniil Ryzhkov 2012-04-04 04:57
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 - preahkumpii 2012-04-04 05:12
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 - preahkumpii 2012-04-04 05:51