WordPress - 'jquery is not defined' problem

Question

Before I get flamed for posting this question when many similar questions have already been posted, I want to say that I've trawled through many, many questions/answers on Stackoverflow related to this issue but none of them actually solve my problem.

So, I'm taking the risk and posting another one.

I'm working in WordPress using a theme based on Bootstrap. It includes a Bootstrap modal window. I'm trying to trigger the modal window 'on page load' (rather than the user clicking on a button). I also want to set a cookie so the modal window only appears once.

jQuery is automatically loaded by the WP theme and I have checked (using View Page Source) and confirmed that jQuery is loaded in the head of the page.

In functions.php I have enqueued the scripts that load 'jQuery Cookie' and also trigger the modal window on page load:

function modal_scripts() {
    wp_enqueue_script( 'jq-cookie-js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery- 
        cookie/1.4.1/jquery.cookie.min.js', array(), false, true );
    wp_enqueue_script( 'modal-custom-js', get_stylesheet_directory_uri() . '/js/custom-modal.js', 
        array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'modal_scripts' );

custom-modal.js contains the script that triggers the modal and sets the cookie:

jQuery(function($) {

    $(window).load(function() {

        if(jquery.cookie('alreadyShown') === null) {

            setTimeout(function() {
                $('.the-modal').modal('show');
            }, 10000);

            jquery.cookie('alreadyShown', true, {expires: 7});

        }
    });
});

I've double-checked and all the files seem to be loading OK - jQuery in the head and 'jQuery Cookie' and 'custom-modal.js' in the footer.

However, I'm still getting this error:

custom-modal.js?ver=5.2.4:3 Uncaught ReferenceError: jquery is not defined
    at custom-modal.js?ver=5.2.4:3
    at dispatch (jquery.js?ver=1.12.4-wp:3)
    at r.handle (jquery.js?ver=1.12.4-wp:3)

Hoping someone can point out what I'm doing wrong. Many thanks.

Answer 1

Finally worked this out after many long hours (and thumping my head against the wall a few times).

Firstly, it seems the 'jQuery Cookie' plugin is out-of-date and no longer maintained. It has been replaced by JS-Cookie at GitHub - js-cookie

So I updated my enqueue scripts (functions.php) to JS-Cookie:

function modal_scripts() {
    wp_enqueue_script( 'js-cookie-js', get_stylesheet_directory_uri() . 
        '/js/js.cookie.js', array(), false, true );
    wp_enqueue_script( 'modal-custom-js', get_stylesheet_directory_uri() . 
        '/js/custom-modal.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'modal_scripts' );

Now my custom-modal.js was edited to read:

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

        var thecookie = Cookies.get('mymodal');

        if(!thecookie){

            setTimeout(function() {
                $('.the-modal').modal('show');
            }, 10000);

            Cookies.set('mymodal', 'true', { expires: 7 })

       }else{
            $('.the-modal').modal('hide');
        }
    });
})(jQuery);

Guess what?. It works.

I'm not a 'gun' coder so my code (above) could probably be improved but, for now, it does the job.

Happy days!