Handle/suppress ajax error

Handle/suppress ajax error

mitch2kmitch2k Posts: 3Questions: 2Answers: 0

Hi,

I have a DT that gets it's data via ajax:

` <script type="text/javascript">
        //---------------------------------------------------
        var table = $('#na_datatable').DataTable( {
            "dom": 'f<"toolbar">tlip',
            "processing": false,
            "serverSide": false,
            "ajax": "<?=base_url('vpn/vpns_datatable_json')?>",
            "order": [[1,'desc']],
            "iDisplayLength": 50,

            "columnDefs": [
                { "targets": 0, "email": "email", 'searchable':true, 'orderable':true},
            ],
            "language": {
                "lengthMenu": "<?php echo $this->lang->line('datatable_lengthmenu'); ?>",
                "zeroRecords": "<?php echo $this->lang->line('datatable_zerorecords'); ?>",
                "info": "<?php echo $this->lang->line('datatable_info') . " ".str_replace("{sec}","5",$this->lang->line('datatable_info_refresh')); ?>",
                "infoEmpty": "<?php echo $this->lang->line('datatable_infoempty'); ?>",
                "infoFiltered": "<?php echo $this->lang->line('datatable_infofiltered'); ?>",
                "search": "<?php echo $this->lang->line('datatable_search'); ?>:",
                "search": "<?php echo $this->lang->line('datatable_search'); ?>:",
                "autoWidth": true,
                "paginate": {
                    "first":      "<?php echo $this->lang->line('datatable_first'); ?>",
                    "last":       "<?php echo $this->lang->line('datatable_last'); ?>",
                    "next":       "<?php echo $this->lang->line('datatable_next'); ?>",
                    "previous":   "<?php echo $this->lang->line('datatable_previous'); ?>"
                }

            }
        });`

I also refresh the table every 10 seconds:

`  setInterval( function () {
            table.ajax.reload();         

        }, 10000 );`

The ajax call goes to a controller that fetches data from an external source. Sometimes that call fails, and there is no (valid) data to respond. In that case we get an empty table and this popup:

DataTables warning: table id=na_datatable - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

Is it possible to handle this better from client side? I would like to suppress the popup and show an extra message to the user. I found a solution for the message like this:

`setInterval( function () {
            table.ajax.reload();
            <?php if (!isset($vpndata)){?>
            $("div.toolbar").html('<button type="button" id="tablereload" class="btn btn-primary waves-effect">\n' +
                '                            <i class="material-icons">loop</i>' +
                '                            <span><?php echo $this->lang->line('datatable_reloaddata'); ?></span>\n' +
                '                        </button><br><span><div class="alert alert-warning alert-dismissible" role="alert">\n' +
                '<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button>\n' +
                'Sorry, data refresh failed. Please try again later\n' +
                '</div></span>');
            <?php } ?>`

However I am not able to suppress the default popup.

Next to this, it would be even more ideal that if a ajax data refresh fails, that the data from the previous succeeded call gets retained. Is this something that is possible on client side or should I handle this in my controller by caching the previous result?

Thanks!

Answers

  • kthorngrenkthorngren Posts: 21,303Questions: 26Answers: 4,947
    edited October 2018

    Not sure what your server script returns when there is no valid data but it probably should just return an empty data set (an empty array []). That doesn't resolve the second part of displaying the previous data. With using ajax.reload() your server script would need to return the previous data set if there is an error.

    Another option is to not use ajax.reload() but send an ajax request to the server and in the success function use clear() and rows.add() to update the table if the returned data is acceptable.

    Kevin

This discussion has been closed.