ajax.reload not working for me

tokeri51

Here is my table initialization:

function initDT() {
    dtTable = $('#supportUsers').DataTable({
        "dom" :'<"top"pl>rt<"bottom"ip>',
        "columns" : [{"data": "username", "autoWidth": true},
                     {"data": "email", "autoWidth": true},
                     {"data": "role", "autoWidth": true, "render": function(data, type, row) {
                         switch(data)
                         {
                         case 0: return "Administrator";
                         case 1: return "Support";
                         case 2: return "Help";
                         case 3: return "Accountant";
                         case 4: return "Sales";
                         case 5: return "Management";
                         case 6: return "Sales Manager";
                         default: return "Unknown";
                         }
                     }},
                     {"data":"supportID", "autoWidth": true}],
                    "columnDefs":[{"targets": [3], 
                                    "searchable":false,
                                    "sortable": false,
                                    "render": function(data, type, row){
                                        return '<a href=javascript:changeRoleClick(' + data + '); alt="Change Role" ```title="Change Role"><span class="glyphicon glyphicon-edit"></span></a>&nbsp' +
                                               '<a href=javascript:changeEmailClick(' + data + '); alt="Change ```Email" title="Change Email"><span class="glyphicon glyphicon-envelope"></span></a>&nbsp' +
                                               '<a href=javascript:resetPasswordClick(' + data + '); alt="Reset ```Password" title="Reset Password"><span class="glyphicon glyphicon-lock"></span></a>&nbsp' +
                                               '<a href=javascript:deleteUserClick(' + data + '); alt="Delete User" ```title="Delete User"><span class="glyphicon glyphicon-remove"></span></a>';
                                    }
                    }],
        "paging": true,
        "pagingType": "full_numbers",
        "lengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]],
        "pageLength": 15,
        "orderMulti" : false,
        "order":[0, 'asc'],
        "scrollY": "60vh",
        "scrollCollapse": true,
        "stateSave":false,
        "processing": true,
        "ajax": {
            url: 'https://localhost:4567/SupportUser',
            type: 'GET'
        }
    });
}

and here is the JQuery function to refresh the table:

$('#btnSubmit').on('click', function() {
    console.log('Submit Button');
    var model = new SupportUserModel();
    if (model.submit() == true) {
        $('#formTitle').text('');
        $('#btnAdd').show();
        $('#manageUsers').collapse('toggle');
        dtTable.ajax.reload();
        dtTable.draw();
    }
});

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

What happens when you click the button? Do you get an error? We'd really need a test case showing the issue to be able to answer it immediately.

Allan

tokeri51

I figured it out.
I was not waiting for the callback to return before refreshing the table.
My bad!