2.11.1 tablesorter does not work with IE 8

[phubie]

Hello, just installed the latest version of tablesorter (thanks for tablepager fix btw) and am getting this error in IE 8:

Unknown runtime error
jquery.tablesorter.js, line 419 character 6

this.innerHTML = '<div class="tablesorter-header-inner">' + t + '</div>'; // faster than wrapInner

[Mottie]

HI @phubie!

I can only test it in IE10 in compatibility mode and I'm not seeing any problems. Is this problem happening on the main demo page? If not, please share the tablesorter initialization code being used.

[Mottie]

It looks like the problem is in the search function... it's reinitializing tablesorter after each search, instead of doing that, trigger an update: $('#myTable').trigger('update');

[phubie]

Where exactly would I put the trigger?

[Mottie]

Replace the $('#myTable').tablesorter();... then move that initialization outside of the search function, anywhere, but only run it once.

[phubie]

Sorting does not work on FF, Chrome, IE 8+ when $('#myTable').tablesorter(); is moved outside of the search function.

[Mottie]

Is the above code wrapped inside of a document ready function?

$(function(){
    $('#myTable').tablesorter();
});

If that doesn't fix the problem, then I think seeing more code or a demo would help me troubleshoot the problem.

[phubie]

Changed line 419 of jquery.tablesorter.js from:

this.innerHTML = '<div class="tablesorter-header-inner">' + t + '</div>';

to:

this.HTML = '<div class="tablesorter-header-inner">' + t + '</div>';

Left my code as is. Both sorting and paging works on all browsers now.

[TheSin-]

or better yet

$(this).html('<div class="tablesorter-header-inner">' + t + '</div>');

to keep it jquery?

[phubie]

That works too. Thanks fellas!

[Mottie]

I kept it as innerHTML mostly because of how slow jQuery v1.2.6 is in older versions of IE (ref)

Maybe there is something I'm missing, but I've never hear of this.HTML = '...';

[TheSin-]

I thought v2.11 of tablesorter was jquery 1.4+ ??

[Mottie]

Just some of the widgets require jQuery 1.4+... last time I checked the core should work in v1.2.6.

[TheSin-]

ahh okay, then I agree with keeping innerHTML, as for HTML I have not heard of that either, maybe browser specific? At that point in the code what is this? like what block type? Maybe if specific to tables? Either way I have never heard of it or used it, and innerHTML likely isn't the issue I'd think.

though if it was me and we weren't locked to such a low version of jQuery. I'd use this not that I think about it.

$(this).wrapInner('<div class="tablesorter-header-inner"></div>');

oh wait this is jQuery 1.2 compat

http://api.jquery.com/wrapInner/

maybe try that Mottie?

[Mottie]

wrapInner is even slower... I have a comment on that line stating that:

this.innerHTML = '<div class="tablesorter-header-inner">' + t + '</div>'; // faster than wrapInner

I guess it's all relative... I changed it to innerHTML because of an issue someone had when they had something like 1000 header cells shrug.

[TheSin-]

and to me either is fine honestly, just depends on how you want to handle your projects, I've been on projects that want you to use the framework 100% and then send slow bugs upstream. In this case you didn't want to rely on jQuery fixing it, which also makes sense.

in the end though it still comes down to why isn't innerHTML working for phubie and wth is this.HTML =

I have been googling and I can not find any ref to this.HTML = everything I find is jQuery .html() vs innerHTML

maybe he has an other script that is defining HTML?

on a side note I can only assume that wrapInner() would use html() so it stands it's still be slower (if html() is slower then innerHTML), it's just cleaner IMHO :)

.html() will just call .innerHTML after doing some checks for nodeType's & stuff. It also
uses a try/catch block where it trys to use innerHTML first and if that fails, it'll fallback
gracefully to jQuerys .empty() + append()

sounds like using jQuery's it also safer and I assume very slightly slower I can't see these checks being all consuming personally.

[Mottie]

In version 3, I'll just use jQuery's html(). I don't know why innerHTML is causing problems for @phubie, but I think seeing more of his/her code would help.

[phubie]

To be honest, I'm not sure why this.HTML worked either. I was just playing around with the code because I was reading about issues with using innerHTML with IE 8. I'm using jQuery 1.7.1. and have decided to stick with TheSin's $(this).html() solution.

[TheSin-]

the beauty of .html() is that if their are differences that are browser specific it'll auto correct for it. That is why I'd use it. But I can see if it's causing slowness in wider tables. That being said I'd really really like to see a bench mark ever with 1000+ cols I just can't see it being much slower, at that size it'll be slow either way and I can't seeing it being very much faster. Maybe i'll setup a test at some point when I'm not a week behind at work ;)

I'd love to bench mark all three, innerHTML vs .html() vs .wrapInner()

[phubie]

Here is my search function again:

function SearchSeriesVarData(seriesID, searchTerm, searchType) {
    $.get("SeriesVariable/GetSeriesVariable/" + seriesID + "/" + searchTerm + "/" + searchType, function (data) {
        $("#divSeriesVarSearchResults").show();
        $("#divSeriesVarSearchResults").empty().append(data);

        $("#tblSeriesVarSearchResults")
        .tablesorter(
        {
            sortList: [[1, 0], [2, 0], [3, 0], [4, 0], [5, 0], [6, 0]]
        })
        .tablesorterPager({
            container: $("#pagerSeriesVar")
        });
    });
}

innerHTML worked in all browsers except for IE 8.

[TheSin-]

http://stackoverflow.com/questions/2896208/innerhtml-bug-ie8

which is why I was asking what this was at that point in the code. it seems IE8 has a block based bug with innerHTML. if it's the td I can't see it being an issue, but it seems like if it's an other block like th or something a little newer that IE8 has issues with it.

[TheSin-]

@phubie can you try innerText for me in IE8 to see?

[Mottie]

Ok, so I exaggerated a little... it was 1042 rows x 240 columns (issue #70)... maybe I will just change it to use jQuery's .html()

[TheSin-]

yeah that ticket don't really say much about html() vs innerHTML nor does it talk about IE much. I'd think many other great changes since then have made sizeable changes, like the pager running 2-3 times on larger tables etc etc. I'd still like to try and setup a test but I have a feeling it won't be too bad. if I do setup a test I'll save it to html so that we can include it in the demos and thus test other changes with it.

[phubie]

In IE 8, this.innerText displayed the entire HTML (e.g.,

Variable Name

) in the header, instead of just the header name (e.g., Variable Name).

[TheSin-]

but innerText still worked, very very odd innerHTML isn't :\

it looks like ie8 doesn't like when you start innerHTML with a div, you need to append the div then use innerHTML

http://stackoverflow.com/questions/11153083/createelement-inner-html-error-in-ie8

again I vote for letting jquery deal with this.

[Mottie]

Thanks guys!

[thezoggy]

@Mottie found this tonight while browsing: http://updates.html5rocks.com/2012/04/Big-boost-to-DOM-performance---WebKit-s-innerHTML-is-240-faster