Trying to load Google charts through a (jQuery)ajax call [duplicate]

问题

Possible Duplicate:
Trying to load Google charts through a jQuery ajax call

I've been at this all day and cannot think of a way to make this work. I am not very familiar with jQuery.

What I'm trying to do: I am trying to write a poll function that loads the results and displays it in the same page without refreshing.

So far I have this jQuery code:

    $("#post_yes").click(function(){
    $("#result").html(ajax_load);  //loads ajaxloader.gif
    $.post(  
        "query.php",  
        {answer: "yes", poll_id: 5},  
        function(responseText){  
            $.getScript(scriptUrl, function(){  
                $("#result").html(responseText);  
            });             
        },  
        "html"  
    );  
});

It's supposed to query query.php and insert the vote in the database. Then I've coded query.php to return the amount of yes and no values and then generate a chart on that page. This is something like that I have:

    google.load('visualization', '1.0', {'packages':['corechart']}); // Load the Visualization API and the piechart package.
    google.setOnLoadCallback(drawChart); // Set a callback to run when the Google Visualization API is loaded.

    function drawChart() 
    {
        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Answers');
        data.addColumn('number', 'Number');
        data.addRows([
            ['Yes', $yes_value],
            ['No', $no_value],
        ]);

        // Set chart options
        var options = 
        {
            'title'             :'Do you Like my smile?',
            'colors'            :['#f25a5a','#5aa5f2'],
            'fontName'          :'Verdana',

            'backgroundColor'   :'#e7e7e7',
            'chartArea'         :{left:0,top:10,width:"400",height:"400"},
            'is3D'              : true,
        };

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

After debugging the page for a while using chrome's debugger I've noticed that any javascript in query.php does not run in my original page, and thats why the chart isn't being shown.

My question to you gurus: Is there any way I can show the chart from query.php. Or is there a way I can show the chart after a user has voted (including the data the user has submitted)? What other approach can I take?

Although I am not very fluent with JavaScript/JQuery, I will probably be able to follow any code (or even pseudo-code, any little bit helps!) you guys give.

回答1:

make your button by default disabled

load Google API in your js file, on load callback enable your button

// Set a callback to run when the Google Visualization API is loaded.     
google.setOnLoadCallback(function(){  $("#post_yes").removeAttr('disabled'); });

move the drawChart function to your js file, add a parameter 'rows'

function drawChart(rows) {
  ...
  data.addRows(rows);
  ...
}

inside php file build needed rows and return them (as valid json)

on btn click post your data, on success callback call the drawChart function and pass returned rows to it

$.post(
  "query.php",  
  {answer: "yes", poll_id: 5},  
  function(response){ 
    drawChart(response);
  }
);

or if you don't want to disable the button you can on post success first load google API and on that loading callback call drawChart with passed response // function(){ drawChart(response); }

来源：https://stackoverflow.com/questions/8163408/trying-to-load-google-charts-through-a-jqueryajax-call

标签

javascript

jquery

ajax

google-visualization