Variable not passing from PHP to javascript

Question

I have read through just about every question on here trying to get a numeric value passed from PHP to javascript. As you can see I generated random numbers successfully and it worked great, but when I tried to pass the variables to the graph.update function, even though both variables do have values according to firebug (14060116, and 0 respectively, which is right) they aren't making it to the update function... any ideas? Here's the full script if it helps!

<script>
(function () {

    function createCanvas(divName) {

        var div = document.getElementById(divName);
        var canvas = document.createElement('canvas');
        div.appendChild(canvas);
        if (typeof G_vmlCanvasManager != 'undefined') {
            canvas = G_vmlCanvasManager.initElement(canvas);
        }   
        var ctx = canvas.getContext("2d");
        return ctx;
    }

    var ctx = createCanvas("graphDiv1");
    var upld = <?php echo json_encode($dirupld[0]); ?>;
    var upldred = <?php echo json_encode($dirupldred[0]); ?>;

    var graph = new BarGraph(ctx);
    graph.maxValue = 30;
    graph.margin = 10;
    graph.width = 450;
    graph.height = 200;
    graph.colors = ["#49a0d8", "#d353a0"];
    graph.xAxisLabelArr = ["Traditional", "Duplicate Reduced"];
    graph.update([upld, upldred]);
    //graph.update([Math.random() * 30, Math.random() * 30]);
}());
</script>

Not sure where I am losing the values? Firebug is reporting the following

var upld = 14060116;
var upldred = 0;
graph.update([upld, upldred]);

If you can see the variables with Firebug, doesn't that make it a purely JavaScript problem? :) — Ja͢ck, Oct 03 '13 at 04:08
can give a sample output of `json_encode($dirupldred[0]);` from PHP script? it looks like `upld` is getting an integer instead of JSON object. same for `upldred` — Aaron Gong, Oct 03 '13 at 04:17
You were correct in saying it was getting an integer instead of a json object! One of the below answers offered a method that worked around this and actually gave me a bit more flexibility in how I can work with the variables in php! — Braden, Oct 03 '13 at 16:52

Pramod · Answer 1 · 2013-10-03T04:22:32.737

0

try changing the value of graph.maxValue to get the upld displayed

I'm assuming that you were not expecting anything to be shown for upldred as it was already 0

edited Oct 03 '13 at 04:22

answered Oct 03 '13 at 04:12

Pramod

29
3

score 0 · Accepted Answer · answered Oct 03 '13 at 04:17

First you will passing hidden values in php form
something like this
<input type="hidden" name="upld" id="upld" value="<?php echo json_encode($dirupld[0]); ?>">
<input type="hidden" name="upldred" id="upldred" value=" <?php echo json_encode($dirupldred[0]); ?>">

then you will get this value in javascript

var upld=document.getElementById("upld").value;
var upldred=document.getElementById("upldred").value;

dont use below the code
 var upld = <?php echo json_encode($dirupld[0]); ?>; //Is not Correct
    var upldred = <?php echo json_encode($dirupldred[0]); ?>;//Is not correct

Use document.getElementById().value syntax

I see exactly what you did there, thanks a ton, it worked perfectly! Adding this to long term memory because I guarantee I'll need it elsewhere too. — Braden, Oct 03 '13 at 16:53

score 0 · Answer 3 · answered Oct 03 '13 at 04:23

Your PHP looks sound; you're getting integers back from PHP, then passing those integers as params to render the barchart. As others have mentioned, the fact that it's showing up means that your PHP is fine, and it's a JS problem.

But since you set graph.maxValue = 30; you'll get an error when you try to render a chart with a value of 14060116:

Uncaught IndexSizeError: Index or size was negative, or greater than the allowed value.

(I am assuming you are using http://www.williammalone.com/articles/html5-canvas-javascript-bar-graph/ )

Figured it out with one of the answers, and I completely missed the maxvalue part. Was using that for debugging earlier, probably would have cost me a minute of confusion when I fixed the variable problem! — Braden, Oct 03 '13 at 16:56

Variable not passing from PHP to javascript

3 Answers3