Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
178 views
in Technique[技术] by (71.8m points)

Unable to use a php variable in Javascript

I've been trying to use a php variable inside a JS script to no avail, I've read three threads including: how to use PHP variable in Javascript Access PHP variable in JavaScript How to access PHP variables in JavaScript or jQuery rather than <?php echo $variable ?>

But I still cannot manage to make it work for myself, I'm trying to make a chart with but replacing the names inside with php variables that I will get/give: https://developers.google.com/chart/interactive/docs/gallery/orgchart?csw=1

my code:

<?php

   
$post_grandfather = "Dodo";
echo $post_grandfather;
    ?>

<html>
  <head>

    <script type="text/javascript">
   var myvariable1 = "<?php echo $post_grandfather; ?>";
        var a = <?php echo json_encode($post_grandfather); ?>;
</script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);
        document.write(5 + 6);
      function drawChart() {
        var data = new google.visualization.DataTable();
        var myvariable = <?php echo json_encode($post_grandfather); ?>;
    
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([
          [{'v':String(a), 'f':String(a)'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', ''],
          ['Hamad','Alice', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true});
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>

  </body>
</html>

Please help

question from:https://stackoverflow.com/questions/65852174/unable-to-use-a-php-variable-in-javascript

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You shoud put the php echoing in quotes and you also need to use + for concatenation in javascript:

<?php

$post_grandfather = "Dodo";
echo $post_grandfather;
?>

<html>
<head>

    <script type="text/javascript">
        var myvariable1 = '<?php echo addslashes($post_grandfather); ?>';
        var a = '<?php echo addslashes($post_grandfather); ?>';
    </script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {packages:["orgchart"]});
        google.charts.setOnLoadCallback(drawChart);
        document.write(5 + 6);
        function drawChart() {
            var data = new google.visualization.DataTable();
            var myvariable = '<?php echo addslashes($post_grandfather); ?>';

            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');

            // For each orgchart box, provide the name, manager, and tooltip to show.
            data.addRows([
                [{'v':String(a), 'f': a + ' Mike<div style="color:red; font-style:italic">President</div>'},
                    '', 'The President'],
                [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
                    'Mike', 'VP'],
                ['Alice', 'Mike', ''],
                ['Bob', 'Jim', 'Bob Sponge'],
                ['Carol', 'Bob', ''],
                ['Hamad','Alice', '']
            ]);

            // Create the chart.
            var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
            // Draw the chart, setting the allowHtml option to true for the tooltips.
            chart.draw(data, {'allowHtml':true});
        }
    </script>
</head>
<body>
<div id="chart_div"></div>

</body>
</html>

This should give: Screenshot of the result


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...