SearchBuilder data selection incomplete

littleowl

I'm using SearchBuilder to set a partially predefined search on a large client-side table (data and condition, no value):

https://registrar.uark.edu/course-number-lookup.php

What I'm trying to do is have "Current Course Number" and "Starts With" selected, so the user can just start typing in the course number.

Once the page finishes rendering, the data selection displays ("Current Course Number"), but doesn't seem to be actually selected, as none of the other fields are active; something else has to be selected from the data dropdown, then things behave as expected.

I ran the "common issue check" in the debugger but it threw several jquery errors so I'm not sure what to paste in?

The browser console gives me this error:

Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

Code:

<script type="text/javascript">
        $('#courselookup').DataTable( {
    searchBuilder: {
        preDefined: {
            criteria: [
                {
                    data: 'CurrentCourseNumber',
                    condition: 'contains',
                }
            ]
        }
    },   
    dom: 'Qlfrtip'
});
</script>

colin

I'm not clear what the issue is, sorry. In this example here, I can type a string into the input element and it filters as expected without an error.

Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Colin

littleowl

Hello! I'm sorry, I thought I provided a link but it may not have stood out:

https://registrar.uark.edu/course-number-lookup.php

I've updated the initialization based on your example, but am having the same issue. This is a very large HTML table within the page (client-side not server-side, I guess).

kthorngren

I think the problem is the use of { "data": "currentCourseTitle" }, for the searchBuilder.preDefined.criteria.condition. It should be the th text. For example:

    searchBuilder: {
        preDefined: {
            criteria: [
                {
                    data: 'Current Course Title',
                    condition: 'contains',
                }
            ]
        }
    },  

See this example:
https://live.datatables.net/hexemewu/1/edit

Kevin

littleowl

Well, shoot! That does seem to fix it!

...although now there's a display issue where the Logic box covers the beginning of the data field.

Edit: Never mind! Error with the value placeholder declaration. Looks good now!