Uncaught TypeError: Cannot read property 'ext' of undefined

weinan

I am using datatables on my WordPress website. However, when I tried to use the custom filter for my age column, I got an error saying "Cannot read property 'ext' of undefined", how can I fix it?
here is the live site: http://humstaging.byu.edu/cambodianoralhistories/

weinan

here is my code '''

        jQuery(document).ready(function() {
            var table = jQuery('#myTable').DataTable(
                {
                    searchPane:{
                        columns:[':contains("Gender")',':contains("Birth Province")',':contains("story")',]
                        , threshold: 0
                    }
                }
            );

            // Event listener to the two range filtering inputs to redraw on input
            jQuery('#min, #max').keyup( function() {
                table.draw();
            } );
        } );


        jQuery.fn.dataTable.ext.search.push(
                        function( settings, data, dataIndex ) {
                            var min = parseInt( $('#min').val(), 10 );
                            var max = parseInt( $('#max').val(), 10 );
                            var age = parseFloat( data[6] ) || 0; // use data for the age column

                            if ( ( isNaN( min ) && isNaN( max ) ) ||
                                ( isNaN( min ) && age <= max ) ||
                                ( min <= age   && isNaN( max ) ) ||
                                ( min <= age   && age <= max ) )
                            {
                                return true;
                            }
                            return false;
                        }
                    );

'''

weinan

I am using facetwp to display my data
'''
<br/>



<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/preview/searchPane/dataTables.searchPane.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
content: " \25B4\25BE"
}
</style>

Minimum age:
Maximum age:

<?php while ( have_posts() ): the_post(); ?> <?php echo pods( 'interviewee', get_the_id() )->template( 'Interviewee Archive 1' ); ?> <?php endwhile; ?>

	ឈ្មោះ Name	ការថតសំឡេង Audio	ប្រតិចារិក Transcript	ការបកប្រែ Translation	ថ្ងៃសម្ភាសន៍ Interview Date	អាយុពេលសម្ភាសន៍ Age at Interview	story	Gender	Birth Province

<?php echo facetwp_display( 'pager' ); ?>
'''

kthorngren

One problem is you are loading jquery.js more than once. You have it on line 52 then on line 326. You only want to load it once. Fixing this may solve your problem.

Kevin

weinan

Thorngren, thank you for replay.
I have removed one but still doesn't work, do you have any other ideas?
thanks

kthorngren

Maybe jQuery.fn.dataTable.ext.search.push(...) on line 77 is being executed before you load datatables.js on line 327. You will want to execute it after Datables has been loaded. Maybe move all the JS includes starting at line 327 between line 53 and 54. Load order is important with Javascript.

Kevin

weinan

Thank you Kthorngren, that is the problem.
However, My age filter still doesn't work and there is no error message, do you have any recommendations to fix it or to debug?
Thank you again

kthorngren

I don't see anything obvious. I would start with some console.log statements to debug the problem. I would start with placing one in the search plugin, for example:

          jQuery.fn.dataTable.ext.search.push(
                            function( settings, data, dataIndex ) {
                                var min = parseInt( $('#min').val(), 10 );
                                var max = parseInt( $('#max').val(), 10 );
                                var age = parseFloat( data[6] ) || 0; // use data for the age column

                                console.log(min, max, age);                     

                                if ( ( isNaN( min ) && isNaN( max ) ) ||
                                    ( isNaN( min ) && age <= max ) ||
                                    ( min <= age   && isNaN( max ) ) ||
                                    ( min <= age   && age <= max ) )
                                {
                                    return true;
                                    
                                }
                                return false;
                                
                            }
                        );

This will show that your keyup event is working and the values being compared. Should lead you to the next troubleshooting steps.

Kevin