How to parse the return function of an Ajax Data requet?

R_G

I primarily using ajax-datatables-rails (ADR), converting from jquery-datatables-rails. I have found that ADR has an incompatiblity with jquery-datatables. ADR wants the columns format to be a hash, not an array. This is fine when ADR does the initialization but I have use cases as below that require my jQuery code to perform the initialization. As such, I am moving that code to use DataTables directly.

My problem stems from the data command return. Return is stringifying the returned data giving a failure of:

jquery.dataTables.self-...-.js?body=1:4127 Uncaught TypeError: Cannot read property 'length' of undefined.  

I believe I need it parsed. But, I cannot figure out how to do that. Adding the parse to the return corrupts the data being sent to the server as an object instead of a string.

Reading the documentation, the answer might be dataSrc though that is unclear. Is the code before the return processed as a callback once the data is returned? At least that is what I gather.

It looks like dataSrc may be the answer but I cannot see how to do that and I am not certain that is correct anyway. It seems that dataSrc would require the return to be a simple variable so that dataSrc could process it by name. But, it's a function not a variable. To make it a variable within the data function, I would have to assign it there. How would dataSrc work with initialization code and a callback, both.

The URL is a simple Rails microservice that renders the data back in JSON. That appears to work. How do I get the returned data parsed back into a JSON object from a JSON string? Or, am I totally on the wrong track?

The code is:

var movesindexrowstable = $('#movesindexrowstable').on('xhr.dt', function (e, settings, json, xhr) {
    json = clearJson(json)   // Ensure json exists and is not null setting to {} if needed.
}).DataTable(
    {
        responsive: true,
        autoWidth: false,
        pagingType: 'full',
        jQueryUI: true,
        processing: true,
        serverSide: true,
        buttons: [
            'selectAll',
            'selectNone'
        ],
        language: {
            buttons: {
                selectAll: "Select all items",
                selectNone: "Select none"
            }
        },
        dom: "<'row'<'col-sm-6'l><'col-sm-6'Bf>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-6'i><'col-sm-6'p>>",
        renderer: 'bootstrap',
        ajax: {
            url: 'moves_indexrowsjson.json',
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            data: function (d) {
                return JSON.stringify($.extend({}, d, {lots: selected}))
            }
        },
        order: [[0, 'asc'], [1, 'asc']],
        columns: [
            {'data': 'lnshadow'},
            {'data': 'name'}
        ]
    }
);

colin

Probably the best thing here is to either link to your page, or post the data that comes back from the ajax call.

Colin

R_G

Well, that was helpful. It was not quite doing what I expected and I don't understand it. The Ajax data return is generating a draw, not the Rails response. This is after it queries Rails. OBTW, this is currently on a development server that is inaccessible externally.

The Ajax data return function provides a draw of the columns:

"{"draw":1,"columns":[{"data":"lnshadow","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"name","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}}],"order":[{"column":0,"dir":"asc"},{"column":1,"dir":"asc"}],"start":0,"length":10,"search":{"value":"","regex":false},"lots":{"33":"33"}}"

The Rails render that it executed is:

Row.joins(:lot).references(:lots).where("lot_id = ?", @lots).distinct

The data being returned from the Rails render is:

[{"id":69,"name":" A","lot_id":33,"created_at":"2019-09-09T15:30:29.967-04:00","updated_at":"2019-09-09T15:30:29.999-04:00","company_id":5,"lnshadow":"Main"},{"id":70,"name":" B","lot_id":33,"created_at":"2019-09-09T15:30:30.019-04:00","updated_at":"2019-09-09T15:30:30.044-04:00","company_id":5,"lnshadow":"Main"},{"id":71,"name":" C","lot_id":33,"created_at":"2019-09-09T15:30:30.063-04:00","updated_at":"2019-09-09T15:30:30.091-04:00","company_id":5,"lnshadow":"Main"},{"id":72,"name":" D","lot_id":33,"created_at":"2019-09-09T15:30:30.110-04:00","updated_at":"2019-09-09T15:30:30.137-04:00","company_id":5,"lnshadow":"Main"},{"id":73,"name":" E","lot_id":33,"created_at":"2019-09-09T15:30:30.160-04:00","updated_at":"2019-09-09T15:30:30.187-04:00","company_id":5,"lnshadow":"Main"},{"id":74,"name":" F","lot_id":33,"created_at":"2019-09-09T15:30:30.208-04:00","updated_at":"2019-09-09T15:30:30.234-04:00","company_id":5,"lnshadow":"Main"},{"id":75,"name":" G","lot_id":33,"created_at":"2019-09-09T15:30:30.254-04:00","updated_at":"2019-09-09T15:30:30.279-04:00","company_id":5,"lnshadow":"Main"},{"id":76,"name":" H","lot_id":33,"created_at":"2019-09-09T15:30:30.299-04:00","updated_at":"2019-09-09T15:30:30.326-04:00","company_id":5,"lnshadow":"Main"},{"id":77,"name":" I","lot_id":33,"created_at":"2019-09-09T15:30:30.344-04:00","updated_at":"2019-09-09T15:30:30.369-04:00","company_id":5,"lnshadow":"Main"},{"id":78,"name":" J","lot_id":33,"created_at":"2019-09-09T15:30:30.389-04:00","updated_at":"2019-09-09T15:30:30.413-04:00","company_id":5,"lnshadow":"Main"}]

kthorngren

The first code snippet with the draw value is the request to the server. You have server side processing enabled which follows the request/response protocol described here:
https://datatables.net/manual/server-side

Your Rails script is not responding with the parameters expected for the server side processing protocol. First question is do you need server side processing? See this FAQ. If you do then your Rails script will need to provide the expected response.

If not then remove serverSide: true,. Since your response is not in the expected data object as described in the Ajax docs you will need to use ajax.dataSrc to point Datatables to the correct data location. See second example in the docs.

Kevin

R_G

Wow, okay! Just adding dataSrc = "" got me a working screen! Thank you!

Select all works but individual/multiple selections don't because it is missing the DT_RowId tag. I can get that going myself.

Thanks so much for your response!