debugging javascript in a view |
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
You should not have <script> tags inside a .js file. Remove the opening and closing tag.
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
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> PHP Code: // Callback that creates and populates a data table, 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 ]
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
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 usingYou 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 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> sampleData.json Code: {
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.
proof that an old dog can learn new tricks
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({ |
Welcome Guest, Not a member yet? Register Sign In |