SearchPane error after ajax.url.load

montoyam

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.

kthorngren

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

Kevin

montoyam

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(); });

colin

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

montoyam

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?

montoyam

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

sandy

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

montoyam

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 )

montoyam

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).

kthorngren

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

montoyam

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.

kthorngren

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

montoyam

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

colin

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

kthorngren

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

colin

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

sandy

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

sandy

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!

sandy

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