Script not detecting jQuery correctly in Wordpress

Question

I have a timer script which I have loaded into Wordpress using the following method in functions.php

function timer_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_template_directory_uri() . '/quiz/js/timer.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'timer_scripts_method' );

The script itself starts and end with the following lines

(function () { [...] }).call(this);

I have attempted the following to get this working:

(function ($) { [...] }).call(this);  

(function () { [...] }).call(this)(jQuery);

jQuery.noConflict(); (function () { [...] }).call(this);

jQuery.noConflict(); (function () { [...] }).call(this)(jQuery);

The full JS code cane be found here (beautified) http://pastebin.com/X7py7ecb

And the console error I am getting is

Uncaught Error: [jQuery-runner] jQuery library is required for this plugin to work

I can also confirm that other JS libraries that have a dependancy on jQuery have loaded in fine.

Not being great at JS I feel like this is something really obvious, that I am missing.

It looks to me like the `timer.js` script you're using depends on the [jQuery Runner plugin](https://github.com/jylauril/jquery-runner), which you need to enqueue separately. — cpilko, May 23 '14 at 18:07
Sorry, should have mentioned, this is the jQuery Runner plugin, just renamed to timer.js — terrorfall, May 24 '14 at 11:29

mrbubbles · Accepted Answer · 2014-05-25T08:55:29.730

1

As @cpilko mentions in the comments, you'll need to enqueue the jQuery Runner plugin.

You could do that like this;

function timer_scripts_method(){

    wp_enqueue_script( 'jquery-runner', get_template_directory_uri() . '/js/jquery-runner.js', array('jquery') );
    wp_enqueue_script( 'quiz-timer', get_template_directory_uri() . '/quiz/js/timer.js', array('jquery', 'jquery-runner') );

}
add_action( 'wp_enqueue_scripts', 'timer_scripts_method' );

You shouldn't have to enqueue jQuery again, as this happens automatically.

edited May 25 '14 at 08:55

answered May 23 '14 at 19:58

mrbubbles

687
6
19

Sorry, should have mentioned, this is the jQuery Runner plugin, just renamed to timer.js – terrorfall May 24 '14 at 11:29
Ah I see. Have you checked that jQuery is loading correctly in the source? And where are you calling on the plugin? Is it in a separate .js file? – mrbubbles May 24 '14 at 18:46
Yep, can confirm jQuery is loading in correctly, the plugin is loaded in the individual Wordpress template page. http://somethingbigdev.co.uk/dhl-guide/f1-quiz – terrorfall May 24 '14 at 20:47
1

I've just tried this plugin myself and it doesn't seem to work even in a basic environment, with the simplest of initialisations. Try this plugin if it has the features you are looking for: https://github.com/robcowie/jquery-stopwatch – mrbubbles May 24 '14 at 21:19
Good to know it's not me! Thanks for the plugin suggestion, seems to do everything I need so will give it a try – terrorfall May 24 '14 at 21:28
That library is great. As a side question, how would I set the value of an input field from the JS? – terrorfall May 26 '14 at 21:55
1

Like this: http://stackoverflow.com/questions/7609130/set-the-value-of-a-input-field-with-javascript :D – mrbubbles May 27 '14 at 12:45

score 0 · Answer 2 · answered May 23 '14 at 18:10

0

change your code in function file like below :

function timer_scripts_method() {

    wp_enqueue_script('jquery');
    wp_enqueue_script(
        'custom-script',
        get_template_directory_uri() . '/quiz/js/timer.js');
}
add_action( 'wp_enqueue_scripts', 'timer_scripts_method' );

answered May 23 '14 at 18:10

Farhan

96
2
11

Surely this will attempt to load in jQuery again, the wp_enqueue_scripts allows you to pass in a jQuery dependency in the array. – terrorfall May 24 '14 at 11:34

Script not detecting jQuery correctly in Wordpress

2 Answers2