How can I use a PHP variable inside of my JavaScript?

Question

I think this is a case of me not knowing javascript, but I can't for the love of god get this to work

For some reason, creating vars cancels out my java alert code. (maybe bc its wrong) And my java vars aren't being set correctly.

I pointed out the problems in my comments

In my SQL, I have Temperatures all with an associative value disk 'id'. So my data structure in this is:

$array[id];
$array[id]=array();
//For every new element
//Using while ($row = mysql_fetch_assoc($result)) 
$array[id][]="temperature";

//second id
$array[id2];
$array[id2]=array();
//For every new element
$array[id2][]="temperature";
$array[id2][]="temperature2";
$array[id2][]="temperature3";
$array[id2][]="temperature4";

MY ATTEMPT (WRONG CODE): //I simplified this code down. In my own version, the join works ONLY when I use an actual index "174" instead of a javascript variable that is 174. Couldnt get join to be alerted in this simplified version

<?php
$phparray=array();
$phparray["100"]="First Element";
$phparray["101"]="Second Element";
$phparray["102"]="Third Element";

$phparray["100"]=array();
$phparray["101"]=array();
$phparray["100"][]="First Element - Sub 2";
$phparray["100"][]="First Element - Sub 3";
$phparray["101"][]="Second Element - Sub 2";


echo $phparray["100"];  //Does not show 'First Element'. Shows Array
echo $phparray["100"][0];   //Correctly shows sub element
//var_dump($phparray);


?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Associative Array in PHP used in Java Test</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript">

var index=100;
//var index2=<?php echo $phparray[index]; ?>; //Supposed to output 'First Element'
var joined=[<?php echo join($phparray[index], ', '); ?>];   //Supposed to join elements of '100'

alert("hello");  //This line does not work anymore after the var index2 made above
        </script>
    </head>
    <body>

<div id="container" style="height: 500px; min-width: 600px"></div>
    </body>
</html>

EDIT: Here is the long full code of my php page:

<?php 
include_once("../../config.php"); 
$conn=mysql_connect($dbhost,$dbuser,$dbpasswd) or die ('Error connecting to mysql');
mysql_select_db($dbname);

ini_set('error_reporting', E_ALL);
//ini_set('display_errors',1);
ini_set('log_errors',1);

$sql = "select disk_id from disk";
$result = mysql_query($sql);
$ids = array();
$names=array();
$temperatures = array();
while ($row = mysql_fetch_assoc($result)) {
   $ids[] = $row['disk_id'];
    $temperatures[]=$row['disk_id'];
    //echo "<br>".$row['disk_id'];
}
//

foreach ($ids as $value)
{
//echo "--START ".$value."--<br>";
$sql = "select * from disk_data WHERE disk_id=".$value;
$result = mysql_query($sql);
$dates=array();
    $key = array_search($value, $temperatures);
    $temperatures[$value] = array();

//var_dump($temperatures);
while ($row = mysql_fetch_assoc($result)) 
{   
    $temps = $row['Temperature'];
    $temp = explode("||", $temps);
    $prehex=$temp[3];
    $posthex=hexdec(substr($prehex,-2));

    $predate=$row['create_date'];
    $postdate =strtotime($predate)*1000;


    $output="[".$postdate.", ".$posthex."]";
    //$temperatures[$key][] = $output;
    $temperatures[$value][] = $output;


    $dates[]=$row['create_date'];
    //echo $row['create_date']." ".end($temperatures[$key])."<br>";
}
}

print_r(array_keys($array));
var_dump($temperatures);
foreach ($ids as $value)
{
    //echo $value;
    $key = array_search($value, $temperatures);

    //echo "Key: $key; Value: $temperatures[$value]<br />\n";
    $comma = join($temperatures[$value],", ");
    echo $comma;
    echo "\n";
}



?>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highstock Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript">

$(function() {
    var seriesOptions = [],
        yAxisOptions = [],
        seriesCounter = 0,




        //names=[<?php echo join($ids, ', '); ?>],
        names=["174"], //Above code works. BUT only using ID 174 to test
        values=[<?php echo join($temperatures["174"], ', '); ?>], //Supposed to be ALL data. But temp 174
        colors = Highcharts.getOptions().colors;
    //alert(values);

    $.each(names, function(i, name2) {
//alert(seriesOptions.length);
alert(name2.toString()); //Works....
var values=[<?php 
echo join($temperatures[name2], ', '); ?>]; //Doesnt work
//alert(values);
console.log(values);
//document.write(values);


            seriesOptions[i] = 
            {
                name: name2,
                data:values

            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter++;

            if (seriesCounter == names.length) 
            {
                createChart();
            }

    });



    // create the chart when all data is loaded
    function createChart() {

        chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container'
            },

            rangeSelector: {
                selected: 0
            },

                title: {
                    text: 'Test Performance Data',
                    style: {        
                margin: '10px 100px 0 0' // center it   
                }           
        },


            yAxis: {
            title: {text:'Temperature (°C)'}, 
                labels: {
                    formatter: function() {
                        return this.value + '';
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'
                }]
            },

            plotOptions: {
            line: {
                gapSize: 0
            },
                series: {
                    //compare: 'percent'
                }
            },

            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                yDecimals: 2
            },

            series: seriesOptions
        });
    }

});
        </script>
    </head>
    <body>
<script type="text/javascript" src="../js/highstock.js"></script>
<script type="text/javascript" src="../js/themes/gray.js"></script>
<div id="container" style="height: 500px; min-width: 600px"></div>
    </body>
</html>

Java != JavaScript... Can you post the generated HTML? Also, you cannot mix JavaScript/PHP like that. — Rob W
– Rob W, Commented Mar 19, 2012 at 20:51

Rob W · Accepted Answer · 2012-03-19 20:54:38Z

4

You cannot mix PHP and JavaScript like that. JavaScript variables are not parsed in PHP.
Even when index is replaced by a variable $index or 100, your code would still miss quotes.

Use the following instead:

<script type="text/javascript">
var index=100;
var array = <?php echo json_encode($phparray); ?>;
var joined = array[index];

The last line outputs the following:

var joined={"100":["First Element - Sub 2","First Element - Sub 3"],"101":["Second Element - Sub 2"],"102":"Third Element"};

Before trying this, make sure that you remove the invalid comment in the line after var index = 100;. Otherwise, a PHP warning can be generated, which invalidates the code:

var index=100;
//var index2=PHP Notice:  Use of undefined constant index - assumed 'index' in /tmp/t.php on line 29
PHP Notice:  Undefined index: index in /tmp/t.php on line 29

answered Mar 19, 2012 at 20:54

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

1 Comment

CREW Over a year ago

thanks! I understand now how the process works. When I try using json_encode, the program stops at that line. var array = <?php echo json_encode($phparray); ?>; shows up as var array= and my program stops. Any idea why?

Marc B · Accepted Answer · 2012-03-19 20:58:47Z

1

Look at the generated code in the client browser, you'll find that it looks like this:

var joined = [First Element - Sub2, Second Element etc.....]

note the lack of quotes around your inserted strings. You've created Javascript syntax errors, which kills the entire <script> block those variables are embedded within.

As Rob W mentions above, you have to use json_encode() to produce VALID javascript out of your arbitrary text.

As a general rule, if you've got PHP generating anything javascript, and especially when filling in variables like that, use json_encode() - it'll keep these kinds of headaches away.

answered Mar 19, 2012 at 20:58

Marc B

362k44 gold badges433 silver badges508 bronze badges

Comments

Carl · Accepted Answer · 2012-03-19 20:59:58Z

1

PHP runs server side and will output its content in to the webpage, before its then rendered in your browser and the JavaScript is run. (meaning when php is running, it has no idea what "index" is because as far as its concerned its never been defined.

I expect what you want to do is move your PHP in to javascript so you can then access it however you like in the page. In your JavaScript just add somthing along the lines of this:

 var my_array_in_js = <?php echo json_encode($phparray); ?>;

Which will result in PHP printing its array as json, which can then be read by javascript however you want. Then to read a specific index just use

alert(my_array_in_js[index]);

answered Mar 19, 2012 at 20:59

Carl

1,81613 silver badges17 bronze badges

Collectives™ on Stack Overflow

How can I use a PHP variable inside of my JavaScript?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related