ansaurus

Question

Simple jQuery ajax example not finding elements in returned HTML

Answer 1

A:

Why not try this and see what happens:

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

From the $.load documentation:

In jQuery 1.2 you can now specify a jQuery selector in the URL. Doing so will filter the incoming HTML document, only injecting the elements that match the selector.

karim79 2009-06-23 16:00:37

Thanks, but running that, firebug showed the error '$.load' is not a function.

2009-06-23 16:31:33

You can't just use $.load. You have to use it on a selector like $(selector).load()

T B 2009-06-23 16:33:43

@T B - yeah, don't know what I was thinking. @threebttn Sorry about that, try using it to fill up a div. See my edit.

karim79 2009-06-23 16:36:42

I modified it to populate a div, but still no luck. I think it's because it's a full HTML DOM instead of an HTML snippet (per the answer below, too). Could that be the problem? How do I parse a full HTML DOM?

2009-06-23 16:45:39

Uhm, not sure from which activities one gets alerts here (new to SO) so I'll just comment the main question.. I updated my post below a bit with a parseHTML function, hope that helps

MSpreij 2009-06-23 17:40:25

Answer 2

+1 A:

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

Edit:

If the input has to be a full HTML page, maybe you can first strip of the tags you don't want with string operations.. anyone?

Edit 2:

Vaguely remembered Javascript/DOM allowed for "temporary documents" which you could operate on and use the results from, then a bit of googling yielded a parseHTML function (http://www.daniweb.com/forums/post874892-2.html) which I've adapted to return the right 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;
}

Does that work?

MSpreij 2009-06-23 16:37:26

Oh, maybe a regex to strip out the body or something? And then use jQuery to convert that to an object that I can .find() on?

2009-06-23 16:49:53

Something like that, yes. I'd have supplied an example but my JS regex isn't that fantastic, and I'm double wary of giving regex examples when I've very little idea what might be in the content :-)(Like, the body could have attributes containing a '>')But willing to try..

MSpreij 2009-06-23 17:06:00

Answer 3

A:

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());
        }
    }
);

nikc 2009-06-23 17:14:40

ansaurus

tags:

views:

answers:

Simple jQuery ajax example not finding elements in returned HTML

related questions