Overriding the Request Promise Example

[MaxxDau]

Website Page A link to the page with the issue

Describe the issue It took me a little longer to realise that url is a parameter of the function and that I have to specify a URL.

The code is not working.

var table = new Tabulator("#example-table", {
    ajaxRequestFunc:queryRealm,
});

Add a full working example.

var table = new Tabulator("#example-table", {
    ajaxURL:"x",
    ajaxRequestFunc:queryRealm,
});

[donnyv]

I think this might be broken in the newest version because I have the dummy ajaxUrl and it still doesn't call my ajaxRequestFunc. Does anything else need to be set?

[MaxxDau]

I'm using the latest version and it works. It would be good if you posted your config so that we can help you better.

[donnyv]

This is what I'm doing. I'm using it in Vue3. The column names show, but no row data is loaded. I look at the Network tab in Chrome and no ajax event is fired.

mounted() {
    let _this = this;
    
    //instantiate Tabulator when element is mounted
    _this.tabulator = new Tabulator(_this.$refs.nodesTable, {
        index: "NodeId",
        maxHeight: "calc(100vh - 125px)",
        layout: "fitColumns",
        columns: [
            { title: "Name", field: "Name" },
            { title: "Owner", field: "Owner" },
            { title: "Tags", field: "Tags" },
            { title: "Last Modified", field: "LastModified" },
            { title: "Size", field: "Size" }
        ],
        reactiveData: true,
        progressiveLoad: "scroll",
        progressiveLoadScrollMargin: 300,
        rowHeight: 50,
        ajaxURL: "placeholder",
        ajaxRequestFunc: function(url, config, params) {
    
            console.log("Ajax request fired");
    
            return new Promise(function (resolve, reject) {
    
                _this.getNodes(function () {
    
                    console.log("URL:");
                    console.log(url);
    
                    console.log("CONFIG:");
                    console.log(config);
    
                    console.log("PARAMS:");
                    console.log(params);
    
                    resolve(_this.nodes);
                });
    
            });
        },
        ajaxRequesting: function (url, params) {
            console.log("Ajax request aborting");
            return true; //to abort ajax request, change to => false
        }
    });
}

[MaxxDau]

There could be several reasons for this. I suspect it is a combination of ‘maxHeight’ and ‘progressiveLoad’, possibly also in conjunction with ‘progressiveLoadScrollMargin’. No height => no scrolling => no Ajax. Possible suggestions (untested) – use min-height / height – set progressiveLoad to false or try load

[donnyv]

I just tried a bunch of different combos you suggested. I got nothing.

Honestly not sure why any of these settings should affect the first load. I would think if ajaxRequestFunc is set to a method. It should just fire after tabulator has been initialized. At least then the developer could put a console.log() and see if its working and then troubleshoot from there.

[MaxxDau]

This works as expected. /foo returns 404. I think the problem is outside of Tabulator.

const tabulator = new Tabulator("#entity_list", {
        index: "NodeId",
        maxHeight: "calc(100vh - 125px)",
        layout: "fitColumns",
        columns: [
            { title: "Name", field: "Name" },
            { title: "Owner", field: "Owner" },
            { title: "Tags", field: "Tags" },
            { title: "Last Modified", field: "LastModified" },
            { title: "Size", field: "Size" }
        ],
        reactiveData: true,
        progressiveLoad: "scroll",
        progressiveLoadScrollMargin: 300,
        rowHeight: 50,
        ajaxURL: "placeholder",
        ajaxRequestFunc: function(url, config, params) {

            console.log("Ajax request fired");

            return new Promise(function (resolve, reject) {
                    console.log("URL:");
                    console.log(url);

                    console.log("CONFIG:");
                    console.log(config);

                    console.log("PARAMS:");
                    console.log(params);
                 app.fetch.request("/foo").then(function (response){
                    const data = response.data;
                    resolve({data:data});
                }).catch(function (error){
                    console.log(error);
                    resolve({data:[]});
                });
            });
        },
        ajaxRequesting: function (url, params) {
            console.log("Ajax request aborting");
            return true; //to abort ajax request, change to => false
        }
    });

Ajax request aborting 2:216 Ajax request fired 2:219 URL: 2:220 placeholder 2:222 CONFIG: 2:223 {method: 'get'} 2:225 PARAMS: 2:226 {page: 1}

[donnyv]

Yeah your right. I should of pulled out the code into a standalone .htm file to test. It seems to work. Thanks, I'll have to troubleshoot what else it could be.