AJAX request returning data but not showing in table

dkClark · September 2020

The image shows the table loading without any errors and with my refresh every 30 secs it also reloads.

The following is the returned data from the AJAX call and is data typed in manually to prove it works.

{"data":[{"DT_RowId":"row_1","ItemId":"ItemId","Descr":"Descr","Qty":1,"Unit":"EACH","Packed":0,"Held":0,"progress":"","detail":""}],"options":[],"files":[],"searchPanes":{"options":[]}}

Now if I generate the data using my database lookup it returns the following data.

{"data":[{"DT_RowId":"row_1002087","ItemId":"HZJ75-8L-F","Descr":"LEAF SPRING","Qty":"2.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002088","ItemId":"HZJ75-8+2-R","Descr":"LEAF SPRING","Qty":"2.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002090","ItemId":"GS59-221","Descr":"GAS SHOCK ABSORBER","Qty":"2.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002091","ItemId":"PG00-2200","Descr":"4X4 SUSPENSION CATALOGUE","Qty":"20.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002092","ItemId":"PB15-1060K","Descr":"POLYURETHANE BUSH KIT","Qty":"2.0000","Unit":"KIT","Packed":"0.00","Held":"0.00","progress":"","detail":"SPF315<br \/>SPF317<br \/>SPF316<br \/><\/div><\/div>"}],"options":[],"files":[],"searchPanes":{"options":[]}}

It then does not load in the table. Just says 'Loading...'

Now the funny thing is, if I add back in AFTER the database script runs the manually added record from my first test, the table loads again without and errors. However, it still only shows me as per the image (1 record - manually added one)

The following is the data it returns.

{"data":[{"DT_RowId":"row_1002087","ItemId":"HZJ75-8L-F","Descr":"LEAF SPRING","Qty":"2.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002088","ItemId":"HZJ75-8+2-R","Descr":"LEAF SPRING","Qty":"2.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002090","ItemId":"GS59-221","Descr":"GAS SHOCK ABSORBER","Qty":"2.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002091","ItemId":"PG00-2200","Descr":"4X4 SUSPENSION CATALOGUE","Qty":"20.0000","Unit":"EACH","Packed":"0.00","Held":"0.00","progress":"","detail":""},{"DT_RowId":"row_1002092","ItemId":"PB15-1060K","Descr":"POLYURETHANE BUSH KIT","Qty":"2.0000","Unit":"KIT","Packed":"0.00","Held":"0.00","progress":"","detail":"SPF315<br \/>SPF317<br \/>SPF316<br \/><\/div><\/div>"},{"DT_RowId":"row_1","ItemId":"ItemId","Descr":"Descr","Qty":1,"Unit":"EACH","Packed":0,"Held":0,"progress":"","detail":""}],"options":[],"files":[],"searchPanes":{"options":[]}}

I have many tables in the system working but this one just seems to be making a joke out of me.

Now the script I have, if I leave it all as it is and just remove the part where it adds the data to the array (php) it runs through fine. The "Loading..." issue only appears when I add to the array through the script. I have replaced that portion also with the manually added part and it still doesn't work.

Any help would be appreciated.

dkClark · September 2020

Forgot to add my table code.

                $.fn.dataTable.ext.classes.sPageButton = 'button small';
                $.fn.dataTable.Buttons.defaults.dom.button.className = 'button';
                
                var table = $('#myTable').DataTable({
                    "responsive": true,
                    "deferRender": true,
                    "processing": true,
                    "serverSide": false,
                    "pageResize": true,
                    "ajax": "ids-objects.php",
                    "order": [
                                [ 0, 'asc' ] 
                    ],
                    "columns": [
                        { "data": "ItemId" },
                        { "data": "DT_RowId" },
                        { "data": "Descr" },
                        { "data": "Qty" },
                        { "data": "Unit" },
                        { "data": "Packed" },
                        { "data": "Held" },
                        { "data": "progress" },
                        { "data": "detail" }
                    ],
                    "columnDefs": [
                        {
                            "targets": [ 1 ],
                            "visible": false,
                            "searchable": false
                        },
                        {
                            "targets": [ 4 ],
                            "searchable": false
                        },
                        {
                            "targets": [ 7 ],
                            "visible": false
                        },
                        {
                            "targets": [ 8 ],
                            "visible": false
                        }
                    ],
                    "rowCallback": function( row, data ) {
                        if ( data.request_detail != "" ) {
                            $(row).attr('data-toggle', 'popover');
                            $(row).attr('data-content', data.detail);
                            $(row).attr('data-trigger', 'hover');
                        }
                    },
                    "preDrawCallback": function( row, data ) {
                        $('[data-toggle=popover]').popover('hide');
                    },
                    "drawCallback": function( row, data ) {
                        $('[data-toggle="popover"]').popover({
                            html: true,
                            container: '#sidebar',
                            placement: 'right'
                        });
                    },
                    "initComplete": function( settings, json ) {
                        MYprogressTimer();
                    },
                    dom: 'Blftip',
                    select: true,
                    select: {
                        style: 'single'
                    },
                    buttons: [
                            {
                                text: 'Open',
                                enabled: false,
                                className: 'myOpen',
                                action: function () {
                                    var count = table.rows( { selected: true } ).count();
                                    if (count == 1) {
                                        var id = table.cell('.selected', 1).data();
                                        $("#recordID").val(id.replace('row_', ''));
                                        $("#myForm").attr('action', 'open.php');
                                        $("#myForm").submit()
                                    } else {
                                        $(".myOpen").prop('disabled', true);
                                    }
                                }
                            },
                        {
                            text: '<i class="fas fa-redo-alt"></i>',
                            enabled: true,
                            className: 'myRefresh',
                            action: function () {
                                $('#myTable').DataTable().ajax.reload();
                            }
                        },
                        {
                            extend: 'pdfHtml5',
                            orientation: 'landscape',
                            exportOptions: {
                                columns: [ 0, 2, 3, 4, 5, 6 ]
                            }
                        },
                        {
                            text: '<i class="fas fa-people-carry"></i>',
                            enabled: false,
                            className: 'myPack dataTables_button_action',
                            action: function () {
                                var count = table.rows( { selected: true } ).count();
                                if (count == 1) {
                                    var id = table.cell('.selected', 1).data();
                                    $("#recordID").val(id.replace('row_', ''));
                                    $("#myForm").attr('action', 'pack.php');
                                    $("#myForm").submit()
                                } else {
                                    $(".myPack").prop('disabled', true);
                                }
                            }
                        },
                    ]
                });
                
                new $.fn.dataTable.FixedHeader( table );
                
                $('#myTable tbody').on( 'click', 'tr', function () {
                    if ( $(this).hasClass('selected') ) {
                        $(this).removeClass('selected');
                        $("button.myPack").addClass('disabled');
                    } else {
                        table.$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                        $("button.myPack").removeClass('disabled');
                    }
                });
                
                function MYprogressTimer() {
                    $("#progressTimer").progressTimer({
                        timeLimit: 30,
                        warningThreshold: 10,
                        baseStyle: 'bg-success progress-bar-striped progress-bar-animated active',
                        warningStyle: 'bg-danger progress-bar-striped progress-bar-animated active',
                        completeStyle: 'bg-danger progress-bar-striped progress-bar-animated active',
                        onFinish: function() {
                            $('#myTable').DataTable().ajax.reload();
                            MYprogressTimer();
                        }
                    });
                }

kthorngren · September 2020

It then does not load in the table. Just says 'Loading...'

Have you looked at the browser's console for errors?

Kevin

dkClark · September 2020

Hi kthorngren. Thanks for the reply. I just worked it out and feel like such a .....

"ajax": "ids-objects.php",

need to be

"ajax": "ids-objects.php?InInvoiId=123456",

I wasn't sending the record to the script and it was set to locate only the one record.

That was an expensive 8hrs

AJAX request returning data but not showing in table

AJAX request returning data but not showing in table

Answers

Howdy, Stranger!

Categories

DataTables

AJAX request returning data but not showing in table

AJAX request returning data but not showing in table

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables