Javascript IE error: unexpected call to method or property access

Question

I have the following code and it's working (as usual) in everything but IE. It's giving me an unexpected call to method or property access in Jquery and I have no idea how to debug it. I've been using the IE developer toolbar, which is useless for this error and just gives me a line no 12 (inside the jquery script).

Any help is v much appreciated:

<script type="text/javascript">
$(document).ready(function () {

    $.history.init(pageload);

    $('a[href=' + window.location.hash + ']').addClass('selected');

    $('a[rel=ajax]').click(function () {

        var hash = this.href;
        hash = hash.replace(/^.*#/, '');
        $.history.load(hash);

        $('a[rel=ajax]').removeClass('selected');
        $(this).addClass('selected');
        $('.loading').show();

        getPage();

        return false;
    });
});

function pageload(hash) {
    if (hash) getPage();
}

function getPage() {

    hash = document.location.hash;
    hash = hash.replace(/^.*#/, '');
    var data = 'page=' + encodeURIComponent(hash);
    $.ajax({
        url: "index.php",
        type: "POST",
        data: data,
        cache: false,
        success: function (html) {
            $('.loading').hide();
            $('tbody').html(html);

        }
    });
}
</script>

Here is the history plugin: http://plugins.jquery.com/project/history

And here is the demo I have been following: http://plugins.jquery.com/project/history

Still changing window.location back to document.location doesn't seem to make a difference

I'm lost on this one. When I change the tag I'm calling to it does post so it's working, but in IE the design is all broken and the next links I click on don't post. Really strange!! Works fine in firefox, opera, etc.

Answer 1

I'm a bit surprised IE complains about it, but it's a good thing it does: You're missing a declaration in getPage for hash (e.g., put var in front of the first use).

On the others it's presumably creating an implicit global (a property of the window object called hash), which is of course a Bad Thing(tm), but as I understand it it's correct according to the specification (the relevant sections being 8.7 ["The Reference Type"] and 10.1.4 ["Scope Chain and Identifier Resolution"]).

Still surprised IE is complaining about it, though. It must have to do with the scope in which jQuery is calling your click handler.

Answer 2

IF you get this error when using HTML5 elements in IE, make sure you're using html5shim to tell IE that these are real elements.

Answer 3

It will be the:

$('tbody').html(html);

IE throws an error when you try to put certain things inside some nodes. Eg

$('<input>').append('</p>')

To fix this, add the html to a different element. For example, you could try:

$('table').html('<tbody>' + html + '</tbody>');