How to solve ajax.reload() undefined

fungus00

Hi all,

I'm having problem with ajax.reload(). Chrome tells that ajax.reload() is undefined.
I googled a lot but found nothing.

I've datatable 1.10.15 version and jQuery 3.2.1 version.

My Code

jQuery(document).ready(function(){
    var cusTable = jQuery.ajax({
        url: '../services/CustomerService.asmx/GetCustomer',
        data: '{}',
        method: 'POST',
        dataType: 'JSON',
        success: function (data) {
           jQuery('#customerTable').DataTable({
                data: data,
                paging: true,
                language: {
                    searchPlaceholder: 'Search Customer',
                    processing: 'Wait busy !!'
                },
                'lengthChange': false,
                columns: [
                    {
                        'data': null,
                        'render': function (data, type, full, meta) {
                            return '<a class="addContact btn btn-info" value=' + full.CustomerId + '>Add Contact</a>';
                        }
                    },
                    {
                        'data': null,
                        'render': function (data, type, full, meta) {
                            return data.CustomerName;
                        },
                        'sortable': false
                    },
                    {
                        'data': null,
                        'render': function (data, type, full, meta) {
                            return data.CustomerCity;
                        },
                        'sortable': false
                    },
                    {
                        'data': null,
                        'render': function (data, type, full, meta) {
                            return data.CustomerContact;
                        },
                        'sortable': false,
                        'searchable': false
                    },
                    {
                        'data': null,
                        'render': function (data, type, full, meta) {
                            return '<a class="edit btn btn-warning" value=' + full.CustomerId + '>Edit</a> <a class="delete btn btn-danger" value=' + full.CustomerId + '>Delete</a>';
                        }
                    }
                ]
            });
        }
    });
    
    jQuery('#btnAddCustomer').click(function () {
        jQuery('#divAddCustomer').dialog({
            autoOpen: true,
            modal: true,
            title: 'Add Customer',
            draggable: false,
            resizable: false,
            width: 600,
            buttons: [
                {
                    text: 'Add Customer',
                    icon: 'ui-icon-plusthick',
                    click: function () {
                        var txtBox_CustomerName = jQuery('#txtBoxCustomerName');
                        var ddl_CityId = jQuery('#ContentPlaceHolder1_ddlCityName');
                        var txtBox_WebUrl = jQuery('#txtBoxWebUrl').val();
                        var lbl_Msg = jQuery('#lblMsg');
                        
                        var obj_Customer = {};
                        var obj_City = {};
                        
                        
                        obj_Customer.CustomerName = txtBox_CustomerName.val();
                        obj_Customer.URL = txtBox_WebUrl;
                        obj_City.CityId = ddl_CityId.val();

                        jQuery.ajax({
                            url: '../services/CustomerService.asmx/Add_NewCustomer',
                            method: 'POST',
                            contentType: 'application/json; charset=utf=8',
                            data: JSON.stringify({ customer: obj_Customer, cities: obj_City }),
                            dataType: 'JSON',
                            success: function (response) {
                                if (response.d == 1) {
                                    // Problem here -------------------------------
                                    cusTable.ajax.reload();
                                    }
                                }
                            });
                        }
                    },
                    {
                        text: 'Cancel',
                        icon: 'ui-icon-closethick',
                        click: function () {
                        jQuery(this).dialog('close');
                    }
                }
            ]
        });
    });
});

I'll be very thankful
Thanks in advance
Regards

kthorngren

I think you have two issues:

1. Your cusTable variable is not assigned to a Datatables API instance but the jQuery.ajax() function. You would need something like this var cusTable = jQuery('#customerTable').DataTable();.
2. The ajax.reload() api uses the ajax configuration assigned using the ajax Datatables option. In other words you need to build your ajax config and pass it to the Datatables function like this example:
   https://datatables.net/examples/data_sources/ajax.html

I'm not sure what your requirements are but you might be able to use clear() followed by rows.add() to clear and add the new row data to the table.

Kevin

fungus00

@kthorngren

I did some changing as you told and as I understood.
Now I got new error "Uncaught TypeError: Cannot read property 'length' of undefined"

HTML Code

<table id="example">
        <thead>
            <tr>
                <th><a href="#">Customer Name</a></th>
                <th><a href="#">City</a></th>
                <th><a href="#">Web Site</a></th>
                <th><a href="#">Contact</a></th>
            </tr>
        </thead>
    </table>

Code

jQuery(document).ready(function () {
    var table = $('#example').DataTable({
        'ajax': {
            url: '../services/FilterService.asmx/Customer',
            type: 'POST'
        },
        columns: [
            { "data": "CustomerName" },
            { "data": "CustomerCity" },
            { "data": "URL" },
            { "data": "CustomerContact" }
        ]
    });
});

What should I do to remove this error ?

kthorngren

That error can indicate the data received from the server does not match what is defined in the table. I would start with the steps in this technote:
https://datatables.net/manual/tech-notes/1

But my guess is that you are not returning the data in a data object as described here:
https://datatables.net/manual/ajax

Which means you need to set the ajax.dataSrc. Probably need to set it to this:
dataSrc: ""

Kevin

fungus00

@kthorngren

Thank you bro you helped me a lot.
Now code is working fine as I want. Just add an option dataSrc: ""

var oTable = $('#customerTable').DataTable({
        'ajax': {
            url: 'data/text.',
            type: 'POST',
            dataSrc: ''
        }