jhyland87 / DataTables-Live-Ajax

Keep an AJAX sourced DataTable up to date, without reloading the entire table at once (with custom interval and pausing ability)
http://www.linuxdigest.org/misc/script_examples/DataTables-Live-Ajax/examples/
MIT License
18 stars 8 forks source link

Failing to poll: uncaught typeError #1

Open gregpettit opened 8 years ago

gregpettit commented 8 years ago

Hi there!

I'm implementing a polling mechanism for my DataTables-based application and rather than writing everything from scratch, I stumbled across your plugin. I don't need the "selective updating" which is at the core of what you've done, but it's still low-hanging fruit to use DataTables LiveAjax for interval, pause, and cancel methods.

However, when I try to fire up liveAjax in a table, I encounter the following error:

Uncaught TypeError: Cannot read property '0' of undefined

Which is found on this line:

                if ( json[ dtSettings.liveAjax.dataSrc ][0][ dtSettings.liveAjax.rowId ] === undefined ){

I call my DT in a slightly unconventional way, but I'm not sure why it is failing:

fcapp.storedTables.sessionTable = $('#sessiontable').on('error.dt', fcapp.tables.dtErrorHandler).DataTable({
      "ajax": {
        "url": "/rs/sessions",
        "dataSrc": function (json) {
          return fcr.utils.ensureArray(json.session);
        },
        "headers": {
          "RESTSessionSecret": sessionStorage.getItem("currentSession")
        }
      },
      liveAjax: true,
      "columns": [
        {"data": "userName",
          "title": "user name"
        },
        {"data": "remoteIP",
          "title": "IP"},
        {
          "data": "fileName",
          "title": "file"
        },
        {
          "data": "status",
          "title": "status"
        },
        {"data": null,
          "sortable": false,
          "defaultContent": fcapp.render.tools('group'),
          "createdCell": function (td, cellData, rowData, row, col) {
            $(td).addClass('toolcell');
          }
        }
      ],
      "rowCallback": function (row, data, index) {
        fcapp.render.row(row, data, index);
      }
    });

DataTables is 1.10.8, and it is using dataTables.bootstrap.js as well.

Any insight? What are the usual causes of such an undefined?

jhyland87 commented 8 years ago

@gregpettit sorry for the delay, but im looking into this right now.

The problem is I coded this and didn't test it using a function as the value for dataSrc, so I need to add that functionality, so thanks for showing me that!

I'm going to have to do some research and testing, but ill have a working version released this weekend

jhyland87 commented 8 years ago

@gregpettit Can you tell me what this line returns in your JS code?

"dataSrc": function (json) {
    return fcr.utils.ensureArray(json.session);
},

The error is obviously because I have the dataSrc handled as a string/int, but you have it as a function. So I need to work with that.

jhyland87 commented 8 years ago

I have a fix in the datasrcfix branch, feel free to check that out and try it.. Ill merge it with master after I do some more testing.

If you can test it out with your own DT instance, that would be great

P.S.: I created a quick example of it working with a custom ajax.dataSrc function value

gregpettit commented 8 years ago

Sorry for the lack of reply! I was meaning to test it and get back to you. Still intending to test it, but I had moved on to another polling mechanism. Still not sure if Live-Ajax will be used going forward, but I'd like to at least let you know if it worked or not!

Hopefully sometime soon I will have results, either from my own tests or from a colleague's.

gregpettit commented 8 years ago

It proved a bit tricky to wire up so we had to give up again. We're using DT 1.10.8 in the front end, but our back end application still "speaks" DT 1.9 and below. In order to use the new DT API, we shim the request payload using the "data" property.

I'm a bit fuzzy on the exact details since I was looking over my colleague's shoulder, but at the moment that we do the conversion from new to old request payload, we are getting an undefined error and the application halts. More specifically, within the "ajax.data" property for the DataTables config/initialization object, we are looking for 'data.order[0].column' as part of building a new request payload. It's not finding it (it is found without ajax-live) and is just crashing.

Without stepping through the code, I cannot guess the specifics, but there is some sort of disconnect between ajax-live's processed data structure(s) and the structure we are using (natively new-style, converted to old-style within ajax.data).