Not making first Ajax call

Not making first Ajax call

SrAxiSrAxi Posts: 7Questions: 2Answers: 0

Hello,

I'm using Angular2+Datatables with Ajax. I'm using SmartAdmin (latest version) theme. I had this working well until I decided to merge the new release from SmartAdmin to my project. After few days of optimizing and fixing things here and there... Everything works except for DataTables.

Issue:
Is not making the Ajax call when Initializing!

Here my options for DataTable():

this.options = {
            dom: 'Bfrtip',
            processing: true,
            serverSide: true,
            pageLength: 20,
            searchDelay: 1200,
            ajax: {
                url: this.jsonApiService.buildURL('/test_getUsers.php', 'remote'),
                type: 'POST',
                data: function (d) {
                    Object.assign(d, IBOsTable.params);
                    log.data('DT options obj. New params are: ', JSON.stringify(IBOsTable.params));
                    return d;
                }
            },
            columns: this.initColumns,
        };

Even if I remove all this:

data: function (d) {
                    Object.assign(d, IBOsTable.params);
                    log.data('DT options obj. New params are: ', JSON.stringify(IBOsTable.params));
                    return d;
                }

Is still not making the Ajax call.

Attached you find my console.log's of options.

If I run table.DataTable().ajax.reload(); then DataTables makes the Ajax call and everything works fine.

Thanks in advance! (I'm desperate)

This question has an accepted answers - jump to answer

Answers

  • SrAxiSrAxi Posts: 7Questions: 2Answers: 0
    edited June 2017

    By the way, more details that may be useful can be found here: https://stackoverflow.com/questions/44586587/angular-datatables-typeerror-cannot-read-property-nodename-of-null

    I'm running out of forums to ask for help! hehehe

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    From the information in the SO thread it looks like you are getting a Javascript error when the table is initialised, which would explain why it isn't making the Ajax request. Fix that error and it will start working again.

    The error you are seeing will typically happen when the columns defined in the Javascript does not match the number of columns defined in the HTML. Or the thead columns do not match the tbody columns if you have any.

    Allan

  • SrAxiSrAxi Posts: 7Questions: 2Answers: 0

    @allan Thanks a lot for your answer!

    I'm debugging since 4 days, I'm desperate at this point.

    But, the thing is that after it inits if I execute the ajax.reload()... It works perfectly!

  • SrAxiSrAxi Posts: 7Questions: 2Answers: 0

    The JavaScript error comes when this gets executed:

    let _dataTable = element.DataTable(options);

    Where:

    let element = $(this.el.nativeElement.children[0]);

    And options you see it in the above question.

    Also, in the attached img you find the console.log of element and options. Hope this can be helpful!

  • SrAxiSrAxi Posts: 7Questions: 2Answers: 0

    @allan Thanks for your answer!

    I solved the issue! I had a random <thead> in my datatables loader and that caused the conflict with DataTables library.

    Attached you'll find the img of shame...

    Thanks again!

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Heh - thanks for posting back. Great to hear you've got it sorted out now.

    Allan

This discussion has been closed.