Calling jQuery in WordPress $ is not function

Question

This was previously working fine for me but I think something changed how jQuery is being enqueued in WordPress.

$(document).ready(function () {

$('#dialog-modal').dialog({
    modal: true,
    autoOpen: false,
    closeOnEscape: false,
    bgiframe: true,
    title: 'Please Confirm',
    buttons: {
            "Ok!": function() {
                    $(this).dialog("close");
            }
    }
}); 

$("[name='records']").on('change',function(e){
var selectedValue = $(this).val();
if(selectedValue==2) {

        $('#dialog-modal').dialog('open');
    }
});

});

My console displays :

Uncaught TypeError: $ is not a function

I referenced this question:

TypeError: $ is not a function when calling jQuery function

But I still don't know how to wrap this correctly.

Have you enqueued the jQuery library in that page or header? — Prateek Verma, Feb 16 '17 at 06:31

score 0 · Accepted Answer · answered Feb 15 '17 at 22:23

0

You assign the $ to jQuery like this:

/**
 *
 * Description
 *
 */

( function( window, $, undefined ) {

    'use strict';


    $( document ).ready( function(  ) {

        //what is this                                               
        $('#dialog-modal').dialog({
            modal: true,
            autoOpen: false,
            closeOnEscape: false,
            bgiframe: true,
            title: 'Please Confirm',
            buttons: {
                "Ok!": function() {
                    $(this).dialog("close");
                }
            }
        } ); 


        // what is this
        $("[name='records']").on('change',function(e){
            var selectedValue = $(this).val();
            if(selectedValue==2) {

                $('#dialog-modal').dialog('open');
            }
        } ); 



    } ); //* end ready


} )( this, jQuery );

answered Feb 15 '17 at 22:23

Christina

34,296
17
83
119

This doesn't show any console error, but it doesnt fire the modal anymore. I suspect that I was using a newer version of jquery prior and that wordpress's version (jquery.js?ver=1.12.4) is not working with this. Frustrating. I think I have to do some more digging. I will follow up. – Zack Bluem Feb 16 '17 at 01:07
You also have to register the main script, not just enqueue it, and then you call the dependency when you enqueue this script. – Christina Feb 16 '17 at 03:28
Thanks. Luckily I had a working backup. I was also missing jquery-ui.css, which was preventing the modal from appearing after the script was fixed. Your solution worked. – Zack Bluem Feb 16 '17 at 14:31

score 0 · Answer 2 · answered Feb 15 '17 at 22:24

Try jQuery instead of $. Wordpress generally refences it as jQuery

As this:

jQuery(document).ready(function () {

jQuery('#dialog-modal').dialog({
    modal: true,
    autoOpen: false,
    closeOnEscape: false,
    bgiframe: true,
    title: 'Please Confirm',
    buttons: {
            "Ok!": function() {
                    jQuery(this).dialog("close");
            }
    }
}); 

jQuery("[name='records']").on('change',function(e){
var selectedValue = $(this).val();
if(selectedValue==2) {

        jQuery('#dialog-modal').dialog('open');
    }
});

});

I hope this works,,

I had tried that initially but as my comment above states I can't exactly say at the moment. I'm going to recheck my previous version to see if that's the issue now. — Zack Bluem, Feb 16 '17 at 01:09

Calling jQuery in WordPress $ is not function

2 Answers2