IE8 is returning NULL when selecting from jQuery + AJAX request

Question

I have no idea why this is happening. First off, the code is valid via W3C validator as HTML5 EXCEPT for URL encoding issues (like & should be & amp;) but i don't have control over that and that shouldn't cause this error anyways.

Second, this works in all other browsers.

Third, the "data" element you'll see in the JS below returns the HTML from the requested page fine.

$('.calendarWrap .dayEvents li:not(.prevMonth) a').click(function(e){
            the_url = $(this).attr('href');
            $.get($(this).attr('href'),function(data){
                $('#calendar-bubble').remove();
                $('body').prepend('<div style="display:none;left:'+(e.pageX)+'px;top:'+e.pageY+'px;" id="calendar-bubble">'+$('#main-content',data).html()+'<p class="details"><a href="'+the_url+'">View event details &gt;</a></p></div>').find('#calendar-bubble').fadeIn(150);
                $cb = $('#calendar-bubble');
                if($(window).width()-($cb.outerWidth()+$cb.offset().left) < 0){
                    $cb.css({left:(e.pageX-$cb.outerWidth())+'px'});
                }
                if($(window).height()-($cb.outerHeight()+$cb.offset().top-$(window).scrollTop()) < 0){
                    $cb.css({top:(e.pageY-$cb.outerHeight())+'px'});
                }
            });
            return false;
        });

Lastly, here is the HTML for the requested page: http://pastebin.com/DZE79xiA

I'm out of ideas...

Does anyone know of any alternative ways to get the data like this and parse through it and only grab #main-content?

Answer 1

Finally, after about a week of fighting this i found out it's because of HTML5 elements. I ended up having to use: http://jdbartlett.github.com/innershiv/ and all worked after that.

Answer 2

What you've pasted seems to be correct. If I understand your problem right you could try

var content = $(data).find('#main-content')

instead of

$('#main-content',data)