Ultrabenosaurus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    jQuery, AJAX & Complex HTML

So you need to grab some pretty complex HTML - likely a whole page - via AJAX and extract a certain portion of it for use.
You're already using jQuery for your project, or it's not a big deal to add, so you figure it's super-simple and powerful selector functions like find will make your life a whole lot easier.
I mean, you can just pass HTML into the top-level $() function and it'll turn into a jQuery DOM representation so you can just chain a find call onto that, right? Wrong.
Mostly due to the underlying browser APIs that jQuery has to rely on, complex HTML and especially entire pages get filtered into a big mess that makes using regex on the raw text response about as easy as using jQuery for it.
This is a compilation of basic examples of what you might try, and what works, based on my own futile experiments and this wonderful StackOverflow answer.
The first example is the one that works best and most reliably, as well as being the only one that works on whole pages, seeing as that's likely what you're most interested in.
Note: these examples won't work because example.com doesn't allow cross-origin requests. Test them with URLs you know will provide a proper response.

  
## examples.js
// best because doesn't add to actual DOM, so no reflow overhead
// creats new document object containing entire HTML data, so works like you'd expect from $(document).find("a");
$.ajax( {
  url:"http://example.com/",
  success: function(data){
    res=$("<html />").html(data);
    console.log($(res).find("a"));
  }
} );

// won't work
$.ajax( {
  url:"http://example.com/",
  success: function(data){
    console.log($(data).find("a"));
  }
} );

// will only work if what you're looking for is at the root-level of the HTML structure
$.ajax( {
  url:"http://example.com/",
  success: function(data){
    console.log($(data).filter("a"));
  }
} );

// might work, requires perfectly valid XHTML though
$.ajax( {
  url:"http://example.com/",
  success: function(data){
    dom = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
    console.log($(data, dom)[0].find("a"));
  }
} );

// might work, but will likely disregard HEAD and certain tags within it
// and you need to know the structure of the resulting array of elements for the index on $(res)
$.ajax( {
  url:"http://example.com/",
  success: function(data){
    res=$("#someDiv").html(data);
    console.log($(res)[0].find("a"));
  }
} );
	// best because doesn't add to actual DOM, so no reflow overhead
	// creats new document object containing entire HTML data, so works like you'd expect from $(document).find("a");
	$.ajax( {
	url:"http://example.com/",
	success: function(data){
	res=$("<html />").html(data);
	console.log($(res).find("a"));
	}
	} );

	// won't work
	$.ajax( {
	url:"http://example.com/",
	success: function(data){
	console.log($(data).find("a"));
	}
	} );

	// will only work if what you're looking for is at the root-level of the HTML structure
	$.ajax( {
	url:"http://example.com/",
	success: function(data){
	console.log($(data).filter("a"));
	}
	} );

	// might work, requires perfectly valid XHTML though
	$.ajax( {
	url:"http://example.com/",
	success: function(data){
	dom = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
	console.log($(data, dom)[0].find("a"));
	}
	} );

	// might work, but will likely disregard HEAD and certain tags within it
	// and you need to know the structure of the resulting array of elements for the index on $(res)
	$.ajax( {
	url:"http://example.com/",
	success: function(data){
	res=$("#someDiv").html(data);
	console.log($(res)[0].find("a"));
	}
	} );