How to call javascript function (jquery) in a shortcode?

Question

Before asking here, I've searched a while and found a tutorial about creating a wordpress plugin with shortcode and javascript calling.

But I'm not able to make it work on my side. The tutorial is here

Basically it is supposed to add a teletype terminal displaying predefined strings. I'm able to follow it to the part where the terminal is drawn. But I do not see where in the code, we are calling the javascript function tomake the "animation". There's a zip to download with all the sources, and teletype javasources (not minimized) can be found here

So, my problem is that I do not catch how to call a javascript/jquery function from a php file.

Has anyone the possibility to try the tutorial out and give me an advice on how to complete the missing parts?

I think that the part where I'm lost is the last one : Make data available to JavaScript

I've of course contacted the author but I still have no answer and it is very frustrating no to be able to finish the work.

I guess there must be something in the php part:

<input <?php echo implode( ' ', $atts ); ?> />
<?php if ( array_key_exists( 'description', $options ) ) : ?>
<?php esc_html_e( $options['description'] ); ?>
<?php endif; ?>

But I'm not finding what...

Thanks.

Sylvain

Answer 1

Use wp_enqueue_script() with $in_footer parameter set to true, when loading scripts with your shortcode. To pass data from the PHP part of your code to the JS part use wp_localize_script().

wp_enqueue_script( 'script_name', '/script-location/script.js', array(), '1.0.0', true );  
$data_array = array(
  'key_1' => 'val_1',
  'key_2' => 'val_2'
);
wp_localize_script( 'script_name', 'data_object_name', $data_array );

You now can access the data in your script by addressing the data object - for example:

console.log( data_object_name.key_1 );