Localize script not working

Question

I am testing ajax in wordpress, and it basically works but I do not want the url to be hardcoded, so I tried using wp_localize_script to get an object to use, but I get an error saying: "ReferenceError: WPURLS is not defined" when alerting the siteurl in ajax_script.js.

functions.php

function my_scripts_method() {
    wp_enqueue_script(
        'ajax_script',
        get_stylesheet_directory_uri() . '/js/ajax_script.js',
        array( 'jquery' )
    );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

wp_localize_script('ajax_script', 'WPURLS', array( 'siteurl' => get_option('siteurl') ));

ajax_script.js

$(function () {

    $('#vru-btn').click(function() {
        // alert('code');
        $.post( 'wp-content/themes/wpcleantheme/ajax/test.php', function(data) {
            $('#vru-div').html(data);    
        });
    });;

    alert(WPURLS.siteurl);
});

Answer 1

You're calling wp_localize_script before the action that enqueues the script has run. Move the localize into the enqueue action, after the script is enqueued.

function my_scripts_method() {
    wp_enqueue_script(
        'ajax_script',
        get_stylesheet_directory_uri() . '/js/ajax_script.js',
        array( 'jquery' )
    );
    wp_localize_script('ajax_script', 'WPURLS', array( 'siteurl' => get_option('siteurl') ));
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

That said, you probably don't want to be directing requests directly to template files, as you won't have access to any of the WordPress API that way. Instead, direct requests to admin_url('admin-ajax.php'), and read up on using AJAX in Plugins.

Answer 2

Register the script, then localize it, then enqueue it. According to WordPress Codex

 // Register the script
 wp_register_script( 'some_handle', 'path/to/myscript.js' );

 // Localize the script with new data
 $translation_array = array(
'some_string' => __( 'Some string to translate', 'plugin-domain' ),
'a_value' => '10'
 );
 wp_localize_script( 'some_handle', 'object_name', $translation_array );

 // Enqueued script with localized data.
 wp_enqueue_script( 'some_handle' );