Issue with wp_localize_script

Question

unfortunately I have not found a solution here and via google. I get the following error message when calling:

Uncaught ReferenceError: ait_php_var is not defined ../assets/js/ait_buttons.js?wp-mce-4940-20190515 line 2

add_action( 'wp_enqueue_scripts', 'ait_load_scripts' );
function ait_load_scripts() {
    $ait_pfad = plugin_dir_url( __FILE__ ) . '/assets/js/ait_buttons.js';
    $ait_add_options = 'here';
    // Enqueued script with localized data.
    wp_register_script('ait_js_script', $ait_pfad );
    wp_enqueue_script( 'ait_js_script', $ait_pfad );
    // Localize the script with new data
    wp_localize_script( 'ait_js_script', 'ait_php_var',
        array(
            'external_link' => __( 'External Link', 'aittec_language' ),
            'event_category' => __( 'Event Category', 'aittec_language' ),
            'internal_link' => __( 'Internal Link', 'aittec_language' ),
            'ackids' => $ait_add_options,
        )
    );
}

Here is the relevant (sample) snippet from the JS file:

// JavaScript Document //
alert( ait_php_var.ackids );

The file is in the correct folder, otherwise the error would not appear in line 2. The same error message also occurs when the other variable (e. g. external_link) is called in the same or similar form. I am looking forward to any help to solve the problem.

Answer 1

You should remove trailing slash / from 3rd line.

$ait_pfad = plugin_dir_url( __FILE__ ) . '/assets/js/ait_buttons.js';

this should be

$ait_pfad = plugin_dir_url( __FILE__ ) . 'assets/js/ait_buttons.js';

wp_plugin_dir() function returns url including a trailing slash ("/") so you should not add it again.

Please read wp_plugin_dir() function reference to learn more about this function.