Parsing returned HTML from jQuery AJAX request

Question

What I'm trying to do seems simple: get an HTML page through $.ajax() and pull out a value from it.

$(function () {
    $.ajax({
        url: "/echo/html",
        dataType: "html",
        success: function (data) {
            $('#data').text(data);
            $('#wtf').html($(data).find('#link').text());
        },
        data: {
            html: '<!DOCTYPE html><head><title><\/title><link href="../css/popup.css" rel="stylesheet" /><\/head><body><ul><li><a id="link">content<\/a><\/li><\/ul><\/body><\/html>'
        }
    });
});

The problem is that jQuery refuses to parse the returned HTML.

The fiddle I'm play with this in isn't working in the mean time, so there's little else I can do to provide a working example.

UPDATE: My new fiddle is working fine, but it seems the problem is that in my actual project I'm trying to parse a large, complex bit of HTML. Is this a known problem?

You need to use POST when using /echo/html/ on jsFiddle (note the trailing slash, too). jsfiddle.net/hcrM8/6 — gen_Eric
– gen_Eric, Commented Nov 15, 2013 at 18:37

Community · Accepted Answer · 2020-06-20 09:12:55Z

21

Your code works fine. You just aren't using jsFiddle's API correctly. Check the docs for /echo/html/ (http://doc.jsfiddle.net/use/echo.html#html):

URL: /echo/html/

Data has to be provided via POST

So, you need to update your AJAX call to use POST. Also the trailing slash is needed.

$(function () {
    $.ajax({
        url: "/echo/html/",
        type: "post",
        dataType: "html",
        success: function (data) {
            $('#data').text(data);
            $('#wtf').html($(data).find('#link').text());
        },
        data: {
            html: '<!DOCTYPE html><head><title><\/title><link href="../css/popup.css" rel="stylesheet" /><\/head><body><ul><li><a id="link">content<\/a><\/li><\/ul><\/body><\/html>'
        }
    });
});

DEMO: http://jsfiddle.net/hcrM8/6/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 15, 2013 at 18:40

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Stephen Collins Over a year ago

Then the problem must lie in the actual HTML I'm fetching in my project. It's very large and very complex. The thing is, if jQuery can parse the page when it exists within the page, why can't it parse the page returned from the AJAX request?

gen_Eric Over a year ago

@wtfsven: What happens on your real page? What do you see? Any errors? When doing $(data), jQuery strips out the <html>, <head>, and <body> tags. Your jQuery object looks like: [<title>, <link>, <ul>]. Is the HTML on your real page valid? You may also need .filter vs. .find depending on its structure.

Stephen Collins Over a year ago

Ok, so it turns out for some reason jQuery is finding one iframe (that's what i'm selecting for), and not another. I'm still looking into it, but it seems to be working for the time being.

RiZKiT Over a year ago

It's old, but I comment because it's the top voted answer and the problem hopefully is solved here: stackoverflow.com/a/12848798/2590616

Luke Over a year ago

@RocketHazmat - .filter vs .find was all I needed. You don't know what you don't know. Thanks mate! :)

Krish R · Accepted Answer · 2013-11-15 18:31:36Z

8

If you would like to parse it, jquery has a nifty trick :)

 ParsedElements = $(htmlToParse);
 Console.log(ParsedElements);

You now have DOM elements you can traverse without placing them in the body of the document.

edited Nov 15, 2013 at 18:31

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

answered Nov 15, 2013 at 18:12

Anthony Iacono

2432 silver badges10 bronze badges

1 Comment

Stephen Collins Over a year ago

But that's just the problem. It's not parsing the HTML at all. $('#wtf').html($(data).find('#link').text()); should return "content", but it's saying text() is undefined.

Rizwan Mumtaz · Accepted Answer · 2013-11-15 18:36:43Z

3

jQuery.parseHTML()

http://api.jquery.com/jQuery.parseHTML/

str = "hello, <b>my name is</b> jQuery.",
  html = $.parseHTML( str ),
  nodeNames = [];

// Gather the parsed HTML's node names
$.each( html, function( i, el ) {
  nodeNames[ i ] = "<li>" + el.nodeName + "</li>";
});

Some thing is wrong with your ajax on fiddle

http://jsfiddle.net/hcrM8/5/

var html= '<!DOCTYPE html><head><title><\/title><link href="../css/popup.css" rel="stylesheet" /><\/head><body><ul><li><a class="disabled" id="link">content<\/a><\/li><\/ul><\/body><\/html>';
            h = $.parseHTML(html);
            $('#data').text(h);
            $('#wtf').html($(h).find('#link').text());

edited Nov 15, 2013 at 18:36

answered Nov 15, 2013 at 18:25

Rizwan Mumtaz

3,9952 gold badges32 silver badges31 bronze badges

1 Comment

Stephen Collins Over a year ago

This returns an array of elements. I need a jQuery object that I can use selectors on. (your fiddle returns null)

dave · Accepted Answer · 2013-11-15 18:28:45Z

2

Why don't you just use the load method?

$( "#wtf" ).load( "/echo/html #link" );

Or, here's your fiddle fixed and working:

http://jsfiddle.net/hcrM8/4/

edited Nov 15, 2013 at 18:28

answered Nov 15, 2013 at 18:11

dave

65.1k6 gold badges81 silver badges98 bronze badges

1 Comment

Stephen Collins Over a year ago

Because that's not what I'm doing in my project. I'm reaching out to grab a page, pull some data from it, then throwing it away.

wmwmwm · Accepted Answer · 2016-05-27 13:42:19Z

1

I had the same problem and i fixed encapsulating requested html code into just one container element.

Bad Example:

<a href="link">Linkname</a>
<p>Hello world</p>

Jquery couldnt convert this to element, because it wishes to convert a single element tree. But those are not having a container. Following example should work:

Right Example:

<div>
    <a href="link">Linkname</a>
    <p>Hello world</p>
</div>

answered May 27, 2016 at 13:42

wmwmwm

1014 bronze badges

Comments

RiZKiT · Accepted Answer · 2018-01-12 14:42:49Z

1

All answers do not point to the real problem, jQuery seems to ignore the head and body tag and creates an array of nodes. What you normally want is, extract the body and parse it.

Take a look at this helpful answer, I do not want to copy his work: https://stackoverflow.com/a/12848798/2590616.

answered Jan 12, 2018 at 14:42

RiZKiT

2,60935 silver badges29 bronze badges

Comments

Hkachhia · Accepted Answer · 2016-09-26 08:24:50Z

0

I am facing the same problem, and it is not because you are doing something wrong.

it's because the "link" tag is not supposed to have any innerHTML returned, it's explicitly excluded in jquery, you will find some where this line:

rnoInnerhtml = /<(?:script|style|link)/i,

This tag in HTML is supposed to link to external style sheet.

edited Sep 26, 2016 at 8:24

Hkachhia

4,5478 gold badges44 silver badges79 bronze badges

answered Dec 2, 2014 at 15:54

ZMs

91 bronze badge

1 Comment

Travis Bemrose Over a year ago

He's not getting the link tag. He's getting the a tag with id: #link.

Collectives™ on Stack Overflow

Parsing returned HTML from jQuery AJAX request

7 Answers 7

5 Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related