jQuery ReferenceError

@Nastia (from WP Chat)

I have following code in a template file: http://pastebin.com/crL0iKiE

But I want to split the jquery - bigger part move to another file and keep only few lines on the bottom (see my comments in the file)

when I do that, I get:

(index):189 Uncaught ReferenceError: CirclePlayer is not defined
at HTMLDocument. ((index):189)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at Function.ready (jquery.js?ver=1.12.4:2)
at HTMLDocument.K (jquery.js?ver=1.12.4:2)

How to make CirclePlayer defined? It's one of the files used in this circle mp3 player https://domprojects.com/project/flattemplate/dp_jpaudiocircle/ Originaly separated file, but In WP it doesn't work, or I haven't achieved that.

  • Vaughan

    Hi Karolina,

    Hope you're well?

    You could try enqueing the script by adding the following to your theme functions.php

    function wpmudev_load_Circleplayer() {
        wp_enqueue_script( 'circle-player', get_template_directory_uri() . '/js/circle-player.js', array('jquery') );
    }
    add_action( 'wp_enqueue_scripts', 'wpmudev_load_Circleplayer' );

    This assumes that you have the circle-player.js script inside your current theme folder /js folder

    /wp-content/themes/current_theme/js/circle-player.js

    Hope this helps

  • Panos

    Hi Karolina ,

    The preferred way to include scripts and set vars with php is, as you said, with wp_localize_script.

    I would prefere to calling the wp class partly displayed on the site

    There is no additional workload using the method if this is what you mean. Could you please clarify what you mean here?

    This is how I would do it according to the example found in the link you shared:
    https://domprojects.com/project/flattemplate/dp_jpaudiocircle/

    add_action( 'wp_enqueue_scripts', 'wpmudev_enqueue_circleplayer_scripts' );
    
    function wpmudev_enqueue_circleplayer_scripts(){
    
    	//Perhaps check for specific page
    	//for eg:
    	//if( !is_page( 185 ) ) return;
    
    	wp_enqueue_style( 'circleplayer-css', 'some/path/css/jplayer_audio.css' );
    
    	//some/path could be a plugin url: WP_PLUGIN_URL
    
    	wp_enqueue_script( 'jquery-jplayer', 'some/path/js/vendor/jplayer/jquery.jplayer.min.js', array(), '1.0.0', true );
    	wp_enqueue_script( 'circleplayer-transform2d', 'some/path/js/vendor/jplayer/jquery.transform2d.js', array(), '1.0.0', true );
    	wp_enqueue_script( 'circleplayer-grab', 'some/path/js/vendor/jplayer/jquery.grab.js', array(), '1.0.0', true );
    	wp_enqueue_script( 'circleplayer-player', 'some/path/js/vendor/jplayer/circle.player.js', array(), '1.0.0', true );
    
    	wp_register_script('jplayer', WP_PLUGIN_URL . '/jplayer/js/custom-jplayer.js', array('jquery-jplayer', 'circleplayer-player'));
    
    	//Set the params to use in file custom-jplayer.js
    	$params = array();
        $params['swfPath'] = WP_PLUGIN_URL . '/jplayer/js';
        $params['wmode'] = 'window';
    
        wp_localize_script('custom_jplayer', 'WP_jPlayer', $params);
    
        //in the custom-jplayer.js file:
        //WP_jPlayer.swfPath
        //WP_jPlayer.wmode
    	/*
        var myCirclePlayer = new CirclePlayer("#jquery_jplayer_2",{
            mp3:"song.mp3"
        },
        {
            swfPath:WP_jPlayer.swfPath,
            supplied:"mp3",
            cssSelectorAncestor:"#cp_container_2",
            wmode:WP_jPlayer.wmode
        });
    	*/
        wp_enqueue_script( 'custom_jplayer' );
    
    }

    This is just an example, but it shows how to enqueue the files, and to use the php values in the custom-jplayer.js file.

    Hope this helps !