Home/ Questions/Q 257789
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T22:07:36+00:00

I’m trying to learn jQuery’s ajax functions. I’ve got it working, but jQuery doesn’t

  • 0

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>runthis</title>

    <script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>

    <script tyle="text/javascript">
    $(document).ready(function(){
        $('input').click(function(){
            $.ajax({
                type : "GET",
                url : 'ajaxtest-load.html',
                dataType : "html",
                success: function(data) {

                alert( data ); // shows whole dom

                alert( $(data).find('#wrapper').html() ); // returns null

                },
                error : function() {
                    alert("Sorry, The requested property could not be found.");
                }
            });
        });
    });
    </script

</head>
<body>
    <input type="button" value="load" />
</body>
</html>

Which loads this page “ajaxtest-load.html”:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>load this</title>

</head>
<body>
    <div id="wrapper">
    test
    </div>
</body>
</html>

It gives two alerts. One showing the DOM was loaded, but the second shows NULL instead of the #wrapper. What am I doing wrong?

EDIT: I’m loading “ajaxtest-load.html” which includes the whole header, including jquery again. Is that the issue?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    $('<div></div>').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:

    <div><div id="contents">...</div></div>

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

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