Wrong condition in while loop

10lojzo

The code provided is taken from version of datatables /*! DataTables 1.10.1-dev, line 1443 inside function _fnInvalidateRow

The problem occured while calling datatable.fnUpdate(myString, row, columnIndex).

Correct condition should be: while ( cell.childNodes.length )...
After correction everything works fine .

// This is very frustrating, but in IE if you just write directly
// to innerHTML, and elements that are overwritten are GC'ed,
// even if there is a reference to them elsewhere
while ( cell.childNodes ) {
cell.removeChild( cell.firstChild );
}

allan

Hi,

Thanks for pointing that out! I just spotted that yesterday and have committed a fix for it. The git repo should be up to date with the fix.

Regards,
Allan

Varlick

deleted

Here is commit: https://github.com/DataTables/DataTablesSrc/commit/a5dc5115f578e205a44d204d1fa7dc8870e4c71e

10lojzo

Hi, i have another problem. After update of the data in the cell, the dynamic content of any cell in the updated row is lost. I'm creating jquery ui buttons inside cells and everything works fine until i call fnUpdate(...) or cell().data(...). It doesn't matter which cell i'm updating, the buttons in any other untouched cell of updated row stop working. They keep their appeareance and DOM but loose their jquery ui button object previously initialized.

Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'option'

I created the live.datatables.net
http://live.datatables.net/vajoxis/3/edit?html,css,js,output

allan

Both cell().data() and fnUpdate write to the innerHTML of the cell. So any hQuery events will be lost and you need to add them again.

Allan

10lojzo

but it was working with old version of datatables. Has something changed?

10lojzo

When i am updating the cell which has some buttons inside, i am recreating everything. But i don't want my other cells of the row to be messed up. That is something which was not happening before and is happening now. Update of one cell is clearing the buttons in another cell.

allan

I'll try and create some time tomorrow to look into it - but I can't promise I'll be able to do so, as there is a back log of things to look at.

Allan

10lojzo

In the example i provided there is another bug i simulated. When you add data-order attribute the datatables throw alert.

http://live.datatables.net/vajoxis/6/edit?html,css,js,console,output

allan

You've mixed DOM sourced data types with Javascript there. It can be done, but you need to use object based data.

For example, in your example, the data source created by DataTables looks like:

[
    [
        {
            "display": "Tiger Nixon",
            "@data-order": "1"
        },
        "<span class=\"age\">27</span>"
    ],
    [
        {
            "display": "New York",
            "@data-order": null
        },
        "<span class=\"age\">45</span>"
    ]
]

If you wanted to add more data to the table, it would need to be in the same format.

Allan

allan

I've just had a look at your button test case again to better understand what is going on, and I was correct in my previous assessment. Since cell().data() is writing to the innerHTML, the static event that $().button() is applying to the row is being lost. You need to run the button creation on the cell again.

Allan

10lojzo

The button problem:
I have two cells in a row. The first cell contains my button with all ui stuff being generated by ui framwork after button() call. The other cell contains just the plain text. What I'm saying is that if I modify just the plain text in the second cell with fnUpdate() or cell(), then whole row is recreated internally from cache and my button in first cell is dead. I'm not able to recreate the button because it was already created by jquery ui and the DOM was modified. I cannot recreate button on modified DOM over and over let alone the fact that i was not even updating the cell which contains the button. I just don't understand why the whole row is updated when I'm updating just one cell. Am i supposed to recreate everything in the whole row what has static javascript attached? This was not the issue in old api.

The @data-order problem:
I used the object in format you provided. There are two scenarios:
1.There is already data-order attribute in source html, in which case the new row is added correctly.

2.If i remove data-order attribute from html, then [object Object] is added to first cell in new row. It works only if the data-order attribute is in the first row of html table <td data-order="1">.

In documentation you are using two ways how to add new row. Till now i have been using the second one:

table.add( [ 'Fiona White', 32, 'Edinburgh' ] )

but that does not work with data-order attribute, as you suggested in previous post. In documentation at first place is this:

table.row.add( {
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
} ).draw();

Here i don't understand the key-value object. What is "name"? What is "position". These are the names of the columns definied in sName property? What if the table does not have sName column property defined? Where should i put @data-order attribute?

And finally you suggested this:

[
{
"display": "Tiger Nixon",
"@data-order": "1"
},
"<span class=\"age\">27</span>"
]

"Display" is the datatables keyword? Looks like but i can't find it in documentation.
How all these ways of adding new row come together?

Invalidate problem:
Two scenarios:

1. I'm adding new row to the table using this approach: table.add( [ 'Fiona White', 32, 'Edinburgh' ] ). Then I'm manually modifing the content of one of the cells. and call invalidate() as you suggest in documentation. But the modified content is replaced from cache as soon as invalidate() is called which is not what i expected.

2. I want to update the row with new data. I call fnUpdate() or cell(). Then i'm modifiing the cell content. Then i call invalidate(). Then again fnUpdate() or cell(). Now invalidate works as suggested, the modified data are not replaced from the cache. Why is invalidate() working for updating old rows and not for the newly added row?

fiddle:
http://live.datatables.net/vajoxis/7/edit?html,css,js,output