DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

console log shows doubling of callback firing on each detection

console log shows doubling of callback firing on each detection

ebbebb Posts: 14Questions: 0Answers: 0
edited December 2013 in General
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

Replies

  • allanallan Posts: 63,302Questions: 1Answers: 10,432 Site admin
    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
  • ebbebb Posts: 14Questions: 0Answers: 0
    thank you for the clarification. could you give a hint for the single delegated method or how to remove events
  • ebbebb Posts: 14Questions: 0Answers: 0
    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]'});
    });
  • allanallan Posts: 63,302Questions: 1Answers: 10,432 Site admin
    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
  • ebbebb Posts: 14Questions: 0Answers: 0
    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
  • allanallan Posts: 63,302Questions: 1Answers: 10,432 Site admin
    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
  • ebbebb Posts: 14Questions: 0Answers: 0
    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
  • ebbebb Posts: 14Questions: 0Answers: 0
    forgot the important information
  • ebbebb Posts: 14Questions: 0Answers: 0
    code.jquery.com/jquery-latest.min.js. script tags caused it to disappear
  • allanallan Posts: 63,302Questions: 1Answers: 10,432 Site admin
    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
  • ebbebb Posts: 14Questions: 0Answers: 0
    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
  • ebbebb Posts: 14Questions: 0Answers: 0
    support purchased
  • allanallan Posts: 63,302Questions: 1Answers: 10,432 Site admin
    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
  • ebbebb Posts: 14Questions: 0Answers: 0
    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
  • ebbebb Posts: 14Questions: 0Answers: 0
    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
  • allanallan Posts: 63,302Questions: 1Answers: 10,432 Site admin
    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
  • ebbebb Posts: 14Questions: 0Answers: 0
    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
  • allanallan Posts: 63,302Questions: 1Answers: 10,432 Site admin
    > 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
  • ebbebb Posts: 14Questions: 0Answers: 0
    got it working. thanks so much for tolerating the newb
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.