Load() with page and ID

Question

I am trying to load an ID from a page with jQuery's load(). Here is the HTML of the loaded page:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
        <section id="content" class="contentPage">
        <h3>Home</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id eros orci. Nam id interdum enim. Ut mauris enim, scelerisque a pellentesque in, molestie eget sem. Ut sagittis erat eget elit euismod laoreet. Vivamus odio mauris, aliquam sed ornare non, tempus nec augue. Proin id lectus elit. Donec pharetra viverra lectus, pellentesque sollicitudin magna gravida pellentesque. Quisque tristique, libero at pulvinar rutrum, neque nunc tincidunt lorem, sit amet varius lorem leo sit amet mi. Quisque vehicula diam in libero aliquet dapibus. Nullam eget arcu a sapien scelerisque fermentum. Integer suscipit magna sed quam aliquet mattis. Suspendisse in erat eu nisi hendrerit bibendum. Aliquam blandit malesuada metus. Duis dapibus consequat ultrices.
        </p>
        </section>
        <!-- end Page1 -->
</body>
</html>

From this I only wish to load the #content section (and for compatibility reasons I cannot get rid of everything but that section). I am working with variables to call this function, but this doesn't seem to work:

var firstLink = $("ul > li:first-child > a");   
$("#sectionContainer").load("./" + firstLink.attr("href") + " #content");

In which the variable firstLink.attr("href") returns a link such as Pages1.html. When the last part ( + " #content") is left out, the script works as it should.

I thought this would work, because jQuery's documentation states you can do the following:

$('#result').load('ajax/test.html #container');

Any idea what I am doing wrong? Or can't you add this kind of text to a variable in jQuery?

No it shouldn't. #sectionContainer is on the main page. The main page contains the script and the script then loads the HTML page that is shown above. I want to filter that document and only load #content of that page. — Bram Vanroy, May 16 '12 at 08:46
What you have looks like it should work at first glance. Have you alerted the href to make sure it's the value you expect. Also, when you say it "doesn't seem to work", what happens? Any errors in the console? — James Allardice, May 16 '12 at 08:50
@Imdad - Seeing as the code apparently works when the `#content` is removed from the `load` argument, I think jQuery has definitely been included. It does not have to be included in the file that is being loaded, if that's what you meant. — James Allardice, May 16 '12 at 08:54
I'm working on a console log. Stay tuned. (Yes, jQuery is included, I have only posted the relevant code.) — Bram Vanroy, May 16 '12 at 08:54
@BramVanroy Try to remove `"./"` from the code `.load("./"` it is not necessary. And if you want data of `#container` then make sure that the `ajax/test.html` page contains an element (may be a div) with `id="container"` — Imdad, May 16 '12 at 08:58
Here is a test case. Check the console. It returns what it should (./Pages1.html #content). So I don't know why this isn't working .. http://bramvanroy.be/sectionLoaderTest/ — Bram Vanroy, May 16 '12 at 08:59
@Imdad "./" is necessary in my case. Check this topic: http://stackoverflow.com/questions/10605200/load-and-relative-paths — Bram Vanroy, May 16 '12 at 08:59
use `#Pages1` in place of `#content` as you have id `Pages1` in Pages1.html — Imdad, May 16 '12 at 09:02
You are right. Apparently I didn't update my Pages1.html. Man, always these small stupid mistakes ... Thanks a lot! If you post it as an answer I'll mark it as correct. — Bram Vanroy, May 16 '12 at 09:05

score 1 · Accepted Answer · answered May 16 '12 at 09:10

If you are using

var firstLink = $("ul > li:first-child > a");   
$("#sectionContainer").load("./" + firstLink.attr("href") + " #content");

Then in the page referred by first link should have an element (for example a div or a section) with ID content

As in your case your page (first link) contains id Pages1 you can use #Pages1 in place of #content

score 0 · Answer 2 · answered May 16 '12 at 08:56

this feature works, just try instead and you should have a single "home" text in your page :

  $(document).ready(function() {
    $("#content").load(". h3"); // reload in the same page
  });

The most common problem is the url in the first parameter of .load(). Look for 404 in your network console. Then, try :

$("#sectionContainer").load("./Pages1.html #content");

Do you have <base> in your page ? absolute urls ?

Load() with page and ID

2 Answers2