Best IT Recipes

A simple jQuery ajax example cannot find elements in returned HTML

I am trying to learn jQuery ajax functions. It works for me, but jQuery does not 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>

Who 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>

He gives two warnings. The DOM was loaded, but the second shows NULL instead of #wrapper. What am I doing wrong?

EDIT: I load "ajaxtest-load.html", which includes the entire header, including jquery. This is problem?

+11
jquery dom ajax parsing
Jun 23 '09 at 15:50
source share
4 answers

I was able to fully download fragments from full html documents using .load() .

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

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

If it does not work for you, make sure you are using the latest version (or post 1.2) of jQuery. See the documentation for .load for more details .

Edit:

Note that in the above example, the result would be:

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

To get only the contents of div #contents in another document, use the callback function in the call to the load function.

 $('<div></div>').load('some-other-document.html div#contents', null, function (responseText, textStatus, XMLHttpRequest) { if (textStatus == success) { $('<div></div>').appendTo('body').html($(this).html()); } } );
+7
Jun 23 '09 at 17:14
source share

This is not a direct answer, but it can help clarify the situation.

The data parameter of the callback function can be turned into a jQuery (1.6.2) $ (data) object, which contains various parts of the HTML response:

  • Material that precedes the actual document, such as a doctype declaration, or uninformed white space text fields.
  • The content of the head element.
  • The content of the body element.

The html, head and body elements are not in the data object. Since the number of elements contained in the head and body may vary, you should not get them by indexing, like $ (data) [2]. Instead, apply a filter to this object, for example:

  $.get( uri, function(data, textStatus, jqXHR){ var $doc = $(data); var title = $doc.filter('title').text(); // title is the title from the head element. // Do whatever you need to do here. } );

After filtering the correct elements, you can apply additional selectors using find ().

Unfortunately, in IE, header elements are not part of $ (data). I have no idea why this is.

+9
Mar 07 '12 at 10:15
source share

I found that if ajaxtest-load.html does not have <html> or <body> tags, but just a few html elements, it works.

Edit:

If the input file should be a full HTML page, maybe you can first remove tags that you don't need using string operations .. anyone?

Edit 2:

Vaguely remembering Javascript / DOM allowed "temporary documents" with which you could work and use the results, then a bit in the search engine gave the function parseHTML ( http://www.daniweb.com/forums/post874892-2.html ) I adapted to return the correct bit:

 $(document).ready(function(){ $('input').click(function(){ $.ajax({ type : "POST", url : 'ajaxtest-load.html', dataType : "html", success: function(data) { alert( data ); // shows whole dom var gotcha = parseHTML(data, 'wrapper'); if (gotcha) { alert($(gotcha).html()); }else{ alert('ID not found.'); } }, error : function() { alert("Sorry, The requested property could not be found."); } }); }); }); function parseHTML(html, idStr) { var root = document.createElement("div"); root.innerHTML = html; // Get all child nodes of root div var allChilds = root.childNodes; for (var i = 0; i < allChilds.length; i++) { if (allChilds[i].id && allChilds[i].id == idStr) { return allChilds[i]; } } return false; }

It works?

+3
Jun 23 '09 at 16:37
source share

Why not try it and see what happens:

 $('#testDiv').load('ajaxtest-load.html #wrapper', function(resp) { alert(resp); });

From $. download documentation :

In jQuery 1.2, you can specify a jQuery selector in the url. Doing this will filter the incoming HTML code of the document, only the input elements that match the selector.

+2
Jun 23 '09 at 16:00
source share


More articles:


All Articles