If I might make a suggestion for code organization, this is a more compact
method of handling your table drawing that doesn't rely on using global
variables ("data_" in your example):
function load_page_example() {
$("#div_processed").load("div_load.jsp");
}
function drawTable () {
$.post("http://localhost:8084/JQuery_Server_Response_Demo/Process";, {
text: "parameter"
}, function(data, status) {
var dataresults = new google.visualization.DataTable(data);
var options = {
title: 'Test Div Load' // the Table visualization doesn't have
a "title" option
};
var table = new
google.visualization.Table(document.getElementById('div_processed'));
table.draw(dataresults, options);
});
}
google.load('visualization', '1', {packages: ['table'], callback:
drawTable});
On Monday, November 18, 2013 3:22:00 PM UTC-5, [email protected] wrote:
>
> No reason for delaying the API load, just hacking away right now. I
> believe the error is just that, I'm delaying the API load and now its a
> local variable and not seen by the drawchart().. Moved to the top right
> under <script>
>
> I'll cleanup more as you mention below.. Thanks for help!
>
> On Monday, November 18, 2013 12:12:49 PM UTC-8, asgallant wrote:
>>
>> The problem here is twofold:
>>
>> 1) the google loader behaves oddly when called inside other functions.
>> If you don't specify the callback handler inline (as the "callback"
>> parameter of the object in the arguments), it never gets called.
>>
>> 2) you call google.setOnLoadCallback(drawChart()); which runs the
>> drawChart function and passes the return value (null) to the callback
>> handler. You would need to remove the parenthesis after drawChart to pass
>> the function itself as the argument: google.setOnLoadCallback(drawChart);
>>
>> If you want to keep your code in the same general structure, this is what
>> you need to do:
>>
>> function loadChart() {
>> google.load("visualization", "1", {packages: ['table'], callback:
>> drawChart});
>> }
>>
>> Is there are reason why you are delaying loading the API?
>>
>> On Monday, November 18, 2013 2:47:22 PM UTC-5, [email protected] wrote:
>>>
>>> Hmm.. still same error on the DataTable. Posted full code
>>>
>>> <%--
>>> Document : index
>>> Created on : Nov 14, 2013, 9:49:13 PM
>>> Author : Ronald
>>> --%>
>>>
>>> <%@page contentType="text/html" pageEncoding="UTF-8"%>
>>> <script type="text/javascript" src="https://www.google.com/jsapi
>>> "></script>
>>> <script type="text/javascript" src="
>>> http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
>>> "></script>
>>>
>>>
>>> <!DOCTYPE html>
>>> <html>
>>> <head>
>>> <meta http-equiv="Content-Type" content="text/html;
>>> charset=UTF-8">
>>> <title>JQuery Ajax Server Call Demo</title>
>>> </head>
>>> <body>
>>> <h2>This will attempt to demonstrate JQuery's ability to submit
>>> a server request and response without refreshing</h2>
>>>
>>> <input type="button" value="Load Example"
>>> onclick="load_page_example();" />
>>> <input type='button' value="Servlet Request"
>>> onclick="load_response_example();" />
>>> </body>
>>>
>>> <div id='div_processed'></div>
>>> </html>
>>>
>>> <script type="text/javascript">
>>> var data_ = "";
>>> function load_page_example() {
>>> $("#div_processed").load("div_load.jsp");
>>>
>>>
>>>
>>>
>>> }
>>>
>>> function load_response_example() {
>>>
>>>
>>>
>>> $.post("
>>> http://localhost:8084/JQuery_Server_Response_Demo/Process";,
>>> {
>>> text: "parameter"
>>> },
>>> function(data, status) {
>>> data_ = data;
>>>
>>>
>>>
>>> loadChart();
>>>
>>>
>>> } );}
>>>
>>> function loadChart() {
>>>
>>>
>>> google.load("visualization", "1", {packages:
>>> ['table']});
>>>
>>> google.setOnLoadCallback(drawChart());
>>>
>>>
>>>
>>> }
>>>
>>> function drawChart() {
>>> //alert to make sure request data is correct for
>>> chart
>>> alert(data_);
>>> var dataresults = new
>>> google.visualization.DataTable(data_);
>>>
>>>
>>>
>>> var options = {
>>> title: 'Test Div Load'
>>> };
>>>
>>> var table = new
>>> google.visualization.Table(document.getElementById('div_processed'));
>>> table.draw(dataresults, options);
>>>
>>>
>>>
>>> }
>>>
>>>
>>> </script>
>>>
>>> On Monday, November 18, 2013 11:17:34 AM UTC-8, asgallant wrote:
>>>>
>>>> You'll get that error when the API isn't properly loaded. Looking at
>>>> your code above, I don't see a google.load call, which is required to load
>>>> the API. Also, you need to use a callback from the loader to initialize
>>>> your charts rather than a document "ready" event handler, as the API is
>>>> not
>>>> guaranteed to be loaded by the time document "ready" fires. Here's what
>>>> you need:
>>>>
>>>> function drawChart () {
>>>> // code that draws the chart
>>>> }
>>>> google.load('visualization', '1', {packages:['corechart'], callback:
>>>> drawChart});
>>>>
>>>> In your case, it looks like you could substitute
>>>> "load_response_example" for "drawChart":
>>>>
>>>> google.load('visualization', '1', {packages:['corechart'], callback:
>>>> load_response_example});
>>>>
>>>> On Monday, November 18, 2013 1:54:14 PM UTC-5, [email protected] wrote:
>>>>>
>>>>> Here is my error:
>>>>> Uncaught TypeError: Cannot read property 'DataTable' of undefined
>>>>>
>>>>> On Monday, November 18, 2013 10:48:54 AM UTC-8, [email protected] wrote:
>>>>>>
>>>>>> Thank you for responding.. Unfortunately, I'm still getting the same
>>>>>> error
>>>>>>
>>>>>> Here is my updated code:
>>>>>> <%--
>>>>>> Document : index
>>>>>> Created on : Nov 14, 2013, 9:49:13 PM
>>>>>> Author : Ronald
>>>>>> --%>
>>>>>>
>>>>>> <%@page contentType="text/html" pageEncoding="UTF-8"%>
>>>>>> <script src="
>>>>>> http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
>>>>>> "></script>
>>>>>> <script type="text/javascript" src="https://www.google.com/jsapi
>>>>>> "></script>
>>>>>>
>>>>>> <!DOCTYPE html>
>>>>>> <html>
>>>>>> <head>
>>>>>> <meta http-equiv="Content-Type" content="text/html;
>>>>>> charset=UTF-8">
>>>>>> <title>JQuery Ajax Server Call Demo</title>
>>>>>> </head>
>>>>>> <body>
>>>>>> <h2>This will attempt to demonstrate JQuery's ability to
>>>>>> submit a server request and response without refreshing</h2>
>>>>>>
>>>>>> <input type="button" value="Load Example"
>>>>>> onclick="load_page_example();" />
>>>>>> <input type='button' value="Servlet Request"
>>>>>> onclick="load_response_example();" />
>>>>>> </body>
>>>>>>
>>>>>> <div id='div_processed'></div>
>>>>>> </html>
>>>>>>
>>>>>> <script type="text/javascript">
>>>>>> function load_page_example() {
>>>>>> $("#div_processed").load("div_load.jsp");
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> }
>>>>>>
>>>>>> function load_response_example() {
>>>>>> $.post("
>>>>>> http://localhost:8084/JQuery_Server_Response_Demo/Process";,
>>>>>> {
>>>>>> text: "parameter"
>>>>>> },
>>>>>> function(data, status) {
>>>>>>
>>>>>>
>>>>>>
>>>>>> loadChart(data);
>>>>>>
>>>>>>
>>>>>> }
>>>>>> );
>>>>>>
>>>>>> }
>>>>>>
>>>>>> function loadChart(data){
>>>>>>
>>>>>> google.load("visualization", "1", {packages:
>>>>>> ['table']});
>>>>>>
>>>>>> //google.setOnLoadCallback(drawChart);
>>>>>>
>>>>>>
>>>>>> var dataresults = new
>>>>>> google.visualization.DataTable(data, 0.6);
>>>>>>
>>>>>> var options = {
>>>>>> title: 'Company Performance'
>>>>>> };
>>>>>>
>>>>>> var table = new
>>>>>> google.visualization.Table(document.getElementById('div_processed'));
>>>>>> table.draw(dataresults);
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> }
>>>>>> </script>
>>>>>>
>>>>>> On Monday, November 18, 2013 7:33:58 AM UTC-8, asgallant wrote:
>>>>>>>
>>>>>>> You are missing the "new" keyword before
>>>>>>> google.visualization.DataTable:
>>>>>>>
>>>>>>> var dataresults = new google.visualization.DataTable(data);
>>>>>>>
>>>>>>> You don't need to convert "data" to a string, and you don't need to
>>>>>>> specify the wire protocol version (0.6), though it certainly isn't
>>>>>>> hurting
>>>>>>> anything if you include it.
>>>>>>>
>>>>>>> On Monday, November 18, 2013 4:59:20 AM UTC-5, [email protected] wrote:
>>>>>>>>
>>>>>>>> Hello,
>>>>>>>>
>>>>>>>> I'm trying to get server response which is a string literal used to
>>>>>>>> build the table but for some reason I cannot get it to work. I'm
>>>>>>>> getting
>>>>>>>> an error on:
>>>>>>>> var dataresults = google.visualization.DataTable(data.toString(),
>>>>>>>> 0.6);
>>>>>>>>
>>>>>>>> My code:
>>>>>>>> <%--
>>>>>>>> Document : index
>>>>>>>> Created on : Nov 14, 2013, 9:49:13 PM
>>>>>>>> Author : Ronald
>>>>>>>> --%>
>>>>>>>>
>>>>>>>> <%@page contentType="text/html" pageEncoding="UTF-8"%>
>>>>>>>> <script src="
>>>>>>>> http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
>>>>>>>> "></script>
>>>>>>>> <script type="text/javascript" src="https://www.google.com/jsapi
>>>>>>>> "></script>
>>>>>>>>
>>>>>>>> <!DOCTYPE html>
>>>>>>>> <html>
>>>>>>>> <head>
>>>>>>>> <meta http-equiv="Content-Type" content="text/html;
>>>>>>>> charset=UTF-8">
>>>>>>>> <title>JQuery Ajax Server Call Demo</title>
>>>>>>>> </head>
>>>>>>>> <body>
>>>>>>>> <h2>This will attempt to demonstrate JQuery's ability to
>>>>>>>> submit a server request and response without refreshing</h2>
>>>>>>>>
>>>>>>>> <input type="button" value="Load Example"
>>>>>>>> onclick="load_page_example();" />
>>>>>>>> <input type='button' value="Servlet Request"
>>>>>>>> onclick="load_response_example();" />
>>>>>>>> </body>
>>>>>>>>
>>>>>>>> <div id='div_processed'></div>
>>>>>>>> </html>
>>>>>>>>
>>>>>>>> <script type="text/javascript">
>>>>>>>> function load_page_example() {
>>>>>>>> $("#div_processed").load("div_load.jsp");
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> }
>>>>>>>>
>>>>>>>> function load_response_example() {
>>>>>>>> $.post("
>>>>>>>> http://localhost:8084/JQuery_Server_Response_Demo/Process";,
>>>>>>>> {
>>>>>>>> text: "parameter"
>>>>>>>> },
>>>>>>>> function(data, status) {
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> loadChart(data);
>>>>>>>>
>>>>>>>>
>>>>>>>> }
>>>>>>>> );
>>>>>>>>
>>>>>>>> }
>>>>>>>>
>>>>>>>> function loadChart(data){
>>>>>>>>
>>>>>>>> google.load("visualization", "1", {packages:
>>>>>>>> ['table']});
>>>>>>>>
>>>>>>>> //google.setOnLoadCallback(drawChart);
>>>>>>>>
>>>>>>>>
>>>>>>>> var dataresults =
>>>>>>>> google.visualization.DataTable(data.toString(), 0.6);
>>>>>>>>
>>>>>>>> var options = {
>>>>>>>> title: 'Company Performance'
>>>>>>>> };
>>>>>>>>
>>>>>>>> var table = new
>>>>>>>> google.visualization.Table(document.getElementById('div_processed'));
>>>>>>>> table.draw(dataresults);
>>>>>>>>
>>>>>>>> alert("At end of google chart build");
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> }
>>>>>>>> </script>
>>>>>>>>
>>>>>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
