Welcome Guest, Not a member yet? Register   Sign In
debugging javascript in a view
#1

(This post was last modified: 01-19-2018, 02:26 AM by richb201.)

I am trying to debug a small amount of javascript code. After a few frustrating days of not being able to place breakpoints, I was being told by support at phpStorm that it was my configuration. Finally it turn out  (according to phpSupport) that javascript in the same file as HTML cannot be debugged. So I took most of the javascript code out of my View and put it in a file called javascript_funcs.js thinks that I could then debug it.  

here is the View:
<head>
   <br><br><br><br>
here1
   <br><br><br><br>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript" src="/js/javascript_funcs.js"></script>
   <script type="text/javascript">
       google.charts.load('current', {packages:["orgchart"]});
       google.charts.setOnLoadCallback(drawChart);   <<this callback should call a function in my js file

       }

   </script>
</head>


I am trying to debug the drawChart function which is in the javascript_funcs module. But I am having two problems. First I get an error in my Chrome debugger that drawChart is an unknown function in the View file. That makes sense since drawChart is in the javascript_funcs.js file:

<script>
function drawChart() {

   // For each orgchart box, provide the name, manager, and tooltip to show.
   var data = new google.visualization.jsonToDateTable(data[]);
   // 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>




Secondly I am getting an error form line 1 of javascript_funcs "<".  I must have to wrap my <script></script> in javascript_funcs in something? 

Aagin all of this is so I can debug drawChart(). I have no problem leaving it in the View other than the limited debugging. 


.
proof that an old dog can learn new tricks
Reply
#2

You should not have <script> tags inside a .js file. Remove the opening and closing tag.
Reply
#3

(This post was last modified: 01-19-2018, 06:24 AM by richb201.)

OK. I got rid of the tags and now it doesn't get that error. But it is still not running. Here is the code within the View (not the javascript_funcs.js). The idea is that I set a callback that doesn't get called until I load the View.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="/js/javascript_funcs.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
</script>

However, when I hover over the setOnLoadCallback statement I get a yellow popup "Unresolved function or method setOnLoadCallback(). I suspect it is complaining about the parameter drawChart because I have set breakpoints in drawChart and it is never reached.
proof that an old dog can learn new tricks
Reply
#4

The only thing I can think of is that your drawChart function are wrong.
Googles demo works great in the view/js combo.

Code:
<html>
 <head>
   <!--Load the AJAX API-->
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript" src="/js/charts.js"></script>
   <script type="text/javascript">

     // Load the Visualization API and the corechart package.
     google.charts.load('current', {'packages':['corechart']});

     // Set a callback to run when the Google Visualization API is loaded.
     google.charts.setOnLoadCallback(drawChart);
   </script>
 </head>

 <body>
   <!--Div that will hold the pie chart-->
   <div id="chart_div"></div>
 </body>
</html>


PHP Code:
     // Callback that creates and populates a data table,
 
     // instantiates the pie chart, passes in the data and
 
     // draws it.
 
     function drawChart() {

 
       // Create the data table.
 
       var data = new google.visualization.DataTable();
 
       data.addColumn('string''Topping');
 
       data.addColumn('number''Slices');
 
       data.addRows([
 
         ['Mushrooms'3],
 
         ['Onions'1],
 
         ['Olives'1],
 
         ['Zucchini'1],
 
         ['Pepperoni'2]
 
       ]);

 
       // Set chart options
 
       var options = {'title':'How Much Pizza I Ate Last Night',
 
                      'width':400,
 
                      'height':300};

 
       // Instantiate and draw our chart, passing in some options.
 
       var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
 
       chart.draw(dataoptions);
 
     
If it's phpstorm "Unresolved function or method setOnLoadCallback()", it's because it cant download the file from google and parse it. You need to check the console in your browser instead.

This is the real error, so the provided drawChart are wrong. The code in your other thread works as aspected. 
Code:
charts.js:4 Uncaught SyntaxError: Unexpected token ]
/:12 Uncaught ReferenceError: drawChart is not defined
    at /:12
Reply
#5

(This post was last modified: 01-19-2018, 07:49 PM by richb201.)

Yes. I can see that. What I did was copied the example of passing in a json string and displaying it EXACTLY as it appears in the docs. I even used a datafile of their suggestion. It still doesn't work. This the view I am using

google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var jsonData = $.ajax({
           url: "Configure.php",
           dataType: "json",
           async: false
       }).responseText;

       var data = new google.visualization.DataTable(jsonData);

       // Create the chart.
       // Instantiate and draw our chart, passing in some options
       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});
   }

 I see that this line is failing:

google.charts.load('current', {packages:['corechart']}) with

"Failed to load resource: the server responded with a status of 404 (Not Found)"

So I think what is happening is that my  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> is failing with a 404 being returned. However I loaded up a packet sniffer and this is what it sees as the request/response

Request HeadersFull URL: https://www.gstatic.com/charts/loader.js
User-Agent : Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
X-DevTools-Emulate-Network-Conditions-Client-Id : (9FB18167E5F642CED6651B041C837001)
X-Chrome-UMA-Enabled : 1
X-Client-Data : CKO1yQEIkLbJAQiitskBCMS2yQEI+pzKAQipncoBCKijygE=
Accept : */*
Referer : http://localhost/index.php/Configure/org...management
Accept-Encoding : gzip, deflate, br
Accept-Language : en-US,en;q=0.9


Response HeadersFull URL: https://www.gstatic.com/charts/loader.js
status : 200
accept-ranges : bytes
vary : Accept-Encoding, Origin
content-encoding : gzip
content-type : text/javascript
content-length : 33977
date : Sat, 20 Jan 2018 02:33:39 GMT
expires : Sat, 20 Jan 2018 03:33:39 GMT
last-modified : Wed, 20 Sep 2017 16:00:41 GMT
x-content-type-options : nosniff
server : sffe
x-xss-protection : 1; mode=block
cache-control : public, max-age=3600
age : 444
alt-svc : hq=":443"; ma=2592000; quic=51303431; quic=51303339; quic=51303338; quic=51303337; quic=51303335,quic=":443"; ma=2592000; v="41,39,38,37,35"


I wonder if the slow response speed is causing things to get out of sync? It seems I am trying to reload this script every time I display the view? 
proof that an old dog can learn new tricks
Reply
#6

Quote:Yes. I can see that. What I did was copied the example of passing in a json string and displaying it EXACTLY as it appears in the docs. I even used a datafile of their suggestion. It still doesn't work. This the view I am using
You can't just copy paste everything, you need to adapt it into the system at hand.

Controller/Configure.php: N/a what you did wrong, you never supplied it.
View: N/a if the URL for Configure.php are correct. I don't know the URL you tried to open or where you placed it. If you want to access a file in the root folder or an controller, you need to start looking in the root by placing a forward slash "/"
404: If you don't specify the root folder, Codeigniter will return 404 if it dosen't find your Configure.php, nothing to do with Google's files.

Here's how you adapt the following guide into Codeigniter:
https://developers.google.com/chart/inte...hp_example

application\controller\Api.php
PHP Code:
<?php
defined
('BASEPATH') OR exit('No direct script access allowed');

class 
Api extends CI_Controller {
    
    public function 
index()
    {
        
$this->load->view('api');
    }

    public function 
json()
    {
        
$this->output
                
->set_content_type('application/json''utf-8')
                ->
set_output(file_get_contents('sampleData.json'));
    }


application\view\api.php
Here I got my URL as: /index.php/api/json
Depending on your configuration you can just specify /api/json
Code:
<html>
 <head>
   <!--Load the AJAX API-->
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script type="text/javascript">
   
   // Load the Visualization API and the piechart package.
   google.charts.load('current', {'packages':['corechart']});
     
   // Set a callback to run when the Google Visualization API is loaded.
   google.charts.setOnLoadCallback(drawChart);
     
   function drawChart() {
     var jsonData = $.ajax({
         url: "/index.php/api/json",
         dataType: "json",
         async: false
         }).responseText;
         
     // Create our data table out of JSON data loaded from server.
     var data = new google.visualization.DataTable(jsonData);

     // Instantiate and draw our chart, passing in some options.
     var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
     chart.draw(data, {width: 400, height: 240});
   }

   </script>
 </head>

 <body>
   <!--Div that will hold the pie chart-->
   <div id="chart_div"></div>
 </body>
</html>

sampleData.json
Code:
{
 "cols": [
       {"id":"","label":"Topping","pattern":"","type":"string"},
       {"id":"","label":"Slices","pattern":"","type":"number"}
     ],
 "rows": [
       {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
       {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
       {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
       {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
       {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
     ]
}
Reply
#7

(This post was last modified: 01-20-2018, 09:11 AM by richb201.)

Thanks. From my config.php
$config['base_url']='http://localhost//';
and from httpd.conf (apache config)

    DocumentRoot "C:/xampp/htdocs/sub_crud"
    <Directory "C:/xampp/htdocs/sub_crud">
So I think that the root folder is /sub_crud
When I startup the system I type localhost<enter> on the address bar of Chrome.
I modified the controller:
       $this->load->view('configure_chart');
       $this->output->set_content_type('application/json', 'utf-8');
       $this->output->set_output(file_get_contents("sampleData.json"));

I modified the view to have url of controller/function

function drawChart() {
       var jsonData = $.ajax({
           url: "/Configure.php/org_chart_management",
           dataType: "json",
           async: false
       }).responseText;

When I run org_chart_management() I get the attached dump of HTML unrendered.

Attached Files Thumbnail(s)
   
proof that an old dog can learn new tricks
Reply
#8

(This post was last modified: 01-20-2018, 01:56 PM by jreklund.)

You need to have two functions inside your controller. I have a separate index and json function.
You put everything inside org_chart_management and that's not going to work. Now it's echoing your html out as json.

You also have your url wrong in the ajax.
Code:
var jsonData = $.ajax({
  url: "/index.php/configure/json", // Here is the second function that you forgot to create
  dataType: "json",
  async: false
}).responseText;
Reply




Theme © iAndrew 2016 - Forum software by © MyBB