table.searchBuilder.getDetails() throws "Cannot read properties of undefined getDetails"

table.searchBuilder.getDetails() throws "Cannot read properties of undefined getDetails"

washuit-iammwashuit-iamm Posts: 121Questions: 51Answers: 2
datatables.js:51919  Uncaught TypeError: Cannot read properties of undefined (reading 'getDetails')
    at SearchBuilder.getDetails (datatables.js:51919:36)
    at _Api.<anonymous> (datatables.js:52434:32)
    at Object.getDetails (datatables.js:23873:17)
    at index.html:411:45

I apologize in advance for no test case, this requires serverSide data I think.

If I call this code in a setTimeout, it works!

setTimeout(function () {
    console.log(table.searchBuilder);
    var d = table.searchBuilder.getDetails();
    console.log(d);
}, 3000);

There is some issue where getDetails chokes if the server side data has not loaded yet.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    Using ajax, whether using server side processing or not, is an asynchronous process. If you only need this once after initialization move that code into initComplete. If you want to use it each time the server side process is called then use xhr.

    Kevin

  • washuit-iammwashuit-iamm Posts: 121Questions: 51Answers: 2

    @kthorngren Same issue:

  • washuit-iammwashuit-iamm Posts: 121Questions: 51Answers: 2

    @kthorngren And with xhr event, same issue:

    There seems to be no way to access the queryBuilder API in events when using serverSide.

    What am I missing?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    I rather suspect that SearchBuilder hasn't been created on the DataTable by the time the xhr event fires the first time, but I haven't had a chance to try it out yet. That would explain why it works if you add a time delay though.

    What are you trying to do with the details in the xhr event? Can you wait for draw?

    Allan

  • washuit-iammwashuit-iamm Posts: 121Questions: 51Answers: 2
    edited May 3

    @allan Similar issue with draw event and .rebuild().

                table.on('draw', function () {
    
                    console.log("draw - TODO Share SearchBuilder Feature");
                    // console.log(table.searchBuilder.getDetails());
    
                    const urlParams = new URLSearchParams(window.location.search);
                    const searchBuilderParam = urlParams.get('searchBuilder');
                    if (searchBuilderParam) {
                        table.searchBuilder.rebuild(JSON.parse(searchBuilderParam));
                    }
                })
    

    Usecase: Allow user to share their search config with eachother. And save/bookmark as well.

    IE:

    {
        text: 'Share',
        action: function (e, dt, node, config) {
            const search = dt.searchBuilder.getDetails();
            const value = JSON.stringify(search);
            const queryParams = new URLSearchParams();
            queryParams.set("searchBuilder", value);
            const shareUrl = `${window.location.origin}/index.html?${queryParams}`;
    // TODO - Display link to user
            console.log(shareUrl);
        }
    },
    

    Open to advice or alternative solutions.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited May 3

    You may also be interested in the Deep link plugin. Although this example is using searchPanes.preSelect with deep linking it might give you an idea of how to do the same with searchBuilder.preDefined:
    https://live.datatables.net/rejeqese/1?searchPanes.preSelect=[{%22rows%22:[%22Edinburgh%22,%22London%22],%22column%22:2}]

    The example is from this thread if you want some background.

    Kevin

  • washuit-iammwashuit-iamm Posts: 121Questions: 51Answers: 2

    @kthorngren that is very helpful. Regarding that ready method, the docs say:

    but they only fire once on a table and (without this method) there is no way to know if the table is ready or not.

    That seems to suggest ready couple be called more than once, obviously that would be a big issue if the query string is being read and searchBuilder invoked multiple times after the page loads.

    In my testing, I was able to search, sort, filter and mess with the query builder without seeing ready be called > 1 time but the docs worry me in that regard.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    I agree that sentence is a bit confusing but true; those events fire only once :smile:

    The ready() docs state this:

    DataTables is in it's "ready" state - i.e. it has initialised, its control elements are on the page and the first data has been loaded and displayed.

    My understanding is the "ready" state happens only once. However you could call ready() multiple times and the function defined will execute each time called but only after the Datatable has reached the "ready" state. As long as you call it only once the function will execute only once. Again that is my understanding. I haven't messed with it much though.

    @allan can confirm and maybe adjust that verbiage a bit.

    Kevin

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Yes, Kevin's understanding is spot on. You can call ready() as many times as you want - it will execute whatever is given to it when the DataTable is ready, or immediately if the DataTable is already in a "ready" state.

    Allan

Sign In or Register to comment.