Is anyone else having problems with SearchBuilder?

Stacey1134 · January 7

I recently upgraded to Editor 2.2.2 and the rest of the family, and Search builder fails with more than 2 instances.
Caveat, I don't know if it's Jquery 3.7, PHP 8, or searchBuilder 1.6.

If I add more than two of

>searchBuilderOptions( SearchBuilderOptions::inst()),

I get this error, "DataTables warning: table id=contributorsTable - Invalid JSON response. For more information about this error, please see https://datatables.net/tn/1"

Debugger only warned me my page wouldn't work right on android phones. I did upload the configuration data.

It works with Jquery 3.6.0, Editor 2. (whatever was current on 5/20/2023), and PHP 7.4.1

So to reiterate, to get the code to work I have to REM out all successive searchBuilderOptions, this is not good, any help would be greatful,

```
<?php
include( "assets/datatables/lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions,
DataTables\Editor\SearchBuilderOptions;

/*
* Example PHP implementation used for the join.html example
*/

Editor::inst( $db, 'Contributors' )
->fields(
Field::inst( 'contributors.id' ),
Field::inst( 'contributors.FullName' ),
Field::inst( 'contributors.LastName' )
->validator( Validate::notEmpty( ValidateOptions::inst()
->message( 'A last name is required' )
) )
->searchBuilderOptions( SearchBuilderOptions::inst()),
Field::inst( 'contributors.FirstName' )
->validator( Validate::notEmpty( ValidateOptions::inst()
->message( 'A first name is required' )
) )
->searchBuilderOptions( SearchBuilderOptions::inst()),
Field::inst( 'contributors.PreferredName' ),
Field::inst( 'contributors.PrisonID' ),
Field::inst( 'contributors.FacilityID' )
->options( Options::inst()
->table( 'prisonfacilitylisting' )
->value( 'Facility_ID' )
->label( 'Prison_Name' )
),
Field::inst( 'prisonfacilitylisting.Prison_Name' ),
Field::inst( 'prisonfacilitylisting.correspondence' ),
Field::inst( 'prisonfacilitylisting.Address_1' ),
Field::inst( 'prisonfacilitylisting.Address_2' ),
Field::inst( 'prisonfacilitylisting.Address_3' ),
Field::inst( 'prisonfacilitylisting.City' ),
Field::inst( 'prisonfacilitylisting.State' ),
// ->searchBuilderOptions( SearchBuilderOptions::inst()),
Field::inst( 'prisonfacilitylisting.Zipcode' ),
Field::inst( 'prisonfacilitylisting.Mail_Addr_1' ),
Field::inst( 'prisonfacilitylisting.Mail_Addr_2' ),
Field::inst( 'prisonfacilitylisting.Mail_Addr_3' ),
Field::inst( 'prisonfacilitylisting.Mail_City' ),
Field::inst( 'prisonfacilitylisting.Mail_State' ),
Field::inst( 'prisonfacilitylisting.Mail_Zip' ),
Field::inst( 'prisonfacilitylisting.Pkg_Addr_1' ),
Field::inst( 'prisonfacilitylisting.Pkg_Addr_2' ),
Field::inst( 'prisonfacilitylisting.Pkg_Addr_3' ),
Field::inst( 'prisonfacilitylisting.Pkg_City' ),
Field::inst( 'prisonfacilitylisting.Pkg_State' ),
Field::inst( 'prisonfacilitylisting.Pkg_Zip' ),
Field::inst( 'prisonfacilitylisting.Alt_Addr_1' ),
Field::inst( 'prisonfacilitylisting.Alt_Addr_2' ),
Field::inst( 'prisonfacilitylisting.Alt_Addr_3' ),
Field::inst( 'prisonfacilitylisting.Alt_City' ),
Field::inst( 'prisonfacilitylisting.Alt_State' ),
Field::inst( 'prisonfacilitylisting.Alt_Zip' ),
Field::inst( 'contributors.PrisonUnit' )
->validator( Validate::notEmpty( ValidateOptions::inst()
->message( 'A prison facility name is required' )
) )
->searchBuilderOptions( SearchBuilderOptions::inst()),
Field::inst( 'contributors.Address' ),
Field::inst( 'contributors.City' ),
Field::inst( 'contributors.State' ),
Field::inst( 'contributors.Zipcode' ),
Field::inst( 'contributors.MailingNotes' ),
Field::inst( 'contributors.Birthday' ),
// ->searchBuilderOptions( SearchBuilderOptions::inst()),
Field::inst( 'contributors.Age' ),
Field::inst( 'contributors.Race_Ethnicity' ),
// ->searchBuilderOptions( SearchBuilderOptions::inst()),
Field::inst( 'contributors.Sexual_Orientation' ),
// ->searchBuilderOptions( SearchBuilderOptions::inst()),
Field::inst( 'contributors.Gender_Identity' ),
// ->searchBuilderOptions( SearchBuilderOptions::inst()),
Field::inst( 'contributors.Disability' ),
// ->searchBuilderOptions( SearchBuilderOptions::inst()),
Field::inst( 'contributors.Donations' ),
Field::inst( 'contributors.Bio' )
->setFormatter( Format::ifEmpty( null ) )
->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/bios/ID.EXTN' )
->db( 'abo.scanned_bios', 'id', array(
'filename' => Upload::DB_FILE_NAME,
'filesize' => Upload::DB_FILE_SIZE,
'web_path' => Upload::DB_WEB_PATH,
'system_path' => Upload::DB_SYSTEM_PATH
) )
->validator( Validate::fileSize( 2048000, 'Files must be smaller that 2MB' ) )
->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
),
Field::inst( 'contributors.BioText' ),
// Field::inst( 'contributors.Subscribed' ),
// Field::inst( 'contributors.NoCards' ),
Field::inst( 'contributors.image' )
->setFormatter( Format::ifEmpty( null ) )
->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/ID.EXTN' )
->db( 'abo.scanned_files', 'id', array(
'filename' => Upload::DB_FILE_NAME,
'filesize' => Upload::DB_FILE_SIZE,
'web_path' => Upload::DB_WEB_PATH,
'system_path' => Upload::DB_SYSTEM_PATH
) )
->validator( Validate::fileSize( 2048000, 'Files must be smaller that 2MB' ) )
->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
)
)
->leftJoin( 'prisonfacilitylisting', 'prisonfacilitylisting.Facility_ID', '=', 'contributors.FacilityID' )
->process( $_POST )
->json();

<?php > ``` ?>

colin · January 8

Can you post what the server responds when you see that client error? That may give some clues.

Colin

Stacey1134 · January 9

I will when I get a chance, for now I reverted everything back to Editor 2.1.2 and Jquery 3.6.0 and everything is working fine again.

Stacey1134 · January 11

Okay fixed the json issue, but still can't get searchBuilder to work with the new version. First, the overlay is all messed up as you can see by the photo when I click my searchBuilder button (it works fine in 2.1.3). Additionally, when I select the data dropdown, the wonky overlay just disappears.

loaded plugins:

<script src="../assets/datatables/js/jquery-3.7.0.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!--<link href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css" rel="stylesheet"> -->
<link href="../assets/datatables/datatables.min.css" rel="stylesheet"> 

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="../assets/datatables/datatables.min.js" ></script>

<!-- <link href="../assets/datatables/css/dataTables.jqueryui.min.css" rel="stylesheet"> -->
<link href="../assets/datatables/css/editor.bootstrap5.min.css" rel="stylesheet">
<link href="../assets/datatables/css/buttons.bootstrap5.min.css" rel="stylesheet">
<link href="../assets/datatables/css/selectize.bootstrap5.css" rel="stylesheet">
<link href="../assets/datatables/css/editor.selectize.css" rel="stylesheet">
<link href="../assets/datatables/css/dataTables.dateTime.min.css" rel="stylesheet">
<!-- <link href="../assets/datatables/css/searchBuilder.dataTables.min.css" rel="stylesheet"> -->
<link href="../assets/datatables/css/searchBuilder.bootstrap5.min.css" rel="stylesheet">
<script src="../assets/datatables/js/dataTables.editor.min.js" ></script>
<script src="../assets/datatables/js/editor.bootstrap5.min.js" ></script>
<script src="../assets/datatables/js/buttons.bootstrap5.min.js" ></script>
<script src="../assets/datatables/js/dataTables.searchBuilder.min.js" ></script>
<script src="../assets/datatables/js/searchBuilder.bootstrap5.min.js" ></script>
<script src="../assets/datatables/js/dataTables.buttons.min.js" ></script>
<script src="../assets/datatables/js/dataTables.dateTime.min.js" ></script>
<!-- <script src="../assets/datatables/js/dataTables.jqueryui.min.js" ></script> -->
<script src="../assets/datatables/js/editor.display.js"></script>
<script src="../assets/datatables/js/editor.select2.js"></script>
<script src="../assets/datatables/js/editor.selectize.js"></script>
<script src="../assets/datatables/js/jszip.min.js"></script>  
<script src="../assets/datatables/js/pdfmake.min.js"></script>  
<script src="../assets/datatables/js/vfs_fonts.js"></script>  
<script src="../assets/datatables/js/buttons.print.min.js"></script>
<script src="../assets/datatables/js/buttons.html5.min.js"></script> 

<link href="../assets/fontawesome/css/fontawesome.min.css" rel="stylesheet">
<link href="../assets/fontawesome/css/brands.min.css" rel="stylesheet">
<link href="../assets/fontawesome/css/solid.min.css" rel="stylesheet">
<link href="../assets/fontawesome/css/duotone.min.css" rel="stylesheet">

<script defer src="../assets/fontawesome/js/fontawesome.min.js" ></script>
<script defer src="../assets/fontawesome/js/brands.min.js" ></script>
<script defer src="../assets/fontawesome/js/solid.min.js" ></script>
<script defer src="../assets/fontawesome/js/duotone.min.js" ></script>

<link href="https://cdn.quilljs.com/latest/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.quilljs.com/latest/quill.min.js"></script>
<script src="../assets/js/quill.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css"
    integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
    />
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"
    integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer">
</script>

Relevant JS:

        var table = $('#comradesTable').DataTable( {
            serverSide: true,
            processing: true,
            language: {
            processing: '<i class="fa-duotone fa-gear fa-spin"></i> Data Loading...',    
                searchBuilder: {
                    button: '<i class=" fa-solid fa-magnifying-glass-arrow-right fa-xl"></i>' ,
                    title: 'Choose Filter Options',
                    className: 'btn btn-primary'
                    }
                },
            buttons:[
                '<i class=" fa-solid fa-magnifying-glass-arrow-right"></i>' 
            ],
            ajax: {
                url: 'ajaxAbbyDistro.php',
                type: "POST"
            },                    
            scrollY: 400,
            scrollX: true,
            scrollCollapse: true,
            deferRender: true,
            scroller: true,
            // select: 'single',
            rowId: 'extn',              
            columns: [  
///
        new $.fn.dataTable.Buttons( table, [

            { extend: "edit", editor: editor , text: '<i class=" fa-solid fa-user-pen fa-xl"></i>', 
                titleAttr: 'Edit', className: "btn btn-warning"},

            { 
                className: 'btn btn-danger',
                text: '<i class=" fa-solid fa-user-minus fa-xl"></i>',
                titleAttr: 'Unsubscribe',
                action: function ( e, dt, node, conf ) {
                    alert("This button will quickly unsubscribe an imprisoned comrade from the Abby, for now just change their subscription status from yes to no in the edit window.");
                }
            },
            { extend: "searchBuilder", 
                config: { 
                    columns: [0,1,2,3,10,11],                                        
                }, 
                className: 'btn btn-primary', 
                text: '<i class=" fa-solid fa-magnifying-glass-arrow-right fa-xl"></i>',
                titleAttr: 'Refine Search' 
            },

I am only putting relevant code as the blog limits full code in post. This does work fine in previous versions. I am assuming that there is a problem with

<!-- <link href="../assets/datatables/css/searchBuilder.dataTables.min.css" rel="stylesheet"> -->
<link href="../assets/datatables/css/searchBuilder.bootstrap5.min.css" rel="stylesheet">
<script src="../assets/datatables/js/dataTables.searchBuilder.min.js" ></script>
<script src="../assets/datatables/js/searchBuilder.bootstrap5.min.js" ></script>

Especially when it disappears when I try to click the data button. Any help would be great.

kthorngren · January 11

On lines 5 and 8 are these concatenated files with multiple files combined? You can open them to see what they contain in the comments at the top. I'm asking because I don't see where you are loading dataTables.bootstrap5.min.css for example. It may contain an older version of the searchBuilder library and have conflicting CSS.

I would clean up the Datatable include files by using the Download Builder to get the BS 5 integration files and concatenate them into one file. Then remove the duplicated individual files.

If this doesn't help maybe you can build a simple test case using CDN versions of the js and .css files your are loading to show the issue. Doesn't sound like a data specific issue so you should be able to build a generic test case.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Stacey1134 · January 11

I did use download builder, its where the files come from, and datatables.bootstrap5.min.css throws disappears the buttons in Editor 2.2.2, makes the pagination disappear, and puts spaces between each pagination button.

But for the sake of argument, I added this one <link href="https://cdn.datatables.net/1.13.5/css/dataTables.bootstrap5.min.css" rel="stylesheet"> instead of the one from download builder, and no change.
Same thing adding the min.js, they have no impact on the searchbuilder part.

Which sucks, because it works with Editor 2.1.3

Stacey1134 · January 11

Sorry as for your first question lines 5 & 8, don't know what's in there but without them the won't recognize any other plugins, but if I try to use them without the other plugins, i get errors.

allan · January 11

Can you direct me to where I can see this so I can take a look into it please?

Allan

Stacey1134 · January 12

Sure I'll move it over to the sandbox, trying to fix more problems, some of my editor and datatable scripts I created on 2.0 are now giving me JSON errors when we pointed them to the new editor files, so trying to rectify that now.

Sent.

Stacey1134 · January 12

@kthorngren Thanks, for your earlier insight about #5 and #8, ~~while it does not help with the searchBuilder problem I have~~, it did help all the other problems I had with this upgrade.

I rebuilt my plugin library file, with the new files based on the format I used for the 2.1.3 release. Omitting datatables.min.css and datatables.min.js. and everything seems to be working fine with the 2.2.2 release. Unfortunately adding dataTables.bootstrap5.min.css ~~isn't fixing the searchBuilder problem. ~~

Sorry writing this I had one of those aha moments!

Thanks you did answer my question, it was in the load searchBuilder.bootstrap5.min.css does have a small problem with the (and/or) buttons displaying right, but that's been since 2.0, it's why all my older loads had searchBuilder.dataTables.min.css instead because at least it worked right.

If you all can give @kthorngren the answer for this. It was well deserved.

New load:

<script src="../assets/datatables/js/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="../assets/datatables/js/jquery.dataTables.min.js" ></script>
<script src="../assets/datatables/js/dataTables.bootstrap5.min.js" ></script>
<script src="../assets/datatables/js/dataTables.buttons.min.js" ></script>
<script src="../assets/datatables/js/buttons.bootstrap5.min.js" ></script>
<script src="../assets/datatables/js/dataTables.select.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="../assets/datatables/js/dataTables.dateTime.min.js" ></script>
<script src="../assets/datatables/js/dataTables.searchBuilder.min.js" ></script>
<!-- dataTables.colReorder.min.js-->
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"
    integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer">
</script>
<script src="../assets/datatables/js/dataTables.editor.min.js" ></script>
<script src="../assets/datatables/js/editor.bootstrap5.min.js" ></script>
<script src="../assets/datatables/js/editor.selectize.js"></script>
<script src="../assets/datatables/js/editor.display.js"></script>
<script src="https://cdn.quilljs.com/latest/quill.min.js"></script>
<script src="../assets/datatables/js/jszip.min.js"></script>  
<script src="../assets/datatables/js/pdfmake.min.js"></script>  
<script src="../assets/datatables/js/vfs_fonts.js"></script>  
<script src="../assets/datatables/js/buttons.print.min.js"></script>
<script src="../assets/datatables/js/buttons.html5.min.js"></script>
<script src="../assets/js/quill.js"></script> 
<!--editor.mask.js-->
<script defer src="../assets/fontawesome/js/fontawesome.min.js" ></script>
<script defer src="../assets/fontawesome/js/brands.min.js" ></script>
<script defer src="../assets/fontawesome/js/solid.min.js" ></script>
<script defer src="../assets/fontawesome/js/duotone.min.js" ></script>


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="../assets/datatables/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link href="../assets/datatables/css/buttons.bootstrap5.min.css" rel="stylesheet">
<link href="../assets/datatables/css/select.bootstrap5.min.css" rel="stylesheet">
<link href="../assets/datatables/css/dataTables.dateTime.min.css" rel="stylesheet">
<link href="../assets/datatables/css/dataTables.dateTime.min.css" rel="stylesheet">
<link href="../assets/datatables/css/searchBuilder.bootstrap5.min.css" rel="stylesheet">
<!-- colReorder.dataTables.min.css-->
<link href="../assets/datatables/css/editor.bootstrap5.min.css" rel="stylesheet">
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css"
    integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
    />
<link href="../assets/datatables/css/editor.selectize.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/latest/quill.snow.css" rel="stylesheet" />
<link href="../assets/fontawesome/css/fontawesome.min.css" rel="stylesheet">
<link href="../assets/fontawesome/css/brands.min.css" rel="stylesheet">
<link href="../assets/fontawesome/css/solid.min.css" rel="stylesheet">
<link href="../assets/fontawesome/css/duotone.min.css" rel="stylesheet">

everything good except for the minor css. problem with
searchBuilder.bootstrap5.min.css

allan · January 12

If you all can give @kthorngren the answer for this. It was well deserved.

Done.

Allan

Is anyone else having problems with SearchBuilder?

Is anyone else having problems with SearchBuilder?

Answers

Howdy, Stranger!

Categories

DataTables

Is anyone else having problems with SearchBuilder?

Is anyone else having problems with SearchBuilder?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables