Simple jQuery ajax example not finding elements in returned HTML

Question

I\'m trying to learn jQuery\'s ajax functions. I\'ve got it working, but jQuery doesn\'t find elements in the returned HTML DOM. In the same folder as jquery, run this page:

Answer 1

I've managed to load snippets off of full html-documents just fine by using .load().

To create a new block with extracted html into the DOM I do this:

$('
').appendTo('body').load('some-other-document.html div#contents');

If it's not working for you, make sure you're using the most recent version (or post 1.2) of jQuery. See the documentation for .load for more examples.

Edit:

Note, though, that with the above example the result will be:

...

To get just the contents of the #contents div in the other document, use a callback-function in the load-function call.

$('
').load('some-other-document.html div#contents', null, 
    function (responseText, textStatus, XMLHttpRequest) {
        if (textStatus == success) {
            $('
').appendTo('body').html($(this).html());
        }
    }
);