Why is this jquery not loading content via AJAX in IE8?

Question

IE has astounded me again with it's amazing browser capabilities. This time assuring a lovely error in the jQuery.min file (google CDN) thus somehow causing my jquery not to load content via AJAX.

Here's the link: http://themes.thefinishedbox.com/portfolio/

Click on the top links in any other browser before testing in IE you'll see that they load external pages into an appended div via jQuery.

I noticed in IE8 it seems to get to get as far as the loader icon and doesn't load the page. I've alerted the $href variable and that seems to be the corrent URL. Not sure what is going on here?

Here's the source if that helps or you can just look at it RAW: http://themes.thefinishedbox.com/portfolio/wp-content/themes/portfolio/js/custom.js?ver=3.1 (you'll want to look at the second $(function()

$(function() {
    $('#navigation ul > li a').each(function() {

        $(this).click(function(e) {

            $('*').removeClass('active');

            $.ajaxSetup ({  
                cache: false  
            });

            var $this = $(this);

            e.preventDefault();

            var $url = $(this).attr('href'); 

            var $loader = '<div id="whiteLoader" />';

            if($('#page').length === 0) {

                $('<div id="page" />').insertAfter('#header');

                $('#page').queue(function() {
                    $(this).animate({height: '120px'}, 300);
                    $(this).html($loader);
                    $(this).animate({backgroundColor: '#fff'}, 300);
                    $(this).dequeue();                    
                });

                $('#page').queue(function() {
                    $('#page').load($url + ' #pageEntry', function() {
                        var $height = $('#pageEntry').height();
                        var $h = $height + 70;
                        $(this).animate({height: $h + 'px'}, 600, function() {
                            $(this).css({height: 'auto'});
                            $this.addClass('active');
                        });
                    });
                    $(this).dequeue();
                });

            } 

            if($('#page').length == 1 && $('#pageEntry').length == 1) {

                $('#page').slideUp(function() {

                    $(this).remove();
                    $this.removeClass('active');

                    $('<div id="page" />').insertAfter('#header');

                    $('#page').queue(function() {
                        $(this).animate({height: '120px'}, 300);
                        $(this).html($loader);
                        $(this).animate({backgroundColor: '#fff'}, 300);
                        $(this).dequeue();                    
                    });

                    $('#page').queue(function() {
                        $('#page').load($url + ' #pageEntry', function() {
                            var $height = $('#pageEntry').height();
                            var $h = $height + 70;
                            $(this).animate({height: $h + 'px'}, 600, function() {
                                $this.addClass('active');
                            });
                        });
                        $(this).dequeue();
                    });

                });
            }

            $('.closex').live('click', function() {
                $(this).parent().parent().slideUp(function() {
                    $(this).remove();
                    $('*').removeClass('active');
                });
            });

        });

    });
});

Any help would be massively appreciated!

Does the same problem occur if you create divs like this instead? `$('
')` — Matt Ball, Apr 07 '11 at 21:15
Can't reproduce the error; it's working in my copy of IE8. :-/ — stealthyninja, Apr 07 '11 at 21:16
@Matt Don't believe that should make any difference, especially since the white loader div loaded. @stealthyninja - what OS are you on? — daryl, Apr 07 '11 at 21:44

score 2 · Accepted Answer · answered Apr 07 '11 at 22:10

2

The problem is that you are trying to animate the background color

$(this).animate({backgroundColor: '#fff'}, 300);

This is not supported, unless you include the jQuery UI (which implements this functionality).

Thus you are passing invalid input and it causes IE to choke.

Read bug http://bugs.jquery.com/ticket/7256 for more info..

Including a reference to the jquery UI script fixes it (tested) or commenting that line out (since the background is already white).

answered Apr 07 '11 at 22:10

Gabriele Petrioli

191,379
34
261
317

Yeah someone just solved this on forrst for me! I'll mark you as correct, thanks for the bug link. I'm aware you need jquery UI but didnt think it would have any affect. I wanted a redundant timeout function, maybe I should have just gone with setTimeout. Thanks. – daryl Apr 07 '11 at 22:19

score 0 · Answer 2 · answered Apr 07 '11 at 21:17

0

Have you tried upgrading to the latest version of jquery? The current version is 1.5.2 and it looks like you're using 1.4.2.

answered Apr 07 '11 at 21:17

Anne Porosoff

1,931
16
18

I was actually using 1.5.2, I tried downgrading, thanks for your response, though thats not really an answer. – daryl Apr 07 '11 at 21:41

Why is this jquery not loading content via AJAX in IE8?

2 Answers2