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.

Solution 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.

Solution 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.

Solution 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>');

Comments

[Ke.]

ive narrowed it down to the tbody tag. Any idea why this is causing a problem? Does IE not recognise this tag? PS Thx you were right about the things you mentioned as well

[Ke.]

i did all this and this history plugin seems somewhat broken. also has problems with more than 50 chars in url, think i will have to find another way, cheers anyway :)

[T.J. Crowder]

@Ke: IE recognises the tbody tag, yes. I've just realized that you were doing $('tbody').html(html) -- do your really want to write this content to every tbody on the page? And what's the HTML you're writing to it? Persumably a series of tr elements... IE doesn't much like you mucking about with table rows via innerHTML, but I assume jQuery is handling that for you (Prototype does and I don't think jQuery is more backward in that area, but I don't know jQuery well).

[zacharydl]

Modernizr can also be used, as it contains html5shim.