wp_enqueue JavaScript in child-theme (ReferenceError) using Search & Go

This is my first post here, so I hope I pasted the code well and you’ll stand by interpreting the problem.

I have deregistered and dequeued two scripts in my childtheme. When removing and adding only the first script (listing.js) all works fine, no problem. But when I also remove and add more script the page becomes dysfunctional and I get reference errors.

Here’s a screenshot of what my debug plugin gives me

Here’s the relevant part of my functions.php in childtheme:

    function remove_script() {
    wp_deregister_script( 'search_and_go_elated_listings' );
    wp_dequeue_script(  'search_and_go_elated_listings' );

    wp_deregister_script( 'search_and_go_elated_third_party' );
    wp_dequeue_script(  'search_and_go_elated_third_party' );

    wp_deregister_script( 'search_and_go_elated_modules' );
    wp_dequeue_script(  'search_and_go_elated_modules' );

    wp_deregister_script( 'search_and_go_elated_blog' );
    wp_dequeue_script(  'search_and_go_elated_blog' );

    wp_deregister_script( 'eltd-like' );
    wp_dequeue_script(  'eltd-like' );
}
add_action( 'wp_print_scripts', 'remove_script', 20 );

function add_script() {
    wp_enqueue_script( 'bijles_search_and_go_elated_listings', get_stylesheet_directory_uri() . '/assets/js/listings.js', array('jquery', 'underscore', 'jquery-ui-autocomplete'), false, true );
    wp_enqueue_script( 'bijles_search_and_go_elated_third_party', get_stylesheet_directory_uri() . '/assets/js/third-party.min.js', array('jquery'), false, true  );
    wp_enqueue_script( 'bijles_search_and_go_elated_modules', get_stylesheet_directory_uri() . '/assets/js/modules.js', array('jquery'), false, true  );
    wp_enqueue_script( 'bijles_search_and_go_elated_blog', get_stylesheet_directory_uri() . '/assets/js/blog.min.js', array('jquery'), false, true  );
    wp_enqueue_script( 'bijles_eltd-like', get_stylesheet_directory_uri() . '/assets/js/like.min.js', array(), false, true  );
};
add_action( 'wp_enqueue_scripts', 'add_script', 100);

Similar but unanswered question can be found here:

Hope you all can help me out. I’ve been learning but can’t figure this out myself!

ADDED (29-6-2016):

This is what I found searching for “search_and_go_elated_listings” in parent theme. functions.php:

if ( ! function_exists( 'search_and_go_elated_listing_assets' ) ) {

    function search_and_go_elated_listing_assets() {

        wp_enqueue_style( 'search_and_go_elated_listings', ELATED_ASSETS_ROOT.'/css/listings.min.css' );
        wp_enqueue_script( 'search_and_go_elated_listings', ELATED_ASSETS_ROOT.'/js/listings.min.js', array('jquery', 'underscore', 'jquery-ui-autocomplete'), false, true );

        if(search_and_go_elated_is_responsive_on()) {
            wp_enqueue_style( 'search_and_go_elated_listings_responsive', ELATED_ASSETS_ROOT.'/css/listings-responsive.min.css' );
        }

    }

    add_action( 'wp_enqueue_scripts', 'search_and_go_elated_listing_assets' );

}

This is what I found searching for “search_and_go_elated_modules” in parent theme:

wp_enqueue_script('search_and_go_elated_modules', ELATED_ASSETS_ROOT.'/js/modules.min.js', array('jquery'), false, true);

Besides wp_enqueue_script, I also found a couple of instances of wp_localize_script for this handle.

Hope this helps!

ADDED (30-6-2016):

In parent wp_localize_script is used 6 times in framework belonging to the theme, which I will not post for now. It is used twice in functions.php, were we also see “eltdGlobalVars”, which is mentioned in one of the errors. Please see below:

if(!function_exists('search_and_go_elated_get_global_variables')) {
    /**
     * Function that generates global variables and put them in array so they could be used in the theme
     */
    function search_and_go_elated_get_global_variables() {

        $global_variables = array();
        $element_appear_amount = -150;

        $global_variables['eltdAddForAdminBar'] = is_admin_bar_showing() ? 32 : 0;
        $global_variables['eltdElementAppearAmount'] = search_and_go_elated_options()->getOptionValue('element_appear_amount') !== '' ? search_and_go_elated_options()->getOptionValue('element_appear_amount') : $element_appear_amount;
        $global_variables['eltdFinishedMessage'] = esc_html__('No more posts', 'search-and-go');
        $global_variables['eltdMessage'] = esc_html__('Loading new posts...', 'search-and-go');

        $global_variables = apply_filters('search_and_go_elated_js_global_variables', $global_variables);

        wp_localize_script('search_and_go_elated_modules', 'eltdGlobalVars', array(
            'vars' => $global_variables
        ));

    }

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

if(!function_exists('search_and_go_elated_per_page_js_variables')) {
    /**
     * Outputs global JS variable that holds page settings
     */
    function search_and_go_elated_per_page_js_variables() {
        $per_page_js_vars = apply_filters('search_and_go_elated_per_page_js_vars', array());

        wp_localize_script('search_and_go_elated_modules', 'eltdPerPageVars', array(
            'vars' => $per_page_js_vars
        ));
    }

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

ADDED (1-7-2016):

Several searches for the definition of eltd.modules.listings on line 4 but found nothing. First 10 lines of listings.js:

(function ($) {
    'use strict';
    var listings = {};
    eltd.modules.listings = listings;

    listings.eltdOnDocumentReady = eltdOnDocumentReady;
    listings.eltdOnWindowLoad = eltdOnWindowLoad;
    listings.eltdOnWindowResize = eltdOnWindowResize;

I enqueued the child script the right way and made the first Reference Error (eltdGlobalVars) disappear as follows:

In functions.php in child I removed lines that dequeue the script “search_and_go_elated_listing”. Then I enqueued it using a copy of the function with the same name as the pluggable function in parent: “search_and_go_elated_listing_assets”. Within this copy I modified the location of script to location in childtheme and I made sure to recognize the handle, adding “child_” to it.

It looks like this:

function search_and_go_elated_listing_assets() {

    wp_enqueue_style( 'search_and_go_elated_listings', ELATED_ASSETS_ROOT.'/css/listings.css' );
    wp_enqueue_script( 'child_search_and_go_elated_listings', get_stylesheet_directory_uri() . '/assets/js/listings.js', array('jquery', 'underscore', 'jquery-ui-autocomplete'), false, true );

    if(search_and_go_elated_is_responsive_on()) {
        wp_enqueue_style( 'search_and_go_elated_listings_responsive', ELATED_ASSETS_ROOT.'/css/listings-responsive.min.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'search_and_go_elated_listing_assets' );

Then I also copied the pieces of script were “search_and_go_elated_lising” is mentioned, changing it’s handle to “child_search_and_go_elated_lising”. In example below in combination with the variable GlobalVars, menioned in the original error:

function search_and_go_elated_get_global_variables() {

    $global_variables = array();
    $element_appear_amount = -150;

    $global_variables['eltdAddForAdminBar'] = is_admin_bar_showing() ? 32 : 0;
    $global_variables['eltdElementAppearAmount'] = search_and_go_elated_options()->getOptionValue('element_appear_amount') !== '' ? search_and_go_elated_options()->getOptionValue('element_appear_amount') : $element_appear_amount;
    $global_variables['eltdFinishedMessage'] = esc_html__('No more posts', 'search-and-go');
    $global_variables['eltdMessage'] = esc_html__('Loading new posts...', 'search-and-go');

    $global_variables = apply_filters('search_and_go_elated_js_global_variables', $global_variables);

    wp_localize_script('child_search_and_go_elated_modules', 'eltdGlobalVars', array(
        'vars' => $global_variables
    ));

}

add_action('wp_enqueue_scripts', 'search_and_go_elated_get_global_variables');

Second Reference Error (eltd) is solved by rightly prioritizing the actions adding the scripts. This is obvious now I understand it: Make sure that variables are defined before they are referenced!

Since I’m enqueueing several scripts in functions.php in child the other might have been changed with respect to the parent. So in order to solve the reference error in listings.js I made sure it was enqueued later than the other scripts (later than modules.js to be specific).