Not sure why this isnt loading content via AJAX in IE?

Creating this simple AJAX Based WordPress theme and Ive created a custom lightbox for it. All is going well but the dreaded IE has now set into play.

For some reason the content isn’t loading in IE (only tested IE8).

Read More

First off, here’s the link to the theme thus far: http://themes.thefinishedbox.com/portfolio/ bare in mind it’s still in early stages so will look even worse in IE anyway.

Click the bottom right icon on the image hover.

The class .postExpand contains the permalink to the post, while the ID #postEntry is what I load via AJAX.

Here’s the jQuery for it, if you want a better look you can see the raw file here: http://themes.thefinishedbox.com/portfolio/wp-content/themes/portfolio/js/custom.js

$(function() {
    $('.postExpand').click(function(e) {

        e.preventDefault();

        $.ajaxSetup ({  
            cache: false  
        });

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

        var loader = "<div id='loader'></div>"; 
        var loadurl = href + ' #postEntry';

        $('body').prepend('<div id="overlay" />');
        $('#overlay').animate({opacity: 0.8}, 400);

        $('body').prepend('<div id="lightBox" />');

        $('#lightBox').html(loader).load(loadurl, function() {
            $('#postContent').jScrollPane();
            $(this).css({backgroundColor: '#fff'});
        });

        $('#closeBox > div').live('click', function() {
            $('body #lightBox').remove();
            $('body #overlay').animate({opacity: 0}, 400, function() {
                $(this).remove();
            });
        });

        $('body #overlay').mouseup(function() {
            $('body #lightBox').remove();
            $(this).animate({opacity: 0}, 400, function() {
                $(this).remove();
            });
        });

    });
});

I believe the problem lies with the var loadurl as I can change that to 'http://themes.thefinishedbox.com/portfolio/' and it will load.

Anyone have any ideas what the problem may be?

EDIT

This doesn’t work either:

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

Related posts

Leave a Reply

2 comments

  1. Problem was the permalink structure, possibly a bug with WordPress 3.1 in IE.

    It was display /category/ in IE when it shouldn’t. Since the theme doesn’t require categories I stripped the permalink structure to just /%POSTNAME%/ and it resolved the issue.