How to enqueue a script depending on another script ?

  • Hi,

    I created a librarie that I’m trying to load before loading a specific page script which will use functions of this librarie :

    I tried some ways.
    First I tried to pass the second script in footer and add the handle of the first script in its dependencies : 

    add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
function add_theme_scripts() {
    wp_enqueue_script( 'from-side', get_template_directory_uri() . '/libs/gway/from-side.js', array( 'jquery' ), null );
    if ( is_page_template( 'page-projects.php' ) ) {
        wp_enqueue_script( 'gw_projects', get_template_directory_uri() . '/libs/gway/gw_projects.js', array( 'jquery', 'from-side' ), null, true );
    }
}

    But I got the error : Uncaught ReferenceError: fs_init is not defined
    So here, the gw_projects.js script is still loaded before from-side.js (where the function fs_init is declared).

    I tried to call two add_action() functions with priorities : 

    add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
function add_theme_scripts() {
    wp_enqueue_script( 'from-side', get_template_directory_uri() . '/libs/gway/from-side.js', array( 'jquery' ), null );
}

add_action( 'wp_enqueue_scripts', 'add_theme_script_after', 100);
function add_theme_script_after(){
    if ( is_page_template( 'page-projects.php' ) ) {
        wp_enqueue_script( 'gw_projects', get_template_directory_uri() . '/libs/gway/gw_projects.js', array( 'jquery', 'from-side' ), null, true );
    }
}

    But I still get the same error.
    Is there a solution to force the ‘from-side.js’ script to be loaded before ‘gw_projects.js” ?

    Thank you in advance,

    N.

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

  • Create a function to enqueue the scripts, they load in the order you place them:

    
// enqueue styles and scripts
function theme-name_scripts_styles() {
  wp_enqueue_script('name', get_template_directory_uri() . '/library/js/script.min.js', array('jquery'),'1.0', true );
  wp_enqueue_script('script2', get_template_directory_uri() . '/library/js/2.js', array('jquery'),'', true );
 
  // Loads theme JavaScript file LAST.
  wp_enqueue_script('themejs', get_template_directory_uri() . '/library/js/theme.js', array('jquery'),'0', true );

}
add_action('wp_enqueue_scripts', 'theme-name_scripts_styles');
    Thread Starter Nox

    (@profnox)

    @jaycbrf this is exactly what I tried in the first example.
    It didn’t work. :/

    Moderator bcworkz

    (@bcworkz)

    The order enqueued does not necessarily relate to the order listed on the page. WP rearranges the output references based on the dependency arguments. Include the script handle in the dependency array of any scripts the current script is dependent on. I see you’ve done that, which is correct. Check your page source to verify the proper loading order. As one is footer loaded and the other not, the file references are most likely in the correct order.

    If the order on the page is correct, the not defined error is due to something in the script files causing scripts to run in the wrong order. For example, perhaps a dependency is wrapped in a .ready() function but the referencing script is not. This will cause the referencing script to run before .ready() runs.

    Thread Starter Nox

    (@profnox)

    Hi @bcworkz,

    Sadly, it’s actually the opposite.

    The script that I tried to pass in first posisition (the library) contains only functions which are not declared in a “on document ready” like method. They’re only surrounded with the jQuery handle function

    (function($) { ... })( jQuery );

    The second one is used for the treatment of animations on this specific “projects page”, and calls function of my lib : here the entiere script is surrounded in a ready function :

    (function($) { $('document').ready(function(){ ... }) })( jQuery );

    So its content should normaly be loaded after the first script (even after the entier DOM initialization).

    • This reply was modified 6 years, 5 months ago by Nox.
    Thread Starter Nox

    (@profnox)

    My own response make me figure out that the problem came from the jQuery handle function. I presume that all the function called inside it aren’t considered as declared.

    I removed it, and transform all $ symbols in my script into ‘jQuery’.
    And it worked…

    Maybe it exists a more correct alternative to use the $ symbol ?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to enqueue a script depending on another script ?’ is closed to new replies.