How to solve ajax.reload() undefined

How to solve ajax.reload() undefined

fungus00fungus00 Posts: 5Questions: 2Answers: 0

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

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 8,244Questions: 25Answers: 1,857
    Answer ✓

    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

  • fungus00fungus00 Posts: 5Questions: 2Answers: 0
    edited October 2017

    @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 ?

  • kthorngrenkthorngren Posts: 8,244Questions: 25Answers: 1,857
    edited October 2017 Answer ✓

    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

  • fungus00fungus00 Posts: 5Questions: 2Answers: 0

    @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: ''
            }
    
Sign In or Register to comment.