ansaurus

Question

jQuery: Traversing AJAX response in Chrome/Safari

Answer 1

+1 A:

I think this has to do with how jQuery processes HTML strings and creates DOM nodes from them. Amongst a bunch of other things, jQuery will create a temporary <div> and set its innerHTML to whatever HTML you pass to $(...) thus producing a bunch of DOM nodes which can be extracted from the <div> and handed back to you as a jQuery collection.

The problem, I believe, occurs because of the <html>, <head> and <body> elements, all of which don't respond well to being appended to a <div> element. Browsers tend to behave differently, -- some appear to ignore these top-level elements and just hand you back their contents -- others completely ignore the elements, and won't even give you their descendants.

It seems, the way to avoid this cross-browser issue is to simply replace the troublesome elements with some other fake elements before parsing. E.g.

$(
    // replace <html> with <foohtml> .. etc.
    data.replace(/<(\/?)(head|html|body)(?=\s|>)/g, '<foo$1$2')
).filter("link, script, title").each(function(i) {
    console.log($(this));
    // do your stuff
});

Also, I don't think filter will be sufficient, since it won't target descendent elements. This may be a better approach:

$(
    // replace <html> with <foohtml> .. etc.
    data.replace(/<(\/?)(head|html|body)(?=\s|>)/g, '<foo$1$2')
).find('link,script,title').andSelf().filter("link,script,title").each(function(i) {
    console.log($(this));
    // do your stuff
});

J-P 2010-06-16 11:23:20

Thank you so much!I would've never guess that this was the source of the problem, your solution works great!Thank you for your suggestion as well!much appreciated

jitzo 2010-06-16 11:48:31

ansaurus

tags:

views:

answers:

jQuery: Traversing AJAX response in Chrome/Safari

related questions