jQuery and HTML loaded via AJAX

Question

I am attempting to grab a child element of HTML loaded dynamically via AJAX. It is not working.

 $.get('test.html', function(data) {

    var content = $('#content', data).html();

    console.log(content); // Logs "Null"

    $('#result').html(content);

  });

Here is the 'test.html'

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8" />
  <title>Website</title>
  <meta name="description" content="" />
  <meta name="keywords" value="" />
</head>
<body>

  <h1>Hello!!!</h1>

  <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat tincidunt tortor eu iaculis. Sed id urna sem, quis malesuada lacus. Nulla iaculis malesuada libero, id vehicula sapien imperdiet eu.</div>

</body>
</html>

Also, if I try this: console.log($(data));, Firebug gives me this:

[<TextNode textContent="\n\n\n ">, meta, <TextNode textContent="\n ">, title, <TextNode textContent="\n ">, meta, <TextNode textContent="\n ">, meta, <TextNode textContent="\n\n\n \n ">, h1, <TextNode textContent="\n \n ">, div#content, <TextNode textContent="\n\n\n\n">]

Any ideas???

where is the #content in the html file ?

Royi Namir
– Royi Namir

2011-12-20 21:08:35 +00:00
Commented Dec 20, 2011 at 21:08 — Royi Namir
– Royi Namir, Commented Dec 20, 2011 at 21:08
Sorry... #holder was meant to be #content. I fixed above.

Matt Fordham
– Matt Fordham

2011-12-20 21:19:02 +00:00
Commented Dec 20, 2011 at 21:19 — Matt Fordham
– Matt Fordham, Commented Dec 20, 2011 at 21:19

owenmelbz · Accepted Answer · 2011-12-20 21:52:21Z

1

You made a mistake with the content var i believe, it doesnt make sense.

 $.get('test.html #content', function(data) {
 console.log(data); // Logs "Null"
 $('#result').html(data);
 });

thats how jquery website would say to do it.

I say use

$('#result').load('test.html #content');

hows that for ya?

answered Dec 20, 2011 at 21:52

owenmelbz

6,60618 gold badges70 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Travis · Accepted Answer · 2011-12-20 21:07:07Z

0

try using $.ajax instead:

 $.ajax({
   url:'test.html', 
   dataType:'html',
   success:function(data) {
    var content = $('#content', data).html();
    console.log(content); // Logs "Null"
    $('#result').html(content);
   }
  });

answered Dec 20, 2011 at 21:07

Travis

3361 silver badge5 bronze badges

2 Comments

Matt Fordham Over a year ago

Yeah, it gives me the same results too.

Travis Over a year ago

Correct. I wanted to be able to identify the name of the parameters though. The main point being to identify the dataType in case jQuery is not properly determining the data type from the MIME type in the response.

swatkins · Accepted Answer · 2011-12-20 21:34:54Z

0

I'm not quite clear on what you're trying to do, but I'm assuming you want to get the contents of #content in your test.html page and inject that into your #results div.

$.get('test.html', function(data) {
    var content = $(data).find("#content").html();
    $('#result').html(content);
});

edited Dec 20, 2011 at 21:34

answered Dec 20, 2011 at 21:09

swatkins

13.6k4 gold badges50 silver badges79 bronze badges

3 Comments

Matt Fordham Over a year ago

Sorry... #holder was meant to be #content. I fixed above. Anyway, I tried your suggestion, and content still logs out as null.

swatkins Over a year ago

What happens when you console.log(data) in the callback?

Matt Fordham Over a year ago

It looks as you'd expect... the contents of the file.

Collectives™ on Stack Overflow

jQuery and HTML loaded via AJAX

3 Answers 3

Comments

2 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Related