How to pass PHP values to js script in Wordpress using AJAX

Question

I have tried both wp_localize_script and wp_add_inline_script : it doesn't work the way I expect.

I have this in my plugin's PHP file (it is enqueued with wp_enqueue_scripts somewhere else but I don't need to write the code here right ?) :

        wp_register_script(
            'custom-profile-script',
            "{$this->plugin_url}js/custom-profile-plugin.js",
            array( 'jquery' ),
            null,
            false
        );

        wp_enqueue_script(
            'custom-profile-script'
        );

        wp_localize_script(
            'custom-profile-plugin',
            'wp_ajax',
            array( 
                'ajax_url' => admin_url( 'admin-ajax.php' ), 
                'ajaxnonce' => wp_create_nonce( 'ajax_post_validation' ),
                'plugin_url' => "url"
            )
        );
        wp_add_inline_script( 'custom-profile-plugin', 'const PHPVAR = ' . json_encode( array(
                'plugin_url' => "url"
        ) ), 'before' );

And then, in my js file :

var data = {
        action: 'custom_user_plugin_update_meta_rating_value', 
        security: wp_ajax.ajaxnonce
    };

$.post(wp_ajax.ajax_url, data, function(result) {

        console.log(wp_ajax);
        console.log(PHPVAR.plugin_url);

});

The first console log (related to wp_localize_script) is an object that contains "ajax_url" and "ajax_nonce" with the right values, but "plugin_url" doesn't appear and is UNDEFINED when I call it using wp_ajax.plugin_url.

The second console log (related to wp_add_inline_script) tells me that PHPVAR is not defined...

What I don't understand is why the first two values are passed correctly using localize script, but not the third one and, furthermore, why wp_add_inline_script doesn't work.

Papa_Ubu · Accepted Answer · 2021-04-19 10:22:02Z

2

The script needs to be registered in the footer for the PHP value to be passed, like this :

wp_register_script(
    'custom-profile-script',
    "{$this->plugin_url}js/custom-profile-plugin.js",
    array( 'jquery' ),
    null,
    true // register script in the footer
);

Instead of :

wp_register_script(
    'custom-profile-script',
    "{$this->plugin_url}js/custom-profile-plugin.js",
    array( 'jquery' ),
    null,
    false // default value of the wp_register_script function that registers script in header
);

answered Apr 19, 2021 at 10:22

Papa_Ubu

497 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhautik · Accepted Answer · 2021-04-19 10:28:40Z

1

You need to add wp_enqueue_script after wp_localize_script and also you add wrong handle to wp_localize_script check the below code.

wp_register_script(
    'custom-profile-script',
    "{$this->plugin_url}js/custom-profile-plugin.js",
    array( 'jquery' ),
    null,
    true
);

wp_localize_script(
    'custom-profile-script',
    'wp_ajax',
    array( 
        'ajax_url' => admin_url( 'admin-ajax.php' ), 
        'ajaxnonce' => wp_create_nonce( 'ajax_post_validation' ),
        'plugin_url' => "url"
    )
);

wp_enqueue_script(
    'custom-profile-script'
);

var data = {
    action: 'custom_user_plugin_update_meta_rating_value', 
    security: wp_ajax.ajaxnonce
};

$.post(wp_ajax.ajax_url, data, function(result) {
    console.log(wp_ajax);
    console.log(wp_ajax.plugin_url);
});

edited Apr 19, 2021 at 10:28

answered Apr 19, 2021 at 9:38

Bhautik

11.3k3 gold badges20 silver badges41 bronze badges

2 Comments

Papa_Ubu Over a year ago

thank you for your reply. I tried to put wp_enqueue_script after localize, but still the same result : wp_ajax.plugin_url is undefined...

Papa_Ubu Over a year ago

Okay I found the solution and you definetly put me on the track by talking about the declaring order : the script needs to be added to footer using true parameter in the enqueue_script function. I'll edit my question to write the answer

Collectives™ on Stack Overflow

How to pass PHP values to js script in Wordpress using AJAX

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related