Pass a php string to a javascript variable

Question

I need to pass a php string that is stored in $attr['footer_caption'] inside a shortcode function to a js file where the highcharts are initialized.

$fields = array(

        array(
            'label' => esc_html( 'Footer label' ),
            'description' => esc_html( 'Choose the footer label' ),
            'attr' => 'footer_caption',
            'type' => 'text',
        ),


public static function shortcode_ui_chart( $attr, $content, $shortcode_tag ) {

    $attr = shortcode_atts( array(
        'chart' => null,
        'footer_caption' => null,
    ), $attr, $shortcode_tag );

I've been reading about localize script but couldnt get it to work. Is there a simple way to perfom this? I want the string from that php array in this variable:

    Highcharts.setOptions({
  chart: {
          type: 'column',
          events: {
              load: function () {
                var teste 'WANT TO PASS $attr['footer_caption'] HERE'
                var label = this.renderer.label(teste)

Carsten Schmitt · Accepted Answer · 2017-04-27 12:21:05Z

1

You can use the wp_localize_script to pass a variable to your javascript.

Here is an example:

wp_register_script('your_script_name', 'path/to/script.js');
$variables = array (
    'footer_caption' => $attr['footer_caption'],
);
wp_localize_script('your_script_name', 'js_object_name', $variables );
wp_enqueue_script('your_script_name');

Then you can acces to this variable by:

js_object_name.footer_caption

answered Apr 27, 2017 at 12:21

Carsten Schmitt

7711 bronze badges

Add a comment |

ahendwh2 · Accepted Answer · 2017-05-04 07:39:50Z

1

Can you post how you tried to use localize_script? Because i use the function often for passing PHP vars to JavaScript and it always worked.

Another way would be to echo the variable in shortcode_ui_chart so you later can use it in your script:

echo '<script type="text/javascript">var footer_caption = "' . $attr['footer_caption'] . '"</script>';

With this code you can use the variable footer_caption in your javascript.

EDIT: See comments for code explanation

var chart1 = Highcharts.chart({
    chart: {
        events: {
            load: function () {
                var caption 'footer_caption'
                var label = this.renderer.label(caption)
            }
        }
    }
});

edited May 4, 2017 at 7:39

answered Apr 27, 2017 at 11:14

ahendwh2

6964 silver badges9 bronze badges

Thanks it worked, but i've got one more problem. The js file always outputs the last value of 'footer_caption' in the footer of all charts

user117473
– user117473

2017-05-03 14:29:22 +00:00
Commented May 3, 2017 at 14:29
I don't know Highcharts, but according to their documentation about setting options you can set options global (for all charts) or local (for one specific chart). You are setting the options global, so it affects all charts. You have to set the footer local, if it should only be shown on one chart.

ahendwh2
– ahendwh2

2017-05-04 07:31:56 +00:00
Commented May 4, 2017 at 7:31
See answer for js-code with local options

ahendwh2
– ahendwh2

2017-05-04 07:36:29 +00:00
Commented May 4, 2017 at 7:36

Add a comment |

Stack Exchange Network

Pass a php string to a javascript variable

2 Answers 2

Your Answer

Hot Network Questions

Pass a php string to a javascript variable

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions