Multiple calling javascript from shortcode in one page

Question

I'm preparing plugin and I have trouble to call (and return) javascript from each (same) shortcode in one wp page/post. Javascript returns values only to last shortcode in page.

PHP code here:

add_shortcode( 'ada_chart', 'ada_chart_stranka' ); 
function ada_chart_stranka ($atts) {            
    $a = shortcode_atts( array(
        'cid' => '',
    ), $atts );     
    $cislo_chart = $a['cid'];                
    wp_register_script( 'ada_chart_handle', plugins_url().'/ada-chart/js/ada-chart1.js' );
    $ada_sheet_params = array(
        'ada_ch_cislo'      =>  $cislo_chart,
    );  
    wp_localize_script( 'ada_chart_handle', 'ada_ch', $ada_sheet_params );
    wp_enqueue_script( 'ada_chart_handle');     
    return 'atribut: '.$cislo_chart;        
}

and JS script here:

    var cisloChart = ada_ch.ada_ch_cislo;
document.getElementById('chart_div'+cisloChart).innerHTML = 'Cislo: ' + cisloChart;

Can anybody hepl me? Thanks

Answer 1

A script should be enqueued and localized only one time per page; so, what you describe is the correct behaviour. I think you are confusing localizing a script with printing inline JavaScript. Also, enqueuing and localizing should be done in wp_enqueue_scripts action.

You need to think in a different approach.

For example (just a example), you could use dataset API:

First, enqueue the script:

add_action( 'wp_enqueue_scripts', 'cyb_enqueue_scripts' );
function cyb_enqueue_scripts() {
    wp_enqueue_script( 'ada_chart_handle', plugins_url().'/ada-chart/js/ada-chart1.js' );
}

Second, use the data atribute to include the cid value:

add_shortcode( 'ada_chart', 'ada_chart_stranka' ); 
function ada_chart_stranka ($atts) {            
    $a = shortcode_atts( array(
        'cid' => '',
    ), $atts );     

    $cislo_chart = $a['cid'];                

    return '<div data-cid="' . $cislo_chart . '"></div>';        
}

Third, write JavaScript that use dataset API to read the data-cid attribute and perform the desired action:

// Get all elements with data-cid attribute
var a = document.querySelectorAll('[data-cid]');

// Loop over all selected elements
for (var i in a) if (a.hasOwnProperty(i)) {

    // Get the value of data-cid attribute for current element in the loop
    var cid = a[i].getAttribute('data-cid');

    // Do something with the cid value

}

Answer 2

Cybmeta,

thanks a lot for your answer. Your idea saved me a lot of sleepless nights )

I tried to use your solution but there was some trouble. The browser has showed empty divs, without signalisation any error in Javascript.

But finally I have combined your and my solution that working very well. Seems that wp_enqueue_scripts is better to use inside the shortcode.

Final solution:

PHP script:

    add_shortcode( 'ada_chart', 'ada_chart_stranka' ); 

function ada_chart_stranka ($atts) {            
    $a = shortcode_atts( array(
        'cid' => '',
    ), $atts );   

    $cislo_chart = $a['cid'];                
   wp_enqueue_script( 'ada_chart_handle', plugins_url().'/ada-chart/js/ada-chart.js');        
    return 'atribut: '.$cislo_chart.'<br><div id="chart_div'.$cislo_chart.'" data-cid="' . $cislo_chart . '" style="height: 150px; background: #d5d5d5"></div>';       
}

Javascript:

    var a = document.querySelectorAll('[data-cid]');
    for (var i in a) if (a.hasOwnProperty(i)) {

      // Get the value of data-cid attribute for current element in the loop
      var cid = a[i].getAttribute('data-cid');

      'Cislo: ' + cid;

      // Do something with the cid value
      document.getElementById('chart_div'+cid).innerHTML = 'Cislo: ' + cid;
    }