SearchBuilder - not showing any panel?

pawelk

Link to test case: http://live.datatables.net/xuziwoti/1/
Error messages shown: No errors
Description of problem: I took a look at searchBuilder and I loved it, however when I tried to implement it with my Ajax calls it seems like its not showing any panels by default. I changed ajax to localJS variable and it seems like this is still a case (example above).

I was wondering whenever I'm missing some configuration but I had a look at examples and it seems like they should work without any and only thing required is Q in DOM.

Can you have a look? I checked and it seems like DIV is present for searchBuilder, but it does not show anything.

pawelk

• my dependencies, however on live example I think it might be using other ones:
  AutoFill-2.3.5
  Buttons-1.6.3
  ColReorder-1.5.2
  DataTables-1.10.21
  FixedColumns-3.3.1
  FixedHeader-3.1.7
  jQuery-3.3.1
  JSZip-2.5.0
  KeyTable-2.5.2
  pdfmake-0.1.36
  Responsive-2.2.5
  RowGroup-1.1.2
  RowReorder-1.2.7
  Scroller-2.0.2
  SearchBuilder-1.0.0
  SearchPanes-1.1.1
  Select-1.3.1

tangerine

I don't see the SearchBuilder extension code referenced in your example.
https://datatables.net/extensions/searchbuilder/

colin

Yep, as tangerine said, there's no SearchBuilder present - see your test case updated here.

Colin

pawelk

Hi, correct. I'm sorry not used to share on this portals.
I have put this live here with some test data:
https://moodnook.westeurope.cloudapp.azure.com:8080/Test

On my example I have again page with no pane showing (SearchBuilder).

The scenario is the same so I suspect again dependencies were not injected. But when I check DataTables.min.js I see all libraries included in 'incl libraries section' (bottom part).

I was under impression that once I download an pack with dependencies (zip), it will include all plugins on my page. But it seems not to be the case. I had added them manually (css+js), but still to no avail (screenshot shows that they loaded).

• Included libraries:
• jQuery 3 3.3.1, JSZip 2.5.0, pdfmake 0.1.36, DataTables 1.10.21, AutoFill 2.3.5, Buttons 1.6.3, Column visibility 1.6.3, Flash export 1.6.3, HTML5 export 1.6.3, Print view 1.6.3, ColReorder 1.5.2, FixedColumns 3.3.1, FixedHeader 3.1.7, KeyTable 2.5.2, Responsive 2.2.5, RowGroup 1.1.2, RowReorder 1.2.7, Scroller 2.0.2, SearchBuilder 1.0.0, SearchPanes 1.1.1, Select 1.3.1

pawelk

@colin @tangerine do you have any ideas? I think I must do something obviously wrong but I can put my finger on it

kthorngren

This include file does contain SearchBuilder as you state:

<script type="text/javascript" src="DataTables/datatables.min.js"></script>

In line 13 you have:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />

This does not include the CSS for any of the extensions. You should have a compiled CSS including the extensions. You can go to the link in the datatables.min.js to regenerate if needed.

One line 91 you have:

        <link href="https://nightly.datatables.net/searchbuilder/css/searchBuilder.dataTables.css?_=40f0e1a3ea332af586366e40955c1713.css" rel="stylesheet" type="text/css" />
        <script src="https://nightly.datatables.net/searchbuilder/js/dataTables.searchBuilder.js?_=40f0e1a3ea332af586366e40955c1713"></script>

The is the second instance of SearchBuilder you are including. Not sure if this is causing the problem but you probably shouldn't include it twice. Remove this and fix the CSS and let us know if it works.

You are also getting this error:

Test:175 Uncaught TypeError: Cannot read property 'OriginalQ' of undefined

In this column:

                        {
                            targets: 8,
                            className: 'dt-body-right',
                            render: function (data, type, row ) {
                                return parseInt(row.ProductData.OriginalQ)-parseInt(row.ProductData.Quantity);
                            }
                        }

It might just be your test case but you might want to check to see if the OriginalQ exists.

Kevin

pawelk

Hi @kthorngren I removed duplicates, included dataTables.min.css. It seems like problem still persists. I'm having deeper look. Maybe this is truly css issue (not sure).

Error with OriginalQ is testing case (second table) it's not important.

kthorngren

I'm not sure why but the problem seems to be with this code:

                (function refreshTimeout() {
                    dtInvoices.ajax.reload();
                    dtInventories.ajax.reload();
                    setTimeout(refreshTimeout, 30000);
                })();

See this example:
http://live.datatables.net/mazowowo/1/edit

If you comment out the ajax.reload() statements then the setTimeout() function doesn't cause a problem and the SearchBuilder element appears. Maybe one of the developers can help. If you comment out table.ajax.reload() in the setTimeout function the SearchBuilder displays and you can use the button to reload the table. Interesting issue.

Also you will want to remove line 13:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />

As it conflicts with the bootstrap integration CSS in the bundled CSS you have. You can see this with the sorting images as you have both the default and the Bootstrap styled images.

Kevin

pawelk

You're right it is interesting, currently we use ajax calls but we will use signalR and push notifications in the future. I wonder maybe if I'll delay data incoming then the searchBuilder will appear or maybe I could add another line of code so searchBuilder is rebuilt, (sounds funny I know).

On one hand it makes sense as Search Builder is based on data that is incoming, and if the data changes what then?

And about line 13 once I remove it it actually breaks my design so I need to somehow join one and the other, or at least some pieces of it .

Anyway good spot! Should've tried myself commenting pieces of my custom code. Thank you

pawelk

RIght, so long story short to fix that I just need to wrap refreshData in TimeOut before it launches first time.
So something like that:
setTimeout(function () { refreshData(); }, 3000);

Might work. I will have a play around

kthorngren

And about line 13 once I remove it it actually breaks my design so I need to somehow join one and the other, or at least some pieces of it

Its just a suggestion, not sure what it breaks but it will conflict with the bootstrap.css. Its just styling so probably won't affect the page operation

Might work. I will have a play around

Maybe place that code inside initComplete.

Kevin