0

If jQuery is included in WordPress, why do I get 'jQuery is undefined' errors? I cannot find a tutorial (one would think this would be in the WordPress docs) on how to use jQuery in modern versions of WordPress (I'm using 5.7). Do I need to enqueue anything? Deregister anything? Do anything in functions.php. I've tried:

var $j = jQuery.noConflict();
jQuery(document).ready(function($)
(function($) {

Is there documentation anywhere that explains the basic methods of using jQuery in my WordPress code? Everything I can find on the Interwebs is old or doesn't solve the issue.

Thanks.

UPDATE (per Jos Faber's recommendation), but still getting undefined error:

function hs_load_scripts() {
        wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'hs_load_scripts');
<script>
    const $ = jQuery.noConflict();
    $(function() {

        $('#servers').on('submit', function(){
            $.ajax({
                type: 'POST',
                url: ajax_url, 
                ...
2
  • 2
    You need to enqueue jquery. That's always been the case. Jul 8, 2021 at 4:10
  • wp_enqueue_script is actually special where you can do it on the fly as well I think. Rather than wp_enqueue_style, which should be included in an action am Jul 8, 2021 at 8:42

2 Answers 2

2

(I'm using 5.7.2) This is all you have to use: const $ = jQuery.noConflict();. However, you have to make sure the file you load is loaded after jQuery to prevent timing issues. So either make jQuery a dependency of your script like this:

function _jf_load_scripts()
{
        wp_register_script('main', get_template_directory_uri() . '/build/js/main.bundle.js', array('jquery'), MY_VERSION, TRUE);
        wp_enqueue_script('main');
}
add_action('wp_enqueue_scripts', '_jf_load_scripts');

Or enqueue jQuery upfront, like this:

function _jf_load_scripts()
{
        wp_enqueue_script('jquery');

        wp_register_script('main', get_template_directory_uri() . '/build/js/main.bundle.js', array(), MY_VERSION, TRUE);
        wp_enqueue_script('main');
}
add_action('wp_enqueue_scripts', '_jf_load_scripts');

When your scripts load after jQuery, any of the used methods you describe above should work.

2
  • I enqueued upfront like you suggested. The jQuery code is on the actual php/html page so no need to reference an external file. Still getting the errors so see my update above to see what I'm doing. So strange, I have jQuery running on multiple sites, it's just this one that is not working.
    – breadwild
    Jul 8, 2021 at 13:38
  • Might still be a timing issue. If jQuery is not available, it's probably not loaded yet. You could try to check with an interval: setInterval(() => console.log($ || 'not available'), 1000);
    – Jos
    Jul 8, 2021 at 17:48
1

I hate to admit this (I'm might get thrown off StackExchange for being such a dolt). Turns out...drum roll...I forgot get_header() on my page. No header, no nothing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.