"Uncaught TypeError: Cannot read property 'fn' of undefined"

phil_c64

Hello,
I am trying to replicate the date min/max search as on https://datatables.net/extensions/datetime/examples/integration/datatables.html over on a test site https://form.kingfisher.design/afternoon-tea-bookings/.

The relevant html/css/js has been included however I'm getting an error in console "Uncaught TypeError: Cannot read property 'fn' of undefined" which is the following. Could anyone advise what to change this too? Many thanks.

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = minDate.val();
        var max = maxDate.val();
        var date = new Date( data[4] );

        if (
            ( min === null && max === null ) ||
            ( min === null && date <= max ) ||
            ( min <= date   && max === null ) ||
            ( min <= date   && date <= max )
        ) {
            return true;
        }
        return false;
    }
);

tangerine

var minDate, maxDate;

Is your code initialising those variables?

tangerine

Sorry, I meant "defining".

colin

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

phil_c64

Hi Tangerine,

I copied the code "as is" from the demo into https://form.kingfisher.design/wp-content/themes/formidable/js/dataTables-searchDate.js

The full snippet is as the following so minDate, maxDate are being defined in the document.ready function below it.

I'm slightly confused as to why all the syntax isn't in the document.ready as it didn't look right to me but I'm veyr much still learning js.

var minDate, maxDate;

// Custom filtering function which will search data in column four between two values
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = minDate.val();
        var max = maxDate.val();
        var date = new Date( data[4] );

        if (
            ( min === null && max === null ) ||
            ( min === null && date <= max ) ||
            ( min <= date   && max === null ) ||
            ( min <= date   && date <= max )
        ) {
            return true;
        }
        return false;
    }
);

jQuery(document).ready(function($) {

    // Create date inputs
    minDate = new DateTime($('#min'), {
        format: 'MMMM Do YYYY'
    });
    maxDate = new DateTime($('#max'), {
        format: 'MMMM Do YYYY'
    });

    // Refilter the table
    $('#min, #max').on('change', function () {
        table.draw();
    });

} );

Thanks for your time

allan

Try changing the $ to jQuery. It could be that you've released the $ variable (jQuery.noConflict() for example).

The search function isn't in document.ready because it doesn't depend upon the DOM being ready. It just gets added to the array (.push(...)) and is only then actually executed when the DataTable is initialised (which will happen when the document is ready).

Allan

phil_c64

Hi Allan,

Thanks for the explanation too. Tried jQuery instead but it's still throwing a hissy fit!

Can give you admin access if you don't mind if quicker.

phil_c64

Moved inside the document.ready and it's now not showing the same error. But doesn't work. I suspect a date format mismatch.

var minDate, maxDate;

jQuery(document).ready(function($) {

    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var min = minDate.val();
            var max = maxDate.val();
            var date = new Date( data[4] );

            if (
                ( min === null && max === null ) ||
                ( min === null && date <= max ) ||
                ( min <= date   && max === null ) ||
                ( min <= date   && date <= max )
            ) {
                return true;
            }
            return false;
        }
    );

    // Create date inputs
    minDate = new DateTime($('#min'), {
        format: 'MMMM Do YYYY'
    });
    maxDate = new DateTime($('#max'), {
        format: 'MMMM Do YYYY'
    });

    // Refilter the table
    $('#min, #max').on('change', function () {
        table.draw();
    });

} );

colin

Please can you create a test case. See my reply above for instructions on how to do that,

Colin

phil_c64

Hi Colin,
Sorry i didn't see your earlier reply hence me replying afterwards

I have got this fixed and will post asap once it's ready