JQuery AJax Getting Page Fragments Find vs Filter

Question

Here's the the form the Ajax code I am testing.

$('body').on('submit','#sign-in', function(e) {
    e.preventDefault();

    var data = $(this).serialize();

    var url = $(this).attr('action');
    $.ajax({
        //this is the php file that processes the data and send mail
        url : url,
        type : "POST",
        data : data,
        dataType:"html",
        //Do not cache the page
        cache : false,
        //success
        success : function(response,status) {
            console.log($(response).filter('#dashboard'));
            console.log($(response).find('#dashboard').html());
        }
    });
});

Here is the response.

<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<body>
    <div id = "dashboard">
        <div id = "dash2">
        <h1>HELLO</h1>
        </div>
    </div>
</body>
</html>

Based from the code above upon, success jQuery filter was able to fetch the div with an id #dashboard however find return me an undefined.

Why is it working like that?

For your information, I am using JQuery 1.9

UPDATE

Using the suggestion of Bergi, I have removed the html,body and head tag of the returned html and this is the error I received.

Uncaught Error: Syntax error, unrecognized expression:
HELLO
HELLO FITCCHHH jquery-1.9.0.min.js:2

I am not quite sure? but when I alert(response) it gives me the whole html layout/structure — user962206, Feb 03 '13 at 12:50
Then it's a string, not a DOM object. You can easily check by logging it or using `typeof`. — Bergi, Feb 03 '13 at 13:00
I see, is there anyway I can translate that string to a DOM object? — user962206, Feb 03 '13 at 13:00
see possible duplicate [Parse complete html page with jquery](http://stackoverflow.com/questions/4429851/parse-complete-html-page-with-jquery) — Bergi, Feb 03 '13 at 13:08
NB:after rereading your question i'm confused why sending back as response a full html document with doctype, header body ... you're making the request from a doc that already has header, body; so why is that ? deleting my answer — mikakun, Feb 03 '13 at 13:29

score 4 · Accepted Answer · edited May 23 '17 at 11:52

4

jQuery sets your whole page as the innerHTML of a <div>, and therefore doctype, html, head and body elements are not parsed. You only get back a collection of the resulting elements, and since your #dashboard is one of these top-level elements you need to filter instead of find.

See also:

I'm not sure how to solve this, apparently there's much jQuery quirks around there. What I can think of:

try jQuery.parseXML
rely on filter getting the element in question out of the jQuery collection. Though, since browsers seem not to be consistent about what the parse you should do something like $response[$response.is("#dashboard") ? "filter" : "find"]("#dashboard")
Append the malformed collection to some element and find from there: $("<div/>").html(response).find("#dashboard")
wait for jQuery.parseHTML
do not send a whole HTML document, but only the #dashboard element you're interested in as a html string

edited May 23 '17 at 11:52

Community

1
1

answered Feb 03 '13 at 13:22

Bergi

630,263
148
957
1,375

Out of curiosity why would I use parseXML? and another thing, the dataType: "text/html", when I added to my ajax code, it stopped sending the request – user962206 Feb 03 '13 at 13:31
The XML parser would respect the ``, `` etc tags. Though your html would need to be valid XHTML, of course. Oh, and you're right, [$.ajax](http://api.jquery.com/jQuery.ajax/) does not expect real MIME types – Bergi Feb 03 '13 at 13:33
aww too bad, I am using HTML5 – user962206 Feb 03 '13 at 13:33
I've tried removing the head, html and the body tag, but it gave me an Uncaught Error: Syntax error, unrecognized expression:

HELLO

– user962206 Feb 03 '13 at 13:36
And where did that Syntax Error happen? Afaik, syntax errors are for scripts and from malformed HTML you should get a Parse Error – Bergi Feb 03 '13 at 13:38
On my debugger, I clicked that and this showed up jquery-1.9.0.min.js:2 thats where the error is coming from. I find it weird. – user962206 Feb 03 '13 at 13:43
What's the stack trace? Was it a function call from you, or something internal to ajax? – Bergi Feb 03 '13 at 13:48
That's strange, seems like it was treated as a script. What MIME type do you use? – Bergi Feb 03 '13 at 14:00
on the server side? I did not specify any, but by default it returns an html. – user962206 Feb 03 '13 at 14:09

George Filippakos · Answer 2 · 2013-02-18T13:49:11.987

If you are using jquery 1.9 , you should no-longer parse html like so:

var html = $(response);

Instead you should be using the following:

var html = $.parseHTML(response);
html = $(html).find('#dashboard').html();

From Jquery Docs 1.9: HTML strings passed to jQuery() that start with something other than a less-than character will be interpreted as a selector. Since the string usually cannot be interpreted as a selector, the most likely result will be an "invalid selector syntax" error thrown by the Sizzle selector engine. Use jQuery.parseHTML() to parse arbitrary HTML.

Adam · Answer 3 · 2014-04-03T09:05:09.250

1

You should use parseHTML as indicated above. The difference between filter and find appears to be where the element is in the returned HTML snippet. If you are looking for #foo then use .filter('#foo') if #foo is a top-level element in the returned HTML and .find('#foo') otherwise.

edited Apr 03 '14 at 09:05

answered Mar 19 '14 at 16:31

Adam

6,539
3
39
65

JQuery AJax Getting Page Fragments Find vs Filter

HELLO

3 Answers3

HELLO