8

I'm trying to work out how to parse specific parts of a page using JQuery's AJAX method. What I'd like to do is something like this:

$.ajax({
    url: "page-to-load.htm",
    dataType: "html",
    success: function (response) {
            var html= $(response);
            var content = html.find("#main");
            var title = html.find("title");
            var nav = html.find("ul.nav");
    }
});

I know that I can load specific page parts using [container].load() but this will (as far as I understand it) create a request for each page part I want to load.

In my sample code, the html object seems to be an array of HTML elements but each of the objects returned by find() are null. The elements searched for do exist in the target page.

Am I missing something obvious or is this just not something that JQuery can handle?

Kevin Wilson
  • 7,753
  • 8
  • 35
  • 39
  • Maybe a full HTML document confuses `$(response)`? Try using string manipulation to crop `response` so that it only has the contents of the `body` element in your page, and see if this changes anything. – Jon Dec 20 '10 at 00:19
  • I tried creating an empty page that just had the content and loaded that using the same method as above. When I call $(response).html() I get a null value so looks like it's not the document structure that's the issue. Good suggestion though, thanks. – Kevin Wilson Dec 20 '10 at 00:33

5 Answers5

2

This works. Use .load with the special url syntax to get the part of the page you want into a temporary div. Use the inner html from that for whatever you want. 

$(function(){      
  var tempDiv = $("<div />");
  tempDiv.load('index.html #target-element', function(){    
    alert(tempDiv.html());
  });
});

Here is an example without the url syntax so you can work with the entire page. You can pull the title out like you are trying to do in your question...

$(function(){
  var tempDiv = $("<div />");
  tempDiv.load("page-to-load.htm", function() {
        var content = tempDiv.find("#main");
        var title = tempDiv.find("title");
        var nav = tempDiv.find("ul.nav");
  });
});
Brandon Joyce
  • 3,100
  • 24
  • 25
  • To prevent the multiple requests issue you mentioned just select an element that contains everything you need. I think 'body' will even work. – Brandon Joyce Dec 23 '10 at 09:51
  • That would work for any elements within the body of the document, but not for anything in the head. I'd need to pull the page title as well as the content. – Kevin Wilson Feb 02 '11 at 16:36
  • If you just load the entire url it does appear that the head tag and body tag are stripped, however their contents seem mostly intact. So, just load the entire page into a temporary div like I did above. Then just select the title and anything else you need out of that. Working like a charm for me! – Brandon Joyce Mar 13 '11 at 07:44
0

Actually, found a problem within the answer to another question on here: Why does this jQuery fail to load/parse my HTML string?

From the documentation:

The HTML string cannot contain elements that are invalid within a div, such as html, head, body, or title elements.

If you are fetching a complete HTML document, then you will have lots of elements that may not appear in a div.

answered Sep 18 '09 at 11:53 David Dorward

Looks like it may be impossible then. Dang.

Community
  • 1
  • 1
Kevin Wilson
  • 7,753
  • 8
  • 35
  • 39
0

I certainly would not call it impossible.

The very first solution that comes to mind is to do something like this:

1) Insert HTML comments in your output just after opening and just before closing the <body> tag. These comments should contain a unique string so that you can search for it; a guid generated for this purpose would be a good choice. For example:

<!DOCTYPE
blah blah
...
<body>
<!-- BODY: 3F2504E0-4F89-11D3-9A0C-0305E82C3301 -->
...
<!-- BODY: 3F2504E0-4F89-11D3-9A0C-0305E82C3301 -->
</body>

2) After receiving the response, search it for the two instances of <!-- BODY: 3F2504E0-4F89-11D3-9A0C-0305E82C3301 -->. Trim the string so that everything before the first and after the second instance is deleted.

3) You now have a string that contains only elements legal inside a <div>.

The drawback to this method is that you lose access to elements outside <body>, for example <title> (since you mention it). You will have to find another way of passing this information; there are really too many ways to go about this, so pick your poison.

Update (notes):

  • This solution requires that you can modify the HTML produced by page-to-load.html (in other words, it has to be code you own). If this is not the case, then a possibility would be to search for <body> and </body> yourself, but that would start being bug-prone (parsing HTML with regular expressions).
  • Obviously, the unique string (e.g. guid above) will be chosen once and used forever without modification. The whole point is that you need to know what to search for.
Community
  • 1
  • 1
Jon
  • 428,835
  • 81
  • 738
  • 806
  • Hi, thanks for the idea. I've updated the master page to include wrapper comments around the main content and am selecting the area within these form the response. If I examine the text it exactly matches the body content (header and a div with a line of paragraph text in it). However, wrapping that into a JQuery object still gives me nothing for anything I try to find within it. – Kevin Wilson Dec 22 '10 at 13:43
0

In addition to what you said, the comments on the .find() documentation indicate that you can only perform this action if the HTML is a part of the DOM on your current page. This suggests to me that if you stick all this data into a hidden div and then try to call find, you'll get the results you want.

jwheron
  • 2,553
  • 2
  • 30
  • 40
  • Hi, thanks for the suggestion. I tried that but was getting issue with JavaScript on the target page being called multiple times. The generic event binders that are called on the page load seem to get called again when the page is loaded into the DIV. There may be a way around that though. – Kevin Wilson Dec 22 '10 at 13:26
  • Can you set these events in your HTML rather than initializing them on document.ready? Or are you saying that they get called twice either way? – jwheron Dec 23 '10 at 04:58
0

You could do a split, and then some string replaces before you add it to a jquery object.

$.ajax({
url: "file.html",
dataType: "html",
success: function (response) {            
    var resp = response.split('<body>');
    resp = resp[1].split('</body>');
    resp = resp[0].toString();
    var html = $('<div>'+resp+'</div>');
    var div = html.find('div');
    var ul = html.find('ul');
    var foot = html.find('footer');
    console.log(resp, html, div, ul, foot);
    ul.appendTo('body');
 }});

Works with given HTML:

<!DOCTYPE html>
 <html>
<head>
    <title></title>
</head>
<body>
<div>Something that we're gonna get</div>
<ul>

  <li>List item</li>
</ul>
<footer>Good foot</footer>
</body>
</html>
Eivind
  • 841
  • 4
  • 4