jQuery find() returns null in only IE

Question

I'm attempting to load content from another page using jQuery .post(), to parse the returned html to pull out only the pieces that I want.

The problem is that, while this works in Firefox et al, it does not work in IE.

I've tracked down the problem to the find() function. Both IE and FF successfully load the html from the other page (which is stored in that "data" object) using post. However, while the line

debugText += jq(data).find('#timeline_events').html();

produces output in Firefox, it produces null in IE.

I've done extensive research, and as far as I can tell, it might either be because of jquery conflicts, or because the page it's loading is xhtml.

In the first case, it's for that reason that I use var jq=jQuery.noConflict(), and use "jq" instead of "$" with all jquery calls. In the second case, I've tried declaring the post return data type explicitly to both html and xml, with no change in result.

Any ideas?

<script type="text/javascript" charset="utf-8"> 
var jq=jQuery.noConflict();
var debugText = ""; 
function loadNext() 
{ 
    jq.post("test.html", function(data) 
    {
        debugText += jq(data).find('#myEvents').html();
    }
}
</script>

Update: Here is a sample of some html from the test page that I want to load onto the current page:

<table id="myEvents">
    <tbody>
        <tr>
            <td>Test</td>
        </tr>
    </tbody>
</table>

What I'll eventually want to do is pull out the td elements from that table and insert them into another table on my current page.

-Update- jQuery version I'm using: 1.2.3

Loading the data into a hidden object in the document, and then using jquery to select the necessary id element produces the same result - that is, null in IE, and works otherwise.

Is your markup well formed in the response data? That creates a problem in IE sometimes. — ShankarSangoli, Aug 22 '11 at 19:13
@Shankar: Yes, it is well formed. I did extensive checking on this. — erj, Aug 22 '11 at 19:17
What Content-Type are you [sending back the response as](http://stackoverflow.com/questions/562283/jquery-find-doesnt-return-data-in-ie-but-does-in-firefox-and-chrome)? — Matt Gibson, Aug 22 '11 at 19:24
What I find interest is that `find` is returning an apparently valid (if empty) jQuery object. First, check the *length* of that object -- it's probably zero, but if it isn't, you can explore that. If it is empty, try finding 'table', see what happens there. BTW, I don't thing that bit about .noConflict returning the jQuery object itself is documented, or useful. Just use jQuery by name. — Michael Lorton, Aug 22 '11 at 19:24
@Malvolio: It returns a null object (the object exists, it's just empty). It does this ONLY in IE. — erj, Aug 22 '11 at 19:36
*All* finds fail (looking for 'table', for 'td', &c) or just finding by id? If the former, I would look at the value of jQuery(data) -- if it is empty, it think *your* definition of well-formed and IE's definition might be different. Maybe you need a entry at the beginning? — Michael Lorton, Aug 22 '11 at 19:40
jQuery 1.2.3? Goodness. Have you tried anything more recent, even if it's only temporarily? — Matt Gibson, Aug 22 '11 at 19:44
Hah, yeah, it was the version of jq. Now, to get the 3rd party to update their jquery... — erj, Aug 22 '11 at 19:59
Thanks, everyone, for your help. Upgraded the jQuery to the latest version, and it works fine now. — erj, Aug 22 '11 at 20:01

score 2 · Answer 1 · answered Aug 22 '11 at 19:19

2

IE is very particular with what it "loads" into the DOM. If your content isn't well formed you would get this exact behavior. I had this same problem and it turned out to be that the element in question had a parent that wasn't properly closed.

answered Aug 22 '11 at 19:19

kasdega

18,396
12
45
89

I've checked and verified that the content is well formed. – erj Aug 22 '11 at 19:34
Addendum - I've checked and verified that MY code is well formed. However, it's a page inside a 3rd party CMS that gets a lot of html automatically loaded in. It's possible that some of that might be malformed. If that's the case, is there a workaround? Or will I have to write my own code parser to pull out the stuff I need? – erj Aug 22 '11 at 19:41

score 0 · Answer 2 · answered Aug 22 '11 at 19:17

0

My guess is that jQuery is parsing the response like it parses XML, which means find, filter, and a number of other methods are broken for some reason in IE.

Try jq('[id=timeline_events]', data)

.html() might also not work; you may need .text().

A better solution might just be to add the response to the page and parse it there.

function(data){
    var $container = $('<div style="display:none">');
    $('body').append($container);
    $container.html( data );
    var html = $container.find('#timeline_events").html();
    $container.remove();
}

answered Aug 22 '11 at 19:17

Stefan Kendall

66,414
68
253
406

1

I tried this - it still returns null in IE, even though it's now searching the html that's been embedded on the page. Now THAT is weird. One thing, though, is that the html that I'm importing has head, body, etc tags, so that might cause problems when appended onto the page... – erj Aug 22 '11 at 19:34
Yeah, you're right, it probably will. Can you substring from the first to the last and put *that* on the page? – Stefan Kendall Aug 22 '11 at 19:42
Also try just selecting `$('#timeline_events')` instead of using `find` with an id. – Stefan Kendall Aug 22 '11 at 19:43
Yes, though, if I'm doing that, I might as well just substring out the stuff I want directly from the data object, since it's just a long text string :) – erj Aug 22 '11 at 19:43
Depends. You might get into 'parsing-html-with-regex' hell pretty quickly if you get too complicated with the substring, and then Joel Spolsky will personally strike you down. – Stefan Kendall Aug 22 '11 at 20:38

jQuery find() returns null in only IE

2 Answers2