How to get basic search builder working

How to get basic search builder working

mtoddmtodd Posts: 9Questions: 0Answers: 0
edited August 2021 in SearchBuilder

I'm trying to get the basic search builder to work. I loaded the JavaScript and CSS files and initialized it by adding the Q in the dom, as the reference on the basic example shows. The Add Builder button appears but when I click it, there is no data. I can't figure out how the basic search builder example shows the table headers as selection criteria and my button has nothing. Is there a step I'm missing? Can someone point me in the right direction? Thanks.

Replies

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

    Perhaps you can link to your page showing the issue so we can help to debug it please.

    Allan

  • mtoddmtodd Posts: 9Questions: 0Answers: 0
    edited August 2021

    Thanks for the response Allan. I made a little progress but I started a code pen here: https://codepen.io/mtodd28/pen/RwgPoaR

    However, I see the basic search builder example has the same problem. You can click the data, the condition but you can't choose or enter a vale.
    https://datatables.net/extensions/searchbuilder/examples/initialisation/simple.html

  • tangerinetangerine Posts: 3,350Questions: 37Answers: 394

    Both your codepen and the DT example are working for me (with Chrome).

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

    @mtodd Are you using Safari by any chance? A fix for that landed today.

    Allan

  • mtoddmtodd Posts: 9Questions: 0Answers: 0
    edited August 2021

    Ahhhh, but not in Safari. Thank you for clarifying. I don't know if I can use this extension if it isn't cross browser compatible.

  • mtoddmtodd Posts: 9Questions: 0Answers: 0

    @allan Yes, I'm using Safari.

  • mtoddmtodd Posts: 9Questions: 0Answers: 0

    I have narrowed down my original issue. There is a conflict with the CSS that comes with materializecss library. When I load the library on my codepen, the data stops loading (or is somewhere off the page). When I comment out the CSS for the materialize css library, the search builder appears to work, in Chrome at least. Anyone else using Materialize have this issue?

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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

  • mtoddmtodd Posts: 9Questions: 0Answers: 0
    edited August 2021

    @Colin Thank you. My codepen has an easy to see example. You can comment out block 6 that includes the materializecss stylesheet link and it will start working. I have comments in explaining it.

    The codepen is located here: https://codepen.io/mtodd28/pen/RwgPoaR

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @mtodd ,

    Materialize is setting the select elements to have the css property display: none, why I do not know!

    We don't offer a styling integration for Materialize. You'll have to go through and manually override the styles that it is providing that affect SearchBuilder.

    Thanks,
    Sandy

  • mtoddmtodd Posts: 9Questions: 0Answers: 0

    Thanks @sandy

    I was just about to post here it's line 4 of the select stylesheet. I did an override of .dtsb-searchBuilder select {display: inline-block} and it fixed it. Now I just have to find the Safari patch and I'll be set. Thank you all for pitching in and helping find the issue. I'm really grateful and it's nice to know there is help when you need it.

  • sandysandy Posts: 913Questions: 0Answers: 236
    edited August 2021

    Hi @mtodd ,

    No worries!

    The safari fix is in the nightly builds. The fix will be available in the next SearchPanes release which we hope will be in the next few weeks. In the mean time you can just use that link in your script tag.

    Thanks,
    Sandy

  • mtoddmtodd Posts: 9Questions: 0Answers: 0
    edited September 2021

    Hi @sandy,

    Do you know if this fix has been released yet? Also, are you saying it will be in SearchPanes? I don't think we use SearchPanes or load that extension. Will I need to include that to make the Custom Search Builder work?

    Thanks,

    Michael

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @mtodd ,

    This fix has been released yes, you can get it from the latest cdn file.

    No you won't need SearchPanes. Sorry about that I must have got mixed up when typing my response.

    Thanks,
    Sandy

  • mtoddmtodd Posts: 9Questions: 0Answers: 0

    @sandy

    Thank you very much!

    Michael

Sign In or Register to comment.