update not visible (filtered) row

Boris.Tk

Hi all,

I have a function which is creating a table and another function to update the table periodically.
Everything is working as expected so far.
Now if the update function want to update a filtered row ( invisible row ) it ends up with an error:

nNode is undefined
[Break on this error] if ( nNode.nodeName == "TR" )


Obviously the function stuck while it tries to catch the row which must be updated.
It looks like that filtered data is not available to fnUpdate.
How can I update a row which is not visible?

*edit*
I thought adding some code might be helpful:

[code]
...
var rowID = oTable.fnGetPosition( jQuery('#'+SU.rid)[0] );
jQuery('#SUTable #'+SU.rid).attr('class', SU.status);
oTable.fnUpdate( [u_gstat, u_link, u_symbol, u_status], rowID, 0 );
...
[/code]

Before the functions can update the data, it needs to find out where to put the data - rowID
then I'm changing the class of the row based on the given ID (JSON)
and finally in line 4 is *magic* to update the row.
The error message I've mentioned before happens while trying to set 'rowID'.
DOM tells me oTable has only visible data and aoData has everything I'm looking for.
The fnUpdateData plug-in might be the right choice here. But how can I get the position in aoData?


Thanks!
Boris

allan

Are you using fnDelete() at all? If you do a

[code]
console.log( rowID, typeof oTable.fnSettings().aoData[ rowID ] );
console.log( oTable.fnSettings().aoData[ rowID ] );
[/code]
what do you get?

Allan

Boris.Tk

Allan,

thanks for you reply.

here is the firebug output
[code]
undefined undefined
undefined
nNode is undefined
[Break on this error] if ( nNode.nodeName == "TR" )
[/code]

here is my code narrowed down to the important stuff
[code]
...
console.log( rowID, typeof oTable.fnSettings().aoData[ rowID ] );
console.log( oTable.fnSettings().aoData[ rowID ] );
var rowID = oTable.fnGetPosition( jQuery('#'+SU.rid)[0] );
oTable.fnUpdate( [u_gstat, u_link, u_symbol, u_status], rowID, 0 );
...
[/code]

Yes, fnDelete will be used too. I guess it will come up with the same issue.
I'll try get my router to open a port to my test server.


Thanks for looking into this.
Boris

allan

Thanks for the output trace. If oTable.fnGetPosition( jQuery('#'+SU.rid)[0] ) == undefined - then either jQuery('#'+SU.rid)[0] does not exist (is that likely...?!) or the row has already been deleted.

Could it be that jQuery('#'+SU.rid)[0] is not on the current page, but rather on a different one - in which case they wouldn't be picked up with that statement. If you try:

[code]
console.log( jQuery('#'+SU.rid).length ) );
console.log( jQuery('#'+SU.rid, oTable.fnGetNodes() ).length ) );
[/code]
What does that spring up?

Allan

Boris.Tk

I'll try to explain what my application does:

I have a little GPS tracking solution for any kind of GPS devices. My application is showing their location on a Open Street Map using Open Layers. On my HTML page I have a map (div) and a table where my subscribers are shown (dataTable). The table has 4 columns - GPS icon, name, subscriber icon and a hidden column for fixed sorting (depending on status). At the top of the table I'm using the filter feature enabled.

When the page is loaded an update function is polling the subscriber locatino and status updates from a server side application. This application is returning a JSON string upon my JS code will do action on the map and in the subscriber table - update, delete and add.

Everything is working as it should. But when I use the filter on the table and my JS function needs to update a row which isn't visible because of the filter I get the error:

nNode is undefined
[Break on this error] if ( nNode.nodeName == "TR" )

Back to your question, yes in fact the row I'm looking for isn't available because it is not within the filter range (input field). When I check oTable in the DOM view of firebug it isn't there.

I went through the plug-in section on your page and found "fnUpdateData" which will certainly do what I want, but I cannot determine the row:

[code]
var rowID = oTable.fnGetPosition( jQuery('#'+SU.rid)[0] );
[/code]

This is because the TR I'm looking for is not in oTable, at least not within the visible data.
So I need to know how get the rowID in aoData to update or delete the data.

I'm sorry for my long post and if I'm unable to explain what I mean :)
I'll try to put the page on my router.


Thanks,
Boris

allan

Hi Boris,

Sounds like an interesting application. If it's publicly available, perhaps you would be willing to post a link to let us see how you are using DataTables!?

What I think will fix the issue you are seeing is to replace:

[code]
jQuery('#'+SU.rid)[0]
[/code]
with

[code]
jQuery('#'+SU.rid, oTable.fnGetNodes() )[0])
[/code]
What fnGetNodes does is to get all of the TR elements in the table - and then jQuery can select the correct one.

Regards,
Allan

Boris.Tk

Hi Allan,

didn't helped.
Now I'm getting

nNode is undefined
[Break on this error] if ( nNode.nodeName == "TR" )

even without filtering the table.


I looked into DOM and I can see

oTable > dataTableSettings > 0 > aoData

has all nTrs I'm looking for. I would just need to get the TR by its ID. How can I do fnGetPosition by an ID in aoData?


Here is the complete function (can't get my router to do what I want - the thing is killing me):

[code]
jQuery.each(subscribers.units, function(i, SU){

// create table items for each column
var u_gstat = '';
var u_link = ''+SU.name+'';
var u_symbol = '';
var u_status = SU.status;

// depending on action field do *magic*
// update action
if (SU.action == 'update'){

//var rowID = oTable.fnGetPosition( jQuery('#'+SU.rid)[0] );
var rowID = oTable.fnGetPosition( jQuery('#'+SU.rid, oTable.fnGetNodes() )[0] );
oTable.fnUpdate( [u_gstat, u_link, u_symbol, u_status], rowID, 0 );
jQuery('#SUTable #'+SU.rid).attr('class', SU.status);

} else if (SU.action == 'create'){

//alert('creating: '+SU.rid);
if ( jQuery('#'+SU.rid).length == 0){
var newRow = oTable.fnAddData( [u_gstat,u_link, u_symbol, u_status] );
var oSettings = oTable.fnSettings();
var nTr = oSettings.aoData[ newRow[0] ].nTr;
jQuery(nTr).attr( 'id', SU.rid);
jQuery(nTr).attr('class', SU.status);
} else {
alert('found data in table!!!');
}

} else if (SU.action == 'delete'){

//alert('deleting: '+SU.rid);
if ( jQuery('#'+SU.rid).length != 0 ) {
var rowID = oTable.fnGetPosition( jQuery('#'+SU.rid)[0] );
oTable.fnDeleteRow(rowID);
} else {
alert('already deleted');
}
}
oTable.fnDraw();
});
[/code]

line 13 works with non-filtered data
line 14 ins't working anyway


Thanks again for your help!
Boris

allan

Hi Boris,

A little trick to debug this one remotely. Will the 02 router not do port forwarding? That's rubbish...

Your line 14 looks right to me, but I might be missing something. If you 'console.dir( oTable.fnGetNodes() )' you should get a lot of TR elements. Then console.dir( jQuery('#'+SU.rid, oTable.fnGetNodes() ) you should get a single TR element - is that correct or not?

Allan

Boris.Tk

Allan,

console.dir( jQuery('#'+SU.rid, oTable.fnGetNodes() );
didn't show up anything.


****
edit
****

I did some debugging and when I call fnGetNOdes() I can see an array with all TRs.
My problem is that I cannot get the index in the array of the request row based on its ID.
I tried several things with jQuery (.get, .index, etc.) - no luck.


Regards,
Boris

allan

Hi Boris,

Think I've got it now. Try:

[code]
$(oTable.fnGetNodes()).filter('#'+SU.rid)[0]
[/code]
Not quite how I was expecting it to work - but that appears to do the trick...

Allan

Boris.Tk

Allan,

that did the trick!
Many many thanks for your help and time!


Cheers ;)
Boris

kkudi

for the sake of anyone out there trying to work why

[code]jQuery('#'+SU.rid, oTable.fnGetNodes() )[/code]

doesn't work is because of the following:

http://stackoverflow.com/questions/553766/jquery-selector-context-question

quoting:

"It looks like you're trying to select elements out of the ones you already have selected (residing in the jQuery object).

Context, as far as jQuery is concerned, is like specifying a parent - the context is a node somewhere ABOVE what you're looking for in the DOM tree. The context is where jQuery will look for the selector you've specified.

If I am correct about what you're attempting to do then this should work:....filtering...which is what Allan suggested