Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-18-2011, 12:50 AM   PM User | #1
xecure
New to the CF scene

 
Join Date: Nov 2011
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
xecure is an unknown quantity at this point
Trying to load Google charts through a jQuery ajax call

I am trying to write a poll function that loads the results and displays it in the same page without refreshing. I am using google charts api and jquery ajax.

main page I have this:

Code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['corechart']}); 
    google.setOnLoadCallback(function(){  $("#poll_yes").removeAttr('disabled'); });
    function drawChart(rows) 
    {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Answers');
        data.addColumn('number', 'Number');
        data.addRows(rows);

        // Set chart options
        var options = 
        {
            'title'             :'Do you Like my poll?',
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);              
    }       

    jQuery(document).ready(function() {
        $.ajaxSetup ({  
            cache: false  
        }); 
        var ajax_load = "<img src='images/loading.gif' alt='loading...' />";  

        $("#poll_yes").click(function(){
            $("#result").html(ajax_load); 
            $.post(
                "query.php",  
                {answer: "yes", poll_id: 5},  
                function(response){ 
                    drawChart(response);
                }
            );
        });                 
    }); 
</script>
<input type="submit" value="yes" disabled="disabled" id="poll_yes"/>
<div id="result"><div id="chart_div">&nbsp;</div></div>
At the momemnt in my query.php page I just have it spitting out fake JSON data:

Code:
<?php 
if(isset($_POST['answer']))
{
    echo "{\"yes\": 14,\"no\": 9}";
}
else
{
    echo "{\"yes\": 9,\"no\": 14}";
}
?>
After I hit the 'yes' button all it does is show the ajaxloader.gif image.

I'm feeling very frustrated and cannot for the life of me figure out why this is happening. Any help is appreciated =)
xecure is offline   Reply With Quote
Old 11-18-2011, 11:19 AM   PM User | #2
SB65
Senior Coder

 
Join Date: Feb 2009
Location: West Yorkshire
Posts: 2,817
Thanks: 9
Thanked 681 Times in 675 Posts
SB65 will become famous soon enoughSB65 will become famous soon enough
If I run your code in Firebug it throws an error on this line:

Code:
data.addRows(rows)
because addRows is expecting a number or an array.
SB65 is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 11:55 PM.


Advertisement
Log in to turn off these ads.