How to pass different variables to jQuery function from php

Question

I have a jQuery function to print charts (jqPlot framework). I want to print several charts with different options. So I need to call this function more than once and with different values.

I have an ugly solution like this:

//----- index.php:

// chart 1
$values = "[1,2,3]";
$id_chart = "chart1";
$options = "{...}";
include 'chart.php';

// chart 2
$values = "[8,2,5]";
$id_chart = "chart2";
$options = "{...}";
include 'chart.php';


//---- chart.php

 <script>
 $(function () { 
     $.jqplot(<?php echo $id_chart;?>, <?php echo $values;?>, <?php echo $options;?>);
 });
</script>

I tried another solution - call javascript function with variables and invocate jQuery function in JS function.

//---- index.php:

<script>
function printChart(opt1,opt2,opt3){
    $(function () { 
       $.jqplot(opt1, opt2, opt3);
    });
}
</script>

<?php
// chart 1
    $values = "[1,2,3]";
    $id_chart = "chart1";
    $options = "{...}";

    echo "<script>
    printChart(\"$id_chart\",\"$values\",\"$otpions\");
    </script>";

// chart 2
    $values = "[8,2,5]";
    $id_chart = "chart2";
    $options = "{...}";

    echo "<script>
    printChart(\"$id_chart\",\"$values\",\"$otpions\");
    </script>";
?>

But off course, jQuery can not 'see' variables from JS. Is it possible to pass the variables from JS to jQuery?

Do you have, please, any other suggestions for an optimal solution?

Thank you guys.

Possible duplicate of [How to pass variables and data from PHP to JavaScript?](http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) — Rick Jelier, Dec 13 '16 at 15:56

score 1 · Answer 1 · answered Dec 13 '16 at 15:32

What you need to understand is that PHP is a server side language and JavaScript is a client side language. The PHP will completely execute, generating an HTML page (containing JavaScript) and then send that to the client's browser. The browser renders the HTML and executes the JavaScript. So what you need to do is print the information for JavaScript to the page. This should suffice:

<?php // your PHP to generate the values into an array
    $charts = [
        [
            'values' => [1,2,3]
            'id_chart' => 'chart1',
            'options' => '{...}'
        ],
        [
            'values' => [4,5,6]
            'id_chart' => 'chart2',
            'options' => '{...}'
        ]
    ];
?>
<script>
    var charts = JSON.parse(<?= json_encode($charts) ?>);
    $.each(charts, function () {
        $.jqplot(this.id_chart, this.values, this.options)
    });
</script>

First I apologize, if my comments are stupid. I've been learning. To the point of the question: var charts = JSON.parse(); json_encode generate this: "[{"values":"[1,2,3]","id_chart":"chart1"},{"values":"[4,5,6]","id_chart":"chart2"}]" but JSON.parse do nothing - script doesn't work. I tried to alert something after that, but nothing. — Pavel Novak, Dec 14 '16 at 10:22
1. there are Zero-width non-joiners and Zero-width spaces in that piece of code. 2. you can't use double quote strings in a double quoted string, try changing it to `JSON.parse('[{"values":"[1,2,3]","id_chart":"chart1"},{"values":"[4,5,6]","id_chart":"char2"}]');` note the single quotes and the double quotes. also deleted the zero-width characters. — iHasCodeForU, Dec 14 '16 at 10:33

score 0 · Answer 2 · answered Dec 13 '16 at 15:24

0

Is it possible to pass the variables from JS to jQuery?

jQuery is a library for javascript.
this means that jQuery variables are javascript variables.
which means you can use them like any other javascript variables.

answered Dec 13 '16 at 15:24

iHasCodeForU

179
11

Yeah, I know that. So I tried to send variables to JS function and work with those in jQuery. JS accepted those variables, but it was not seen from $.jqplot function and I don't know why. – Pavel Novak Dec 14 '16 at 10:25

How to pass different variables to jQuery function from php

2 Answers2