Data not passing correctly with wp_localize_script

Question

I'm trying to pass PHP data to a JS script. I'm using the wp_localize_script function.

wp_register_script('googlechart', 'https://www.gstatic.com/charts/loader.js');
wp_register_script('mygaloochart_script', plugins_url('chart.js', __FILE__), array('googlechart'));

//I'm not using $atts directly for reasons
$dataToBePassed = array (
        'chart' => $atts['chart'],
        'element' => $atts['element'],
        'elementtype' => $atts['elementtype'],
        'title' => $atts['title']
);

wp_localize_script('mygaloochart_script', 'php_vars', $datatoBePassed);

wp_enqueue_script('googlechart');
wp_enqueue_script('mygaloochart_script');

This is the first line of the JS script mygaloochart_script:

console.log(php_vars.chart);

However, I get the following error in the console:

TypeError: php_vars is null

What am I doing wrong?

MD Ashik · Accepted Answer · 2018-01-28 18:21:13Z

2

The name of your array is $dataToBePassed. However you are passing $datatoBePassed in your wp_localize_script function. Big T, small t. PHP variable names are case sensitive.

edited Jan 28, 2018 at 18:21

MD Ashik

9,89310 gold badges56 silver badges61 bronze badges

answered Jan 28, 2018 at 17:22

Jesus del Valle

1415 bronze badges

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

1 Comment

Spencer Shattuck Over a year ago

To the people coming to this from tutsplus here is where the mistake began: code.tutsplus.com/tutorials/…

Ayanize · Accepted Answer · 2016-06-20 08:42:48Z

0

I am unable to comment due to my reputation. Just curious to ask, did you hook the function something like the below?

Update

function add_vars_to_js(){

wp_register_script('googlechart', 'https://www.gstatic.com/charts/loader.js');
wp_register_script('mygaloochart_script', plugins_url('chart.js', __FILE__), array('googlechart'));

//I'm not using $atts directly for reasons
$dataToBePassed = array (
        'chart' => $atts['chart'],
        'element' => $atts['element'],
        'elementtype' => $atts['elementtype'],
        'title' => $atts['title']
);

wp_localize_script('mygaloochart_script', 'php_vars', $datatoBePassed);

wp_enqueue_script('googlechart');
wp_enqueue_script('mygaloochart_script');
}

add_action('wp_enqueue_scripts', 'add_vars_to_js');

edited Jun 20, 2016 at 8:42

answered Jun 20, 2016 at 8:38

Ayanize

4951 gold badge7 silver badges24 bronze badges

7 Comments

user5455540 Over a year ago

I didn't. Is this necessary? It's not mentionned in the wp_localize_script doc.

user5455540 Over a year ago

What should be the syntax? The function called in my script is called drawChart() (sorry, new to Wordpress!).

Ayanize Over a year ago

Updated the answer. If the js is for admin area, add the hook like this add_action('admin_enqueue_scripts', 'add_vars_to_js');

user5455540 Over a year ago

I'm getting

Fatal error: Cannot redeclare add_vars_to_js() (previously declared in C:\wamp64\www\wordpress\wp-content\plugins\mygaloochart\chart.php:40) in C:\wamp64\www\wordpress\wp-content\plugins\mygaloochart\chart.php on line 40

Ayanize Over a year ago

This is an example of a function name. Try another name like olivier_function_js or whatever

|

Collectives™ on Stack Overflow

Data not passing correctly with wp_localize_script

2 Answers 2

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related