SearchPane error after ajax.url.load

SearchPane error after ajax.url.load

montoyammontoyam Posts: 568Questions: 136Answers: 5
edited March 2021 in SearchPanes

I have used this code just fine with dataTable that did not have a SearchPane. I am getting an error trying to use it on a dataTable that has one.

    $("#varType").change(function () {
        typeID = $("#varType option:selected").attr('value');
        InvoiceVarianceTable.ajax.url('api/BillingGenerated_Variances?typeID=' + typeID).load();
        InvoiceVarianceTable.searchPanes.rebuild();        
    });

The datatable loads fine initially. I tried it with both a default of zero and one (the two options that typeID can be. When I change the value of the select box, I get the error:

 Cannot read property 'searchPanes' of null

I tried adding the searchPanes.rebuild() but that didn't seem to help.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    Probably due to the ajax request being asynchronous. Use the callback function of the ajax.url().load() API to execute InvoiceVarianceTable.searchPanes.rebuild();.

    Kevin

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    i'm not sure if this is the correct syntax (I didn't see any examples of a callback in the documentation) but I am still getting the same error

    InvoiceVarianceTable.ajax.url('api/BillingGenerated_Variances?typeID=' + typeID).load(function () { InvoiceVarianceTable.searchPanes.rebuild(); });
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Are you able to link to your page, or create a test case for us to debug, please? Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • montoyammontoyam Posts: 568Questions: 136Answers: 5
    edited March 2021

    I can not provide a link. I have never figured out how to provide a test case...how do I re-construct the api and the controller (this is a MVC project) with not having access to the sql tables externally?

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    but, it appears to be only a SearchPanes thing. I don't have any issues with this code on another page I have where there are no searchPanes

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @montoyam ,

    This could be a wide variety of things and without a test case will be hard to debug. Can you please do the following...

    • Use a non-minified version of SearchPanes
    • Provide your full DataTables initialisation and any other functions that you are using that affect DataTables
    • Provide your code for the controller
    • Provide the JSON response
    • Provide the full error that is outputted in the console

    Hopefully with this I can provide some insight.

    Thanks,
    Sandy

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    wow, I never thought about using the non-minified versions...nice!

    So originally I had the searchPanes.rebuild() after the ajax.reload() and it was failing on the xhr call. I changed the order of events as below:

            /**************************************************/
            $("#resultType").change(function () {
                resultTypeID = $("#resultType option:selected").attr('value');
                BillableItemsTable.ajax.url('api/SDPlus_BillableItems?resultType=' + resultTypeID).load();
                console.log("url load done");
                BillableItemsTable.searchPanes.rebuild(); 
                console.log("search panes rebuild done");
                BillableItemsTable.ajax.reload();
                console.log("reload done");
                switch (resultTypeID) {
                    case 0:
                        //add Post button
                        break;
                    case 1:
                        //remove buttons
                        break;
                    case 2:
                        //add repost button
                        break;
                }
            });
            /**************************************************/
    

    Now, in the Console I see "url load done", but I get an error during the searchPanes.rebuild. But, now, even though I get an error, the xhr finishes and the dataTable is drawn with the new data source. The SearchPane even re-draws even though it never hits my console.log('search panes rebuild done' )

    The error is now:

    datatables.js:85875 Uncaught RangeError: Maximum call stack size exceeded
    

    and here is the code where it hangs

        /**
         * DataTables API class - used to control and interface with  one or more
         * DataTables enhanced tables.
         *
         * The API class is heavily based on jQuery, presenting a chainable interface
         * that you can use to interact with tables. Each instance of the API class has
         * a "context" - i.e. the tables that it will operate on. This could be a single
         * table, all tables on a page or a sub-set thereof.
         *
         * Additionally the API is designed to allow you to easily work with the data in
         * the tables, retrieving and manipulating it as required. This is done by
         * presenting the API class as an array like interface. The contents of the
         * array depend upon the actions requested by each method (for example
         * `rows().nodes()` will return an array of nodes, while `rows().data()` will
         * return an array of objects or arrays depending upon your table's
         * configuration). The API object has a number of array like methods (`push`,
         * `pop`, `reverse` etc) as well as additional helper methods (`each`, `pluck`,
         * `unique` etc) to assist your working with the data held in a table.
         *
         * Most methods (those which return an Api instance) are chainable, which means
         * the return from a method call also has all of the methods available that the
         * top level object had. For example, these two calls are equivalent:
         *
         *     // Not chained
         *     api.row.add( {...} );
         *     api.draw();
         *
         *     // Chained
         *     api.row.add( {...} ).draw();
         *
         * @class DataTable.Api
         * @param {array|object|string|jQuery} context DataTable identifier. This is
         *   used to define which DataTables enhanced tables this API will operate on.
         *   Can be one of:
         *
         *   * `string` - jQuery selector. Any DataTables' matching the given selector
         *     with be found and used.
         *   * `node` - `TABLE` node which has already been formed into a DataTable.
         *   * `jQuery` - A jQuery object of `TABLE` nodes.
         *   * `object` - DataTables settings object
         * @param {array} [data] Data to initialise the Api instance with.
         *
         * @example
         *   // Direct initialisation during DataTables construction
         *   var api = $('#example').DataTable();
         *
         * @example
         *   // Initialisation using a DataTables jQuery object
         *   var api = $('#example').dataTable().api();
         *
         * @example
         *   // Initialisation as a constructor
         *   var api = new $.fn.DataTable.Api( 'table.dataTable' );
         */
        _Api = function ( context, data )
    
  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    i should mention that one result only has 39 rows, one has zero, and one has only 2 rows. So we are not talking about a ton of records (or fields).

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    edited March 2021 Answer ✓

    BillableItemsTable.searchPanes.rebuild();

    The API is searchPanes.rebuildPane() so you will need this:

    BillableItemsTable.searchPanes.rebuildPane();
    

    You probably don't want to use ajax.url().load() followed by ajax.reload(). This is likely going to cause errors as the ajax.url().load() is an outstanding ajax request (no response yet) when you execute ajax.reload(). Remove the BillableItemsTable.ajax.reload();.

    Kevin

  • montoyammontoyam Posts: 568Questions: 136Answers: 5
    edited March 2021

    yes, that got rid of all errors. Thank you!!! I have another project that was giving me similar errors so I will go back and check that one out too (and ask for the still open question in the forum to be closed).

    However, I am noticing when I select an option in my pulldown where no records exist, the SearchPane displays 'No SearchPanes'. This is fine, but when I then select an option that has records, the SearchPane displays the records correctly, but then directly below the message 'No SearchPanes' remains.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    I built a test case for you to show the issue:
    http://live.datatables.net/zoparoye/2/edit

    You don't always need to provide us with your full solution. Usually you can use simulated data to recreate the problem. @sandy will likely take a look.

    Kevin

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    ah, so good to know it is not an issue with my data or code as you were able to reproduce the issue. Thanks

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Thanks for that test case, Kevin. I may be being dim here, but how can I reproduce the problem? Both those buttons appear to be behaving as expected to me.

    Colin

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    Click the Clear button you will see No SearchPanes displayed. Click Reload and the panes reload but the No SearchPanes message is not cleared.

    Kevin

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Ah gotcha, thanks for that, I still missed it first time even when following those instructions! I've raised it internally (DD-1923 for my reference) and we'll report back here when there's an update - most likely at the end of this week.

    Cheers,

    Colin

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @montoyam , @kthorngren ,

    I've just pushed a fix up for this, a simple check to remove the message if there is a pane to be displayed. Take a look at this example. The styling is a touch off but that is something that we are looking into elsewhere.

    This will be available in the next SearchPanes release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

    Thanks,
    Sandy

  • sandysandy Posts: 913Questions: 0Answers: 236

    I'm too keen, spotted another issue there - the top row is being removed after the load. Will get that fixed - won't be long!

  • sandysandy Posts: 913Questions: 0Answers: 236

    Turns out that was an easy enough fix too, just a class that I needed to remove at the same point as removing the empty message.

    The above example should show this fix also.

    Thanks,
    Sandy

This discussion has been closed.