How to draw table with Google Datatable Using PHP & jQuery Ajax Json -


i trying create table using google datatable ajax & json.when user selected file selectbox , gets file datas json php & jquery ajax.

here sample json datas:

{   "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}]}       ] } 

here jquery ajax calls:

 google.load("visualization", "1", {packages:["table"]});   google.setonloadcallback(drawtable);    $(document).on("change","select#source",function(){              var source=$("select#source option:selected").attr("value");                        function drawtable() {                    var jsondata = $.ajax({                       url: "google_charts_data_preview_ajax.php",                       data:{source:source},                       datatype:"json",                       async: false                       }).responsetext;                    // create our data table out of json data loaded server.                    var data = new google.visualization.datatable(jsondata);                    var table = new google.visualization.table(document.getelementbyid('g_table'));                    table.draw(data, {showrownumber: true});                   }          }); 

after error ocuring on console.error is:

uncaught referenceerror: drawtable not defined 

google tells how create charts using json.i applied says.but couldnt figured out mistake had done?.

https://developers.google.com/chart/interactive/docs/php_example

how can achive this?

thanks

this simple scope problem. must move drawtable() function outside $(document).on("change",.. handler, global scope. google.setonloadcallback cannot see drawtable since hidden inside handler.

function drawtable() {      var source=$("select#source option:selected").attr("value");          var jsondata = $.ajax({          url: "google_charts_data_preview_ajax.php",          data: {              source: source          },          datatype: "json",          async: false      }).responsetext;       // create our data table out of json data loaded server.      var data = new google.visualization.datatable(jsondata);      var table = new google.visualization.table(document.getelementbyid('g_table'));      table.draw(data, {          showrownumber: true      });  } 

and

$(document).on("change","select#source",function(){    drawtable(); }); 

proof actual problem , code otherwise works great -> http://jsfiddle.net/411gosq7/


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -