Problems with pager in IE8

[TheSin-]

I have the current git truck as of 5 minutes ago, the pager display doesn't show, and when I try to change the value of results per page I get

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
Timestamp: Wed, 14 Nov 2012 23:35:06 UTC

Message: 'length' is null or not an object
Line: 282
Char: 4
Code: 0
URI: http://192.168.1.87/tablesorter/addons/pager/jquery.tablesorter.pager.js

Before updating I couldn't even get the pager to load, so there is progress but wanted to list this, again it works in other browsers, just an IE mess.

[Mottie]

What settings are you using?

I tested the main pager demo in IE7 & IE8 without any problems.

[TheSin-]

man I'm having issues I just flushed my cache on safari and now I'm seeing

TypeError: Attempted to assign to readonly property.
line 417 of the pager plugin

this is in safari now :\

anyhow here is my config setup it is very complex (so I'm going to just post the simple version of it) and I might need to turn off my custom plugin to make sure it's not the culprit here. I'm just on my way home from work but I'll look deeper once I'm home.

$(document).ready(function() {
$('#table').tablesorter({
widgets: ['zebra', 'columns', 'stickyHeaders', 'filter'],
sortList: [[9,0], [2,0]]
});
$('#table').tablesorterPager({
container: $('#pager'),
size: 200
});
});

[TheSin-]

okay I decided to try first, and it's not my plugin, I disabled it and no change I think disabled the pager and left mine and mine gets the same error, likely since I copied the construct setup from the pager in mine.

so basically line 417 is

c = config.pager = $.extend( {}, $.tablesorterPager.defaults, settings ),

so it's not liking this for some reason since the changes to the main files. Not sure if this helps at all, I'm going to keep looking but I'm still not 100% familiar with the code base.

[TheSin-]

changing

c = config.pager = $.extend( {}, $.tablesorterPager.defaults, settings ),

to

c = $.extend( {}, $.tablesorterPager.defaults, settings ),

Fixed it, I'm still testing to see if there is other fallout from it.

nvm this really breaks things, but obviously it thinks config.pager is RO or config at least.

[Mottie]

Not sure why that change made any difference. Just make sure table.config.pager contains all of the pager options.... add another line config.pager = c;.

[TheSin-]

changing

c = config.pager = $.extend( {}, $.tablesorterPager.defaults, settings ),

to

c = $.extend( {}, $.tablesorterPager.defaults, settings ),
config.pager = c,

then gives the same error for

config.pager = c,

so it's config it thinks is RO for sure.

[Mottie]

Does the main pager demo work for you in IE8?

[TheSin-]

not sure I have to start parallels to test with IE8, but it does work with safari which is where I'm getting the current RO errors from. Once I have it working on Safari again I'll test with IE.

I just grabbed the files again fresh from git and still the same errors.

in your demo you aren't loading the metadata js at all, so I assume that can't be the issue here?

[Mottie]

Nope, honestly I don't use metadata plugin anymore. You can do everything you need with class names or data-attributes.

[TheSin-]

well that is great I'm going to drop it form my list too then, but still can't figure my issue :\ I'll keep playing and report back.

[TheSin-]

okay the example-pager.html works locally without issues, so obviously it must be my problem, I'll figure it out and stop cluttering up here, I'll reply here once I can test to original issue.

[TheSin-]

in firefox i'm seeing

Timestamp: 2012-11-14 7:49:21 PM
Error: TypeError: config is undefined
Source File: http://localhost/tablesorter/addons/pager/jquery.tablesorter.pager.js
Line: 417

any ideas? There is nothing special about the config really I'm so at a loss right now :\

$(document).ready(function() {
$('#table').tablesorter({
widgets: ['zebra', 'columns', 'stickyHeaders', 'filter'],
sortList: [[9,0], [2,0]],
});
$('#table').tablesorterPager({
container: $('#pager'),
size: 200,
});
});

[TheSin-]

okay I backed up my git on my tablesorter plugin back to this morning and everything works again. So it has to be table sorter, it's the exact same html code on the page only diff is tablesorter is back to 2.4.5 + that one sticky header change and it all works.

[ghost]

this.config is undefined with the newest 2.4.7 - whereas it returns an object in the older version.

[TheSin-]

I found the issue in the new 2.4.7, it's in widgets, if I remove widgets it works.

I'm going to send you my example. I'm not sure if I can attach it here, do you have an email I can send a zip to?

[TheSin-]

Actually just add the widgets js to example-pager.html will do it.

under

<script src="../js/jquery.tablesorter.js"></script>

add

<script src="../js/jquery.tablesorter.widgets.js"></script>

and bam, you get that error.

EDIT

hmm not that easy as it turns out ;)

I'll go back to sending you my example ;)

[TheSin-]

okay more testing I'm not sure 100% yet if it's also how I'm loading things using

$(document).ready(function() {

but WORKS
widgets: ['zebra', 'columns', 'filter']

DOES NOT WORK
widgets: ['zebra', 'columns', 'stickyHeaders', 'filter']

So just tested, and it only breaks with 'stickyHeaders' and only is you are loading the config with $(document).ready(function() {

So

WORKS

$(document).ready(function() {
        $('table').tablesorter({
                theme: 'blue',
                widthFixed: true,
                sortList: [[0,0], [2,0]],
                widgets: ['zebra', 'columns', 'filter']
        });
        $('table').tablesorterPager({
                container: $('.pager'),
                size: 10
        });
});

DOES NOT WORK

$(document).ready(function() {
        $('table').tablesorter({
                theme: 'blue',
                widthFixed: true,
                sortList: [[0,0], [2,0]],
                widgets: ['zebra', 'columns', 'stickyHeaders', 'filter']
        });
        $('table').tablesorterPager({
                container: $('.pager'),
                size: 10
        });
});

[TheSin-]

Mottie I just sent you my working copy via email so you can test and see this issue yourself.

[Mottie]

Ok, this is what you need to do

$(document).ready(function() {
    $('table')
        .tablesorter({
                theme: 'blue',
                widthFixed: true,
                sortList: [[0,0], [2,0]],
                widgets: ['zebra', 'columns', 'stickyHeaders', 'filter']
        })
        .tablesorterPager({
                container: $('.pager'),
                size: 10
        });
});

The reason you're having problems is because the stickyHeaders widget now adds a new table before the table instead of adding a second thead within the current table. So when you initialize the pager using $('table') it is finding the sticky header table.

[TheSin-]

okay thanks I'll test this and let you know right away

[TheSin-]

perfect that fixed it for me. I'll make note of that.

Now to test on IE again, and fix my plugin that now breaks with stickyHeaders since it's not part of the same table anymore ;)

So I'll get this issue back on topic now.

wow this new stickyHeader is a real PITA now :( I really hope the benefit was worth it.

[TheSin-]

2.4.7 fixed this issue in ie7, thank you.

Now to figure out these new stickyHeaders that broke everything I did and for some reason won't listen to

$('tr td:nth-child(' + (colNum + 1) + ')', table).hide();

since it's a copy of the table and has the same id= table should do both :\ but it doesn't and I assume it's an other rendering order again of some sort, like the .change() is taking a snap shot of before the stickyHeaders exist of something :\ Anyhow thanks again for all the work and fixes!

[Mottie]

DOh I thought I made it remove the id from the cloned table.

Honestly, I liked the last sticky header method. I only changed it because of IE7/8.

[TheSin-]

ahhh stupid IE

I'm not upset it's keeping the id, I prefer it, but for some reason even though they both have the same id I can't use

$('#table tr th:nth-child(1)').hide();

the stickyHeader just won't respond at all, I'm even doing this manually ATM for testing and I can NOT get a th in the clone to hide at all :\

[TheSin-]

got it working, not what I was hoping for at all, but it works :\

BTW did you see my columnSelector addon I sent you? That is what I was just fixing if you want the fixed version let me know.

[ghost]

What exactly is different from that snippet you posted Mottie, as I can't get this to work in safari either.

[Mottie]

@wesleyh The table selector $('table') was used twice. The second initialization returns two tables because the first one is cloned. I just chained the tablesorter and tablesorterPager initializations.

@TheSin- I didn't get a chance to look at that addon, what does it do and is there a demo somewhere?

[ghost]

Well in my case I have a selector with an #id_table, so that should only return once and I still get this error.

[ghost]

Never mind, I see that you just released a new version to fix this. It works now. Only 1 issue is that the sticky header has now shifted 1 or 2 pixels to the left. Any idea what that could be about? Didn't happen with the previous version.

[ghost]

Here's an image btw: http://i48.tinypic.com/291zx2h.png -- with sorting and pager turned on. Sometimes going to the next page triggers another shift, or sorting.

[ghost]

Actually you can probably ignore this, some CSS wasn't reloaded yet.