console log shows doubling of callback firing on each detection

ebb

i have a table representing a fretboard. when i click on a cell i determine its coordinates and send them to a a server via web socket
the callback does a fnUpdateRow with new data sent back from the server on the web socket. the first click produced one console record, the second 2, the third 4, the 4th 8 etc until im unresponsive.
i am very new to this stuff so is there a way to prevent this with my current implementation or should i be using an entirely different technique

fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$('td', nRow).on('click', function() {
var aPos = oTable.fnGetPosition( this );
console.log(aPos, aData);
send({cbk:'updtRow', idx:aPos, row:aData, dat:'markNote[req]'});
});
}
} );

function updtRow(d){
oTable.fnUpdate(d.dat,d.row);
}

[2, 3, 3]
Object {F0: "G#", F1: "A", F2: "A#", F3: "B", F4: "C"…}
steel.html:40
[5, 4, 4]
Object {F0: "B", F1: "C", F2: "C#", F3: "D", F4: "D#"…}
steel.html:40
[5, 4, 4]
Object {F0: "B", F1: "C", F2: "C#", F3: "D", F4: "D#"…}
steel.html:40
[7, 3, 3]
Object {F0: "F#", F1: "G", F2: "G#", F3: "A", F4: "A#"…}
steel.html:40
[7, 3, 3]
Object {F0: "F#", F1: "G", F2: "G#", F3: "A", F4: "A#"…}
steel.html:40
[7, 3, 3]
Object {F0: "F#", F1: "G", F2: "G#", F3: "A", F4: "A#"…}
steel.html:40
[7, 3, 3]
Object {F0: "F#", F1: "G", F2: "G#", F3: "A", F4: "A#"…}
steel.html:40
[2, 3, 3]
Object {F0: "G#", F1: "A", F2: "A#", F3: "B", F4: "C"…}
steel.html:40
[2, 3, 3]
Object {F0: "G#", F1: "A", F2: "A#", F3: "B", F4: "B"…}
steel.html:40
[2, 3, 3]
Object {F0: "G#", F1: "A", F2: "A#", F3: "B", F4: "B"…}
steel.html:40
[2, 3, 3]
Object {F0: "G#", F1: "A", F2: "A#", F3: "B", F4: "B"…}
steel.html:40
[2, 3, 3]
Object {F0: "G#", F1: "A", F2: "A#", F3: "B", F4: "B"…}
steel.html:40
[2, 3, 3]
Object {F0: "G#", F1: "A", F2: "A#", F3: "B", F4: "B"…}
steel.html:40
[2, 3, 3]
Object {F0: "G#", F1: "A", F2: "A#", F3: "B", F4: "B"…}
steel.html:40
[2, 3, 3]
Object {F0: "G#", F1: "A", F2: "A#", F3: "B", F4: "B"…}
steel.html:40

allan

You are adding the event every time fnRowCallback is called without removing the old events. You either want a single delegated method (which is what I would suggest), to add the event only once, or to remove the old event before adding the new one.

Allan

ebb

thank you for the clarification. could you give a hint for the single delegated method or how to remove events

ebb

this is as close to a single delegated method that ive been able to come up with.
how can i also get the column index?

$('#fretboard').delegate('tr', 'click', function(event) {
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos);
console.log(aPos, aData);
// send({cbk:'updtRow', idx:aPos, row:aData, dat:'markNote[req]'});
});

allan

What about:

[code]
$('#fretboard tbody').on( 'td', 'click', function (e) {
var pos = table.fnGetPosition( this );
...
} );
[/code]

Then fnGetPosition is passed in the `td` element and thus will return an array of information, such as the column index and row index.

Allan

ebb

yes i thought the same thing but i only get this on the first click and then nothing after that

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-latest.js:5374

maybe i could purchase some support time from you to get past this hump

allan

That's actually a jQuery issue, not DataTables. Which version of jQuery are you using? Also are you able to link me to the page. And yes, support purchases are always welcome :-). I'm sure we can resolve this one quickly either way!

Allan

ebb

if you point me to instructions for linking i will attempt it however my only problem is just with this little method

here is a link to my first datatables project so i think a donation is in order
https://docs.google.com/file/d/0Bw6v1jJR2jE_MlRpSTVSM29YaU0/edit?usp=sharing

ebb

forgot the important information

ebb

code.jquery.com/jquery-latest.min.js. script tags caused it to disappear

allan

Great to hear that the latest jQuery fixed the issue :-).

Thanks for the link to your video - it looks great. Are you using web-sockets to update in realtime?

Allan

ebb

sorry for the confusion. the latest doesn't fix my second project #fretboard. my first project works fine with it which is realtime fx quote updates every 200 milliseconds over web sockets. my second project is also employing web sockets but with much more 2 way traffic. the delegate click tr function works with the latest jquery but NOT the td click suggestion that we both came up with independently. if i get desperate i will just start rolling back jquery versions

ebb

support purchased

allan

Ah sorry, I misunderstood. Thanks for picking up the support option!

So if you use:

[code]
$('#fretboard tbody').on('click', 'tr', function(event) {
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos[0]);
console.log(aPos, aData);
});
[/code]

What do you get? It should be that the console will print an array of index information (three elements in the array, row index, column index and visible column index), and then the data for the row that was clicked upon based on the 'tr' element.

Is it just the data you want? If so you can simplify and use:

[code]
$('#fretboard tbody').on('click', 'tr', function(event) {
var data = oTable.fnGetData( this );
console.log(data);
});
[/code]

since fnGetData will accept `tr` elements as well as index position.

Regards,
Allan

ebb

yes tr works with the latest jquery but i need the column position and td does not work with the latest jquery. fnRowCallback kind of worked except for the stacking of events but since i am so new to the whole javascript/jquery/dom stuff i can only spin my wheels for so long before becoming extremely frustrated trying to do the most basic of tasks

ebb

here is the console output to your first suggestion on the first click
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-latest.js:5374

and then nothing for any further clicks

your first example is what i need to work

allan

Hi,

I've just put together a little example showing how a click on the `td` element can be used to get the position and the data for the cell that is clicked upon. The live example is here: http://live.datatables.net/ukasip/edit#javascript,html

and this is the code used:

[code]
var table = $('#fretboard').dataTable();

$('#fretboard tbody').on('click', 'td', function(event) {
var pos = table.fnGetPosition(this);
var data = table.fnGetData(pos[0]);

console.log( 'Data for the cell clicked on: '+data[ pos[1] ] );
});
[/code]

This assumes are are using arrays as the data source for each row of course. Are you?

Regards,
Allan

ebb

allan. what a champ to work on christmas eve!
i am assuming you have this working on a very isolated small example
can you tell me what version of jquery this works with for you?

i have the exact same problem with this code after changing var table to my var oTable

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-latest.js:5374

and then nothing

i think i will have to get you the link to proceed any further. enjoy the holidays first tho

allan

> i am assuming you have this working on a very isolated small example

It is working in the example I linked to above ( http://live.datatables.net/ukasip/edit#javascript,html ). Click the "Render" button on the top left to see the example actually running. It is a small example, but it should show the principle. It will work with jQuery 1.7+. This is it with the very latest jQuery: http://live.datatables.net/ukasip/2/edit

Regards,
Allan

ebb

got it working. thanks so much for tolerating the newb