Enqueue scripts not working

  • Resolved CAShadle

    (@cashadle)


    11 years, 4 months ago

    For awhile, I’ve been loading my scripts through the header.php file. I wanted to get with WordPress conventions and load all my scripts through the functions.php file instead.

    So I moved everything over to my functions.php file. I registered and enqueued a few styles and they work fine. I did the same with a few custom scripts and none of them work. They all work when placed back into the header.php file.

    It looks like the .js file is being loaded, but it throws up an error:

    Uncaught TypeError: undefined is not a function

    That points to the 11th line of that specific JS file which has this in it:

    jQuery('#desk1').powerTip({ manual: true });

    Each of these JS files starts with:
    jQuery(document).ready(function(){

    I looked and jquery.js is only being loaded once. Judging by the console, jQuery is loaded first before any of the other javascript files.

    As I mentioned earlier, these scripts all work just fine on the test site while they are called from the header.php file. Once I moved them into the functions.php file, they stopped working. Any help would be greatly appreciated!

Viewing 14 replies - 1 through 14 (of 14 total)
  • Josh

    (@josh401)

    11 years, 4 months ago

    Try this instead:

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

    $('#desk1').powerTip({ manual: true });
});

    What is the code you are using to enqueue? Does it call (and link to) the script in the page source?

    Thread Starter CAShadle

    (@cashadle)

    11 years, 4 months ago

    Same error with the updated code. To enqueue:

    wp_register_script('wbosecondlayoutjs', get_site_url() . '/wp-content/floorplans/wbo/js/tipinfo2.js');

if (is_page('wbo-second-floor-layout')) {
	wp_enqueue_script('wbosecondlayoutjs');
}

    The tipinfo.js is showing up in the page source and I can click through to view the JS file. So it’s there, the page just isn’t able to do anything with it.

    Hassan Akhtar

    (@khaxan)

    11 years, 4 months ago

    Hi. I think you are facing this problem because conditional functions like is_page() are not available at the time of enqueuing. For debuging you should replace your code with this:

    wp_register_script('wbosecondlayoutjs', get_site_url() . '/wp-content/floorplans/wbo/js/tipinfo2.js');

if (1 || is_page('wbo-second-floor-layout')) {
	wp_enqueue_script('wbosecondlayoutjs');
}

    If the script start working properly then it would mean that the problem is indeed being caused by the is_page() conditional.

    Moreover, if you are adding this code directly to your functions.php file then it won’t work. You need to add it in a function like so:

    function prefix_enqueue_script() {
	wp_register_script('wbosecondlayoutjs', get_site_url() . '/wp-content/floorplans/wbo/js/tipinfo2.js');

	if (1 || is_page('wbo-second-floor-layout')) {
		wp_enqueue_script('wbosecondlayoutjs');
	}
}
add_action('wp_enqueue_scripts' 'prefix_enqueue_script');
    Thread Starter CAShadle

    (@cashadle)

    11 years, 4 months ago

    It looks like the is_page() is working.

    I have two styles being enqueued there as well that I just omitted from the code I posted. They both work and only get applied to that page as specified.

    Here is the entire function for all the styles / scripts. All of the styles work, even under the conditional is_page(). Certain scripts work, like the googleanalytics.js, ga-downloads.js, and touchmenus.js.

    http://pastebin.com/HWuPrbej

    Hassan Akhtar

    (@khaxan)

    11 years, 4 months ago

    Can I see the page?

    Thread Starter CAShadle

    (@cashadle)

    11 years, 4 months ago

    Unfortunately, the site is an internal website and can’t be accessed externally. Anything specific you want me to pull from it?

    Hassan Akhtar

    (@khaxan)

    11 years, 4 months ago

    You should look at the source code of the page, copy the full path of the script and load it in your browser to see if it works.

    Also, you should be handling dependencies by changing the third argument of wp_enqueue_script().

    Thread Starter CAShadle

    (@cashadle)

    11 years, 4 months ago

    Yup, the scripts are showing up in the source code and following the path takes me to them.

    I will go ahead and add the dependencies to the third argument as well.

    Is there anything else I could check to see why the scripts aren’t working?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 4 months ago

    What do you mean by “aren’t working”? Have you checked the browser’s console log for general debugging errors (different to before)?

    Thread Starter CAShadle

    (@cashadle)

    11 years, 4 months ago

    As mentioned in the first post, the console shows the following error:

    Uncaught TypeError: undefined is not a function

    Which is just referring to the 11th line of the script:

    jQuery('#desk1').powerTip({ manual: true });

    This script worked fine before when placed inside the header.php file. I’ve tried changing jquery to $ as another user posted above with no luck. Could there be something loading out of order? Not sure what else to check.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 4 months ago

    Could there be something loading out of order?

    Yes, it’s really difficult for us to explore your issue without seeing a page with the problem.

    Thread Starter CAShadle

    (@cashadle)

    11 years, 4 months ago

    Understandable, I’m just running out of things to try at this point. I’ve checked and it looks like jQuery is showing up in the header before any of the scripts.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 4 months ago

    Yes it’s more likely that the file with the “powerTip” method does not exist on the page at the time it’s called.

    Thread Starter CAShadle

    (@cashadle)

    11 years, 4 months ago

    I feel stupid now…

    That fixed it. Looks like I registered the powerTip.js file but never enqueued it for the page.

    First day back from vacation at work, so maybe that’s why I missed it 😉

    Thanks to everyone for the help!

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Enqueue scripts not working’ is closed to new replies.