javascript - 'style' is null or not an object - Stack Overflow

Im having some issues with datatables and internet explorer 8 ( Could also be other browsers, but works in IE9). I have spent some time trying to find out what the issue is and i have been unable, but i have figured out what javascript that seems to trigger it:

If i remove this code then it works in IE 8, can someone point out the error in my ways ?

"aoColumns": [
    { "sType": "string" },                       // Player name
    { "sType": "numeric-minus" },                       // Damage done
    { "sType": "numeric-ma", "bVisible": false },    // DPS real
    { "sType": "numeric-ma" },                       // DPS Avg
    {"sType": "numeric-minus" },                        // Damage taken
    {"sType": "numeric-minus" },                        // Healing done
    {"sType": "numeric-ma", "bVisible": false },    // healing done HPS
    {"sType": "numeric-ma" },    // healing done HPS Avg
    { "sType": "numeric-ma" },                       // Overhealing
    { "sType": "numeric-ma" },                       // Healing taken
    { "sType": "numeric-ma", "bVisible": false },    // Mana done
    { "sType": "numeric-ma", "bVisible": false },    // Stamina done
    {"sType": "string", "bVisible": false },            // Class
    {"sType": "percent" },                              // Activity
],

Error details from IE 8
Webpage error details

User Agent: Mozilla/4.0 (patible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
Timestamp: Thu, 28 Jul 2011 09:59:45 UTC    

Message: 'style' is null or not an object
Line: 5585
Char: 7
Code: 0
media/js/jquery.dataTables.js

Lines from datatable around error ( Error line has ment behind it ).

Function: _fnGetUniqueThs Purpose: Get an array of unique th elements, one for each column
Returns: array node:aReturn - list of unique ths
Inputs: object:oSettings - dataTables settings object
node:nHeader - automatically detect the layout from this node - optional
array object:aLayout - thead/tfoot layout from _fnDetectHeader - optional

var nThs = _fnGetUniqueThs( oSettings, nTheadClone );
iCorrector = 0;
for ( i=0 ; i<iColums ; i++ )
{
    var oColumn = oSettings.aoColumns[i];
    if ( oColumn.bVisible && oColumn.sWidthOrig !== null && oColumn.sWidthOrig !== "" )
    {
        nThs[i-iCorrector].style.width = _fnStringToCss( oColumn.sWidthOrig );
    }
    else if ( oColumn.bVisible )
    {
        nThs[i-iCorrector].style.width = ""; // This is the error line
    }
    else
    {
        iCorrector++;
    }
}

Im having some issues with datatables and internet explorer 8 ( Could also be other browsers, but works in IE9). I have spent some time trying to find out what the issue is and i have been unable, but i have figured out what javascript that seems to trigger it:

If i remove this code then it works in IE 8, can someone point out the error in my ways ?

"aoColumns": [
    { "sType": "string" },                       // Player name
    { "sType": "numeric-minus" },                       // Damage done
    { "sType": "numeric-ma", "bVisible": false },    // DPS real
    { "sType": "numeric-ma" },                       // DPS Avg
    {"sType": "numeric-minus" },                        // Damage taken
    {"sType": "numeric-minus" },                        // Healing done
    {"sType": "numeric-ma", "bVisible": false },    // healing done HPS
    {"sType": "numeric-ma" },    // healing done HPS Avg
    { "sType": "numeric-ma" },                       // Overhealing
    { "sType": "numeric-ma" },                       // Healing taken
    { "sType": "numeric-ma", "bVisible": false },    // Mana done
    { "sType": "numeric-ma", "bVisible": false },    // Stamina done
    {"sType": "string", "bVisible": false },            // Class
    {"sType": "percent" },                              // Activity
],

Error details from IE 8
Webpage error details

User Agent: Mozilla/4.0 (patible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
Timestamp: Thu, 28 Jul 2011 09:59:45 UTC    

Message: 'style' is null or not an object
Line: 5585
Char: 7
Code: 0
media/js/jquery.dataTables.js

Lines from datatable around error ( Error line has ment behind it ).

Function: _fnGetUniqueThs Purpose: Get an array of unique th elements, one for each column
Returns: array node:aReturn - list of unique ths
Inputs: object:oSettings - dataTables settings object
node:nHeader - automatically detect the layout from this node - optional
array object:aLayout - thead/tfoot layout from _fnDetectHeader - optional

var nThs = _fnGetUniqueThs( oSettings, nTheadClone );
iCorrector = 0;
for ( i=0 ; i<iColums ; i++ )
{
    var oColumn = oSettings.aoColumns[i];
    if ( oColumn.bVisible && oColumn.sWidthOrig !== null && oColumn.sWidthOrig !== "" )
    {
        nThs[i-iCorrector].style.width = _fnStringToCss( oColumn.sWidthOrig );
    }
    else if ( oColumn.bVisible )
    {
        nThs[i-iCorrector].style.width = ""; // This is the error line
    }
    else
    {
        iCorrector++;
    }
}

• javascript
• datatables

Share Improve this question Follow edited Oct 7, 2013 at 21:53 madth3 7,3441212 gold badges5252 silver badges7474 bronze badges asked Jul 28, 2011 at 10:09 EKSEKS 5,62377 gold badges4747 silver badges6262 bronze badges 7

• Can you post here line 5585 in the file media/js/jquery.dataTables.js? – Shadow Wizzard Commented Jul 28, 2011 at 10:13
• Error seems releated to width, i have automatic width ( IE i dont spesify width of colums – EKS Commented Jul 28, 2011 at 10:20
• Added definition of nThs – EKS Commented Jul 28, 2011 at 10:23
• @EKS: What does the function _fnGetUniqueThs return? – Shef Commented Jul 28, 2011 at 10:34
• 3 Remove the trailing ma: [1,2,].length // Firefox: 2 | IE: 3 – Saxoier Commented Jul 28, 2011 at 10:56

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 9

The problem is most likely your last object in the aoColumns array:

    {"sType": "percent" },   
],

You've left the ma on the last entry. I made the same error and it worked happily with Firefox at least, but not IE 8.

Using this code fixed the problem for me, il leave the question open perhaps somone knows why it works with this change.

"aoColumns": [
    { "sType": "string", "sWidth": "auto" },                       // Player name
    {"sType": "numeric-minus", "sWidth": "auto" },                       // Damage done
    {"sType": "numeric-ma", "bVisible": false, "sWidth": "auto" },    // DPS real
    {"sType": "numeric-ma", "sWidth": "auto" },                       // DPS Avg
    {"sType": "numeric-minus", "sWidth": "auto" },                        // Damage taken
    {"sType": "numeric-minus", "sWidth": "auto" },                        // Healing done
    {"sType": "numeric-ma", "bVisible": false, "sWidth": "auto" },    // healing done HPS
    {"sType": "numeric-ma", "sWidth": "auto" },    // healing done HPS Avg
    {"sType": "numeric-ma", "sWidth": "auto" },                       // Overhealing
    {"sType": "numeric-ma", "sWidth": "auto" },                       // Healing taken
    {"sType": "numeric-ma", "bVisible": false, "sWidth": "auto" },    // Mana done
    {"sType": "numeric-ma", "bVisible": false, "sWidth": "auto" },    // Stamina done
    {"sType": "string", "bVisible": false, "sWidth": "auto" },            // Class
    {"sType": "percent", "sWidth": "auto" }                              // Activity
],

in my case using width="100%" in table caused the problem, removing width solved it.

working code

<table id="dt_table">
<thead>
<tr>
    <th>column1</th>
    <th>column2</th>
    <th>column3</th>
    <th>column4</th>
    <th>column5</th>
    <th>column6</th>
</tr>
</thead>
</table>